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.
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.
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 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:
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.
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 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: welcome to the future by Glen Maddern.
- 📺 Interoperable CSS by Glen Maddern, CSSconf EU 2015.
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.
- 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
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.
Let me know if I’ve missed something, I highly appreciate any additions to this list.