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.
Thanks to Babel we can write in ES6 (official name is ECMAScript 2015).
- Learn ES2015.
- An intro to using npm and ES6 modules for front end development by Wes Bos.
- 📖 Understanding ECMAScript 6 by Nicholas C. Zakas.
- 📖 Exploring ES6 by Dr. Axel Rauschmayer.
Our view layer is React.
- React tutorial.
- Thinking in React.
- ReactJS for stupid people by Andrew Ray.
- Smart and dumb components by Dan Abramov.
- React tips and best practices by Alexander Early.
- Removing user interface complexity, or why React is awesome by James Long.
- 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.
- 📺 Live React: Hot Reloading with Time Travel by Dan Abramov, ReactEurope 2015.
- Redux documentation.
Redux was inspired by the original Facebook’s Flux architecture:
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.js way: Flux architecture with Immutable.js by Péter Márton.
- 📺 Immutable data and React by Lee Byron, React.js Conf 2015.
- 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 front-end code.
- A cookbook for using Webpack with React JS by Christian Alfoni and Juho Vepsäläinen.
- 📖 SurviveJS: Webpack by Juho Vepsäläinen.
- Approaches to testing React components — an overview by Marcin Grzywaczewski.
And a couple of libraries to make work with shallow rendering easier:
- react-shallow-testutils, replacement for TestUtils when using React’s shallow rendering.
- expect-react-shallow, JSX assertions with Chai-like API.
Other Useful Libraries
Unfortunately, I haven’t found any good articles about these libraries.
- React Router, client-side routing.
- redux-simple-router, simple bindings to keep React Router and Redux in sync.
- React Intl, internationalization for React.
- Reselect, memoized and composable selectors for Redux.
These tools are as useful as all the articles mentioned above.
- 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.
P. S. Check out my latest open source project: React Styleguidist, a component style guide generator with a hot reload dev server.