In this article, we will build a test-driven example “Todo Application” using React, Redux, and Immutable.js.

You can find the full source code for this application here and a live version here.

The React Way

React components turn data into DOM elements every time the data changes, in a performant way. So you don’t have to worry about syncing your data with the DOM.

In contrast to MVC, React is better used with the Flux architecture. Redux is a functional approach to Flux. The application state is only mutated by the “Store” in response to “Actions”, and turned into the DOM by the React components that are the “View”. This way of thinking makes it easy to reason about and test your code, and opens up new possibilities, like “hot-reloading” and “time-travel”.

Setting up a React Project

webpack is the new generation module bundler that replaces all the front-end building tools such as Grunt or Gulp. In this tutorial we will use the ES6 syntax. webpack will do all the dirty work, transforming ES6 and JSX code into ES5, serving our code with source maps, watching for changes and enabling hot-reloading. We won’t focus on webpack configuration’s details and jump right into coding using a seed project boilerplate. As you develop your project, you can learn along the way how webpack works.

Continue reading %How to Build a Todo App Using React, Redux, and Immutable.js%

Source: SitePoint