A Comprehensive Guide to Test-First Development with Redux, React, and Immutable
Update 2016-02-24: Updated
react-router to 2.0.0. In tests, replaced use of deprecated
ReactDOM.render(). Also now using the
react-addons-test-utils package so that no imports of
'react/addons' are needed anywhere.
Update 2015-11-06: Updated to the new Babel 6 release. The Babel packages we need to install are now a bit different, and an additional
"babel" section is needed in the
package.json in both projects.
Update 2015-10-09: Updated to React 0.14, React Router 1.0.0 RC3, and jsdom 6.x. The changes include:
- Installing and using React and ReactDOM separately.
- Using the PureRenderMixin from a separate NPM package.
- Changing the way the routes are set up in
- Changing the way the current route's contents are populated into
- Removing the
getDOMNode()calls in unit tests, as the test helpers now directly return the DOM nodes.
Update 2015-09-19: Clarified which version of the React Router is used. Various other small fixes and improvements. Thanks to Jesus Rodriguez and everyone who has been suggesting fixed in the comments!
Redux is a very small library and learning all of its APIs is not very difficult. But for many people, it creates a paradigm shift: The tiny amount of building blocks and the self-imposed limitations of pure functions and immutable data may make one feel constrained. How exactly do you get things done?
This tutorial will guide you through building a full-stack Redux and Immutable-js application from scratch. We'll go through all the steps of constructing a Node+Redux backend and a React+Redux frontend for a real-world application, using test-first development. In our toolbox will also be ES6, Babel, Socket.io, Webpack, and Mocha. It's an intriguing stack, and you'll be up to speed with it in no time!