immutable React

React is a component based JavaScript framework that provides a one-way reactive data binding. This is achieved via a virtual DOM implementation that React reconciles with the real DOM when updates are necessary. A great React tutorial can be found here. I am just going to provide the TL;DR here in order to understand our demo app.

Components

React components can be written in either plain JavaScript or in a format that the React team calls JSX. JSX is a mixture of JavaScript and markup. Anyone who dealt with technologies that allow you to mix markup with logic would tell you that these solutions are powerful but often dangerous and care should be given to maintain encapsulation. Why the tradeoff then? Turns out, logic, when combined with markup, can define complex UI components very well which components are isolated but at the same time, can be easily woven together.

Lifecycle

Each component is hooked into React's event system and lifecycle. You can execute functions before/when/and after a component is rendered.

state

A component's mutable state is maintained by its state (which is private to each component). state is also highly reactive: every single time you call this.setState() the component re-renders itself and while doing so, the underlying UI component(s) can take advantage of the freshly set state. All this magic is handled by the virtual DOM that React maintains.

props

Parent-children components can communicate via props. props, unlike state, are completely immutable (i.e. you would get a runtime Error if you tried to modify them). But would not be nice to treat state as immutable too? That's where immutable comes into the picture!

immutable

immutable is a javascript library that implements persistent data structures in JavaScript (if you are curious, I added a few missing methods in this branch). The benefit of using immutable data structures is well documented online. I would just mention three main properties: better data consistency, improved code quality and easier concurrent programming. Now let's get to the actual demo!

Wikipedia autocomplete demo using ReactJS and immutable together

(you can find the whole demo project on github here)

Conclusion

React provides a brand new programming model to build complex web based UI components. Its truly reactive design makes DOM updates finally sane and when combined with persistent data structures one can experience JavaScript development like it was never done before.