React single page applications resources

October 2017: added more links and possible alternatives.

Here is a list of the best articles, books and talks about the libraries and tools we use at the Here product tools team.

You can start from a very good introduction to modern frontend tooling.

ECMAScript 6

Thanks to Babel we can write in ES6 (official name is ECMAScript 2015).

• Learn ES6.
• An intro to using npm and ES6 modules for frontend development by Wes Bos.
• 📖 Understanding ECMAScript 6 by Nicholas C. Zakas.
• 📖 Exploring ES6 by Dr. Axel Rauschmayer.

Consider using TypeScript.

React

Our view layer is React.

• React tutorial.
• Thinking in React.
• ReactJS for beginners by Andrew Ray.
• Presentational and container components by Dan Abramov.
• React tips and best practices by Alexander Early.
• Removing user interface complexity, or why React is awesome by James Long.
• Structuring React and Redux applications.
• React cheat sheet.
• 📖 SurviveJS: React by Juho Vepsäläinen.

Redux

Redux is an app state container. It means that we store the whole application state (data from server and UI state) in a single immutable tree.

• A cartoon intro to Redux by Lin Clark.
• Redux best practices by Will Becker.
• Single State Tree + Flux by Merrick Christensen.
• Querying a Redux store by Adam Rackis.
• 🖥 Getting started with Redux by Dan Abramov.
• 🖥 Building React Applications with Idiomatic Redux by Dan Abramov.
• 📺 Live React: Hot Reloading with Time Travel by Dan Abramov, ReactEurope 2015.
• Redux documentation.

Redux was inspired by the original Facebook’s Flux architecture:

• Flux for beginners by Andrew Ray.
• The evolution of Flux frameworks by Dan Abramov.

After using Redux for a while, I feel that it’s too low level and requires you to write a lot of code. Consider using MobX.

Immutable.js

Redux requires that all the data in the store should be immutable. Immutable.js makes work with immutable data structures easier and (potentially) faster.

• The React way: Flux architecture with Immutable.js by Péter Márton.
• Immutable data structures and JavaScript by James Long.
• 📺 Immutable data and React by Lee Byron, React Conf 2015.

After using Immutable for a while, I feel that it makes more problems than it solves. Consider using seamless-immutable.

CSS Modules

CSS modules are like BEM but they provide real class names uniqueness. And you don’t need to write long class names manually. We use CSS modules with Sass and Autoprefixer.

• CSS Modules: welcome to the future by Glen Maddern.
• 📺 Interoperable CSS by Glen Maddern, CSSconf EU 2015.

Consider using CSS in JS library, like JSS or Styled Components.

Webpack

Webpack allows us to use ES6/JSX syntax (including ES6 modules), import modules from npm and use hot reloading to debug frontend code. To simplify webpack configuration and share it between projects we use webpack-blocks.

• 📖 SurviveJS: webpack by Juho Vepsäläinen.

Consider using Create React App to bootstrap your app.

Testing

To test React components we use Jest (a test runner) and Enzyme (a testing utility for React).

• Approaches to testing React components — an overview by Marcin Grzywaczewski.
• Testing React components with Jest and Enzyme.
• Jest Cheat Sheet.

Other useful libraries

Unfortunately, I haven’t found any good articles about these libraries.

• React Router, client-side routing.
• React Intl, internationalization for React.
• Reselect, memoized and composable selectors for Redux.
• React components I recommend

Developer tools

These tools are as useful as all the resources mentioned above.

• React Styleguidist, isolated component development environment and a living style guide.
• React hot loader (now React Transform).
• Redux DevTools.
• React plugin for ESLint, React specific linting rules.
• React Developer Tools for Chrome and Firefox.

We also use lint-staged and husky to run linters on precommit hook.

---

Let me know if I’ve missed something, I highly appreciate any additions to this list.