React and Redux Single Page Applications Resources

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

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:

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.

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.

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.

Testing

To test React components we use Mocha, Chai and React’s shallow rendering.

And a couple of libraries to make work with shallow rendering easier:

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.

***

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

P. S. Check out my latest open source project: React Styleguidist, a component style guide generator with a hot reload dev server.