React Advice.md

Notes from experienced React developers at Khan Academy and Symphono

Configuring the tooling for React is the biggest hurdle.

create react app is the easiest entry point to getting the tooling correct for a react app. You can eject later if you want advanced configuration.

npm install -g create-react-app

create-react-app my-app
cd my-app
#Redux is an additional concept, and so a hurdle, but you will really want it for anything non-trivial
npm install --save redux
npm install --save react-redux

#Redux thunk will be the simplest way to deal with asynchronous (AJAX) and we want that for save
npm install --save redux-thunk

# window.fetch polyfill : The global fetch function is an easier way to make web requests and handle responses than using an XMLHttpRequest. 
npm install whatwg-fetch --save

#Optional: Support for colocating your styles with your JavaScript component. Use whatever is familiar initially. Stick with Sass, bootstrap, whatever until you feel ready
npm install --save aphrodite

#Optional:Use what you know. Keep using Zurb Foundation if you already are
#npm install react-foundation --save
#npm install foundation-site --save

#Optional: Use what you know. Keep using Twitter bootstrap if you already are
#npm install react-bootstrap --save
#npm install bootstrap --save

Other tips:

• Do not install react router or immutable js initially for any project, as you can add them later if it gets complicated enough to warrant it.
• Read : https://medium.com/@dan_abramov/two-weird-tricks-that-fix-react-7cf9bbdef375#.gm3rqa1v0
  • TL;DR version: Don't render to the body, and don't install multiple react versions at the same time
• ALSO: Differentiate between stateful (“containers”) and stateless (“components”) components.

Containers manage data or are connected to the state and generally don’t have styling associated with them. On the other hand, components have styling associated with them and aren’t responsible for any data or state management. Basically, containers are responsible for how things work, and components are responsible for how things look.

Splitting our components like this enables us to cleanly separate reusable components and intermediary layers of data management. As a result, you can confidently go in and edit your components without worrying about your data structures getting messed up, and you can edit your containers without worrying about the styling getting messed up. Reasoning through and working with your application become much easier that way, the clarity being greatly improved!

In production, we'll use npm run build to create our static bundle. We can then throw that bundle anywhere (like S3), independent of the API server. We'll explore this process in the next post.