React Ecosystem - A summary

TOC

Things move fast. It's web development! Here are some useful links and a summary of the so called React Ecosystem.

Note that to use React.js you don’t need to use all the ecosystem, which many times, it’s what makes difficult to begin. But if you want to build a real app, you should:

1) Consider some development tools:

• Transpile jsx (and ES6) to ES5 - Babel
• Bundle all your components and modules to be served on the client - Browserify or Webpack (I choose Webpack).
• Have a development server with live-reload and hot-reload - Webpack can do this, and babel-transform can maintain the state of your app even if your code changes.
• Have a linting tool that supports ES6 and JSX.
• The browser extension from Facebook React Dev Tools is great.

Babel

Babel is a JavaScript compiler that has support for the latest version of JavaScript through syntax transformers. It supports JSX with the React preset.

The best way to get started is this repo.

Note to Sublime users: Use it together with the babel-sublime package.

Transforms

The babel-plugin-react-transform wraps React components with arbitrary transforms. In other words, it allows you to instrument React components. Examples:

• react-transform-hmr - enables hot reloading using HMR API
• react-transform-catch-errors - catches errors inside render()
• react-transform-debug-inspector - renders an inline prop inspector
• react-transform-render-visualizer - highlight components when updated

For a reference implementation, see react-transform-boilerplate.

Webpack

Webpack is a module bundler. This means webpack takes modules with dependencies and emits static assets representing those modules.

• It often replaces grunt or gulp because it can build and bundle CSS, preprocessed CSS, compile-to-JS languages and images, among other things.
• You can (and should) use npm modules and your own modules on the client
  
• You can use loaders (babel-loader to transpile jsx and ES6 to ES5, css loaders to allow you to import css files…)

The best way to get started is this great repo of Pete Hunt Webpack how to or this new repo.

ESlint

ESlint is a pluggable linting utility for JavaScript and JSX.

You can use some common configurations out of the box with eslint-config-standard-react or eslint-config-airbnb or do your own configuration.

2) Consider a Routing Solution

React-Router

I like React-Router. It keeps your UI in sync with the URL. It has a simple API with powerful features like lazy code loading, dynamic route matching, and location transition handling built right in. Make the URL your first thought, not an after-thought.

The best way to get started is here.

3) Consider a State manager

There are many Flux implementations - an application architecture that Facebook uses for building client-side web applications -, but the one I like most is Redux.

Some people like to use immutable collections for JavaScript like immutable.js to maintain the state immutable, but is not a requirement (as long as you don’t mutate the state).

Redux

Redux is a predictable state container for JavaScript apps.

• The state of your app is stored in an object tree inside a single store.
  
• The only way to change the state tree is to emit an action, an object describing what happened.
  
• To specify how the actions transform the state tree, you write pure reducers.

The best way to start is watching the Dan Abramov’s Redux course videos alongside the official documentation. You have the notes (and partial transcription) of the videos here.

react-router-redux

Keep react-router and redux in sync - react-router-redux

Redux DevTools

I also suggest you to use this great and fun Redux DevTools browser extension. You development workflow will never be the same :)

4) Choose your client-server interaction

In today’s world there are two dominant architectural styles for client-server interaction: REST and ad hoc endpoints, don’t forgetting Websockets.

But if you feel adventurous you can try GraphQL - a data query language and runtime -, together with Relay - a JS framework for building data-driven React applications, both from Facebook. This tutorial and this post should help you get started.

5) Consider Server side rendering

(aka Universal (before aka Isomorphic) apps)

Universal JavaScript means the same code runs in different environments, in this case, on the client and on the server (thank you node.js). This can help SEO and initial loading time of your SPA and can be easily achieved with React Router SSR.

6) Consider some tests

There are some utilities (besides all major test runners and assertion libraries out there):

• ReactTestUtils - an add-on of React.
• Enzyme - a JavaScript Testing utility for React that makes it easier to assert, manipulate, and traverse your React Components’ output - from Airbnb.
• mjackson/expect and expect-jsx that lets you write better assertions.
• deep-freeze to recursively Object.freeze() on objects and functions and test immutability.

7) Don’t re-invent the wheel

• A collection of awesome things regarding React ecosystem

Here are some of the great examples, tutorials and starter kits:

• React Redux Universal Hot Example
• Isomorphic Redux demo, with routing and async actions
• survive.js - Redux version here
• Find your Perfect Starter Kit here

If you are looking for some external components and libraries to use on your project:

• https://react.rocks/
• Follow ReactJSnpm that publishes tweets when #ReactJS related libraries are updated on NPM

8) Breathe. It’s web development

Yes, It’s web development. Things move fast. You don’t need to master everything and there will always be that brand new technology that the cool kids will gonna want to use. Use what you need, and what makes sense to your project. If you want, start with the basics, and as your project grows, if you feel that something is start missing, opt-in for that tools. Refactoring is easy as long as you do it in a regular basis and structure your code well.

Meanwhile, follow some guys on twitter, they will keep you cover.

Happy coding.

15 Feb 2016 #reactjs #javascript #frontend

Share Tweet

About staminaloops