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 front-end tooling.

ECMAScript 6

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

Consider using TypeScript.

React

Our view layer is React.

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.

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

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.

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.

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 front-end code. To simplify webpack configuration and share it between projects we use webpack-blocks.

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).

Other Useful Libraries

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

Developer Tools

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

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.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.