React Ecosystem Notes

Published by in March, 2017

Categorized in: Dev Stuff

Tags: React.js  

React is a library as opposed to a framework, but the React ecosystem is augmented with different tools to create a full fledged application. For example React does not have routing built in unlike Ember or Angular; React is less opinionated.

React is concerned with the view side of applications. Out of the box you might need:

  • Babel: a compiler and in common case JSX down to ES5 compatible components.
  • Redux: a data management tool to manage/centralize data across components as opposed to data locally stored in components with React out of the box.
  • React Router: for routing.

Why JSX?

  • No context switch from javascript file to html file
  • Linting can be done to make sure binding takes place
  • Virtual DOM allows for rapid data rendering. Not to be confused with shadow DOM.
  • Pinging in the DOM take up a lot of cycles, you might have used jQuery in older applications you could be selecting and changing huge portions of code.
  • Writing React without JSX is very verbose and there is a lot more nesting. In short it's a nightmare

Advice:

  • Learn how stateless components/functions work, and learn how to use them well. You don't always need to use state-full components and they can add a lot of overhead.
  • Get comfortable with functional javascript
  • The future of React is following Elm and is functional javascript.

References:

If you want to learn by reverse engineering then check out (and pull down)

  1. https://github.com/facebookincubator/create-react-app
  2. https://github.com/zeit/next.js/

Tutorials:

  1. https://facebook.github.io/react/tutorial/tutorial.html
  2. https://teamtreehouse.com/library/react-basics
  3. https://css-tricks.com/learning-react-router/