As we know, React is a library for creating user interfaces. It renders your UI and responds to events aka: the V in MVC. Because it is not as opinionated as many of other front-end JavaScript libraries, it plays nicely with your stack, whatever it maybe, Ruby, Java, Node.js or .NET.
Why React?
React combines DOM generation and display logic. It is designed to re-render the whole app on every update via state, and its implementation consists of Virtual DOM and synthetic events. These best practices make React a powerful tool for developing your web applications.
Build Components, Not Templates
Templates encourage a poor separation of concerns, as templates separate technologies, not concerns.
Separation of Concerns
Reduce coupling, increase cohesion.
What is coupling and what is cohesion?
Coupling
The degree to which each program module relies on each of the other modules.
Cohesion
The degree to which elements of a module belong together.
Templates encourage a poor separation of concerns. Angular style directives are a good example of this. The View Model tightly couples template to display logic. This is mentioned in Angular docs:
However isolated scope creates a new problem: if a transcluded DOM is a child of the widget isolated scope then it will not be able to bind to anything. For this reason the transcluded scope is a child of the original scope, before the widget created an isolated scope for its local variables. This makes the transcluded and widget isolated scope siblings.
The framework cannot know how to separate your concerns for you. It should only provide powerful expressive tools for the user to do it correctly. Enter React component.
React Component
A highly cohesive building block for UIs loosely coupled with other components.
Why Components?
Instead of templates, we can use components to separate your concerns. In React these components are written in JavaScript, which is highly powerful.
Components are:
- Reusable
- Composable
- Unit testable
Make components small and only put display logic in your components.
JSX
JSX is an optional preprocessor to let you use HTML-like syntax. With JSX, it's easy for designers to contribute code.
State
Re-rendering the whole app on every update makes React stand out from other front-end libraries/frameworks.
Data changing over time can make it really difficult for the front-end developer. When data changes, React re-renders the entire component.So the React components describe your UI at any point in time, just like a server-rendered app. This means every place data is displayed is guaranteed to be up-to date.
State means:
- No magical data binding.
- No more explicit DOM operations - everything is declarative.
- No model dirty checking.
Virtual DOM
You can’t just throw out the DOM and rebuild it on each update. It’s too slow and you’ll lose form state and scroll position. So Facebook built a Virtual DOM and events system.
It is optimized for performance and memory footprint. Let's look how React use virtual DOM.
On every update to the component, React:
- Builds a new virtual DOM subtree
- Diffs it with the old one
- Computes the minimal set of DOM mutations and puts them in a queue
- And batch executes all updates
Virtual DOM is fast
Because it computes minimal DOM operations and batches reads and writes for optimal DOM performance it is usually faster than manual DOM operations at 60fps. It also implements automatic top-level event delegation (with cross-browser HTML5 events).
React & Node.js
React can run in Node.js (new in 0.4) with optimizations based on app structure
Conclusion
React also has SVG, VML and <canvas> support, and can run the whole app in a Web Worker(experimental). So think React, think components not templates, re-render, don't mutate.