180 Websites in 180 Days: Day 38 – Aaron Massey – Medium

  • 180 Websites in 180 Days: Day 38Check out today’s and the rest of this projects challenges here!Don’t know how I forgot to do this blog post yesterday!Woke up to a new video from one of the YouTube channels I subscribe to, CodingTutorials360, about a Free Code Camp project I was planning on doing soon.
  • I decided to just go ahead and do it because I wanted to see how he sorted his lists.The way I previously sorted my lists was just to have each version of the lists already rendered and a different list would be shown depending on the sort method.
  • I thought there would be a way to actually sort through one list without the need of rendering others.
  • However, I did learn some simpler methods of doing some things which is always a plus!If any of you have done the Free Code Camp Front End Projects and are looking for more to do be sure to check the FCC beta.

Woke up to a new video from one of the YouTube channels I subscribe to, CodingTutorials360, about a Free Code Camp project I was planning on doing soon. I decided to just go ahead and do it because I…
Continue reading “180 Websites in 180 Days: Day 38 – Aaron Massey – Medium”

Mocking API responses with React Apollo – Carlos Martinez – Medium

  • Mocking API responses with React ApolloApollo Client and the GraphQL tools that have been made open source within the last years are pretty awesome, the community that is being builded around them is great.
  • However, as with every new technology, there are a lot of things that need to mature and improve.Documentation on testing is definitely one of the bits that needs a lot of improvements, it isn’t clear what to do, and I personally found myself digging into the source code to understand what to do.One of the problems I faced was that I wanted to use mock responses when testing my app components, and there are at least two ways of doing this:The first way is to use graphql-tools.
  • From their docs:This package allows you to use the GraphQL schema language to build your GraphQL.js schema, and also includes useful schema tools like per-type mocking.You can use this library together with a custom MockNetworkInterface to return mocked responses to your components:const { mockServer } = require(“graphql-tools”);const { print } = MockNetworkInterface { constructor(schema, mocks = {}) { if (!
  • schema) { throw new Error(‘Cannot create Mock Api without specifying a schema’); } this.mockServer = mockServer(schema, mocks); } query(request) { return request.variables); }}This is nice, and very flexible, with graphql-tools you can do pretty much whatever you do in your actual API.What I didn’t like about this approach is that you need your schema in sync with the schema defined in your API (you can do this making an instrospection query to your backend), I also found this approach overcomplicates things unnecessarily.The second (and simpler) approach I found was to use the mockNetworkInterface class, this class is defined in react-apollo/test-utils, you can have a peek on it here.To use it, you first need to define some Mock Requests (these requests need to be exactly the same your components will make):const GraphQLMocks = [ { request: { query: UserProfileQuery, variables: {} }, result: { data: { current_user: { id: 1, first_name: ‘Foo’, last_name: ‘Bar’, email: ‘foo@example.com’ } } } }];The UserProfileQuery is exported from your component:export const UserProfileQuery = gql` query userProfile { current_user { id first_name last_name email } }`;And this is how you use it to setup your tests:import { mockNetworkInterface } from ApolloClient from ‘apollo-client’;import { ApolloProvider } from ‘react-apollo’;import { mount } from ‘enzyme’;import App from ‘.
  • /App.js’;import React from ‘react’;const setupTests = () = { const networkInterface = // or mocks); const client = new ApolloClient({ networkInterface, addTypename: false }); const wrapper = mount( ApolloProvider client={client} App / /ApolloProvider ); return { wrapper };};It is important that you pass addTypename: false to ApolloClient, otherwise you would have to include a __typename field in all your mocks and queries.Now any queries your components make will be handled by your mocked responses, you have full control of what you want to return.And that’s it!

Apollo Client and the GraphQL tools that have been made open source within the last years are pretty awesome, the community that is being builded around them is great. However, as with every new…
Continue reading “Mocking API responses with React Apollo – Carlos Martinez – Medium”

Looking for QA Volunteers for Introduction to React Native

  • The QA process is a time for people to spot any glaring mistakes, spelling errors, broken links, mistakes in teachers notes, clarification on quiz questioning, and any other feedback.
  • With QA there’s a few other things you should know.
  • Those are the quirks of QA mode.
  • Please use email to provide feedback.
  • When in QA, we try to not talk about the course here on the Community forum until it’s officially released.

Participate in discussions with other Treehouse members and learn.
Continue reading “Looking for QA Volunteers for Introduction to React Native”

ReactJs: Using stores to improve your code – Doyin Olarewaju – Medium

ReactJs: Using stores to improve your code  #reactjs #react #javascript #reactjs

  • ImagesOne of the first steps i take is to create an ImageStore.
  • This helps me keep all images in one place, helps ensure my images are compiled with react and also helps me not worry about relative links to my app root.So some code://say the name of this file is ImageStore located at stores/ImageStoreimport UserImage from FriendImage from default { UserImage, FriendImage}Then to import it in your viewsimport ImageStore from ‘.
  • /stores/ImageStore// excluded some imports for brevity sake………export default class TestClass extends Component {render() img src={ImageStore.UserImage} alt=’User’ / … … }}Thats it.
  • Just add all images you wish to use in your app into the store and import the ImageStore.
  • No relative links required, the image gets compiled into your app and best of all, if the image location needs to change for any reason all you need to do is change in the ImageStore file and it changes everywhere.

I’m a sucker for well written code. When code is badly written, the app kinda gets boring and it becomes a task to work on the codebase. I love stores in js, especially since es6. Simple classes with…
Continue reading “ReactJs: Using stores to improve your code – Doyin Olarewaju – Medium”

Slashing the React bundle size – RoadToNaukri Stories about product and technology

Slashing the React bundle size  #product #nodejs #redux #webpack #react #reactjs

  • So whenever in production node’s server Js was hit Webpack built the React’s bundle Js.
  • Another problem was that if due to any reason our website crashed, then again webpack started building the React’s bundle file which took a lot of time as a result it was affecting the overall uptime of the website.So to solve this first of all I separated the build process of webpack from server.js and created a build.js file which generates the bundle.js separately in a “dist” folder.
  • This bundle.js from “dist” folder was used while production deployment so even if due to any reason websites crashes, there will be no more downtime due to webpack building, instead bundle.js will be taken directly from the “dist” folder.
  • To minify the bundle.js we applied the below plugins in the webpack configuration, it minified the bundle file upto 1.5MB.
  • Then use it as below:webpack plugins with BundleAnalyzerPluginNow when we run the server we are redirected to http://127.0.0.1:8888/ which shows below result:bundle.js is comprised of node-modules and react componentsFrom the above result its evident that more than 75% of the react bundle contains node-modules.

Converting RoadToNaukri.com to React Js powered by Redux was an exciting experience. I used Webpack for our build process. Our server side is in Node Js and as a novice at the beginning I…
Continue reading “Slashing the React bundle size – RoadToNaukri Stories about product and technology”

Simple React Router Example – Dan Buda – Medium

Simple React Router Example  #router #reactjs #react #reactjs

  • One of the things I love about React is how easy it is to make components and bring them all together.We’ll need to import a few things from React React Router Router to be able to make it all work.
  • And in our Link tags, we’ve included a to= and a path name that will be used in our Router code.So now for the Router:We use ReactDOM.render to tell our app how the navigation all fits together.
  • First, we want to use browserHistory in the main Router tag, and give our Router a starting point:So our App component, which will house our other components, is set up as the parent route that will use the path of just “/”.
  • Now we can add our Home component using IndexRoute to tell our Router that Home should load first upon getting to the site.The Home component/route is set up inside the App route because we want to set it as a child of App.
  • And now we can add our 2 link pages to the router:They are also added as children of the App component.

Just the basics of using React Router (version 2.8.1 — v4 just came out and I’ll monkey with that soon). So you can use React Router to handle all of your navigation, and once getting used to it, it…
Continue reading “Simple React Router Example – Dan Buda – Medium”