React Ecosystem — A summary
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.
The best way to get started is this repo .
Note to Sublime users: Use it together with the babel-sublime package .
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 .
2) Consider a Routing Solution
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.
- 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 .
Keep react-router and redux in sync — react-router-redux
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 andthis post should help you get started.
5) Consider Server side rendering
(aka Universal (before aka Isomorphic) apps)
6) Consider some tests
There are some utilities (besides all major test runners and assertion libraries out there):
- ReactTestUtils — an add-on of React.
- 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
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:
- 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 ontwitter, they will keep you cover.
Originally published at staminaloops.github.io .