The problem of dynamic interfaces
By 2013 web applications are increasingly dynamic: feeds updating in real time, interfaces reacting to every interaction, data changing continuously. Existing frameworks — Backbone.js, Ember.js, early versions of AngularJS — handle DOM updates through two-way bindings or manual manipulation. As complexity grows, tracking which parts of the interface need updating when data changes becomes a constant source of bugs and performance issues.
Jordan Walke, an engineer at Facebook, tackles the problem with a radically different approach: instead of surgically updating the DOM, redraw the entire interface on every state change and let the library compute the differences.
Virtual DOM and declarative rendering
React introduces the concept of a Virtual DOM: an in-memory representation of the interface structure, lightweight and fast to manipulate. When a component’s state changes, React rebuilds the Virtual DOM, compares it with the previous version through a diffing algorithm and applies only the minimum necessary changes to the real DOM.
Rendering becomes declarative: the developer describes how the interface should look for a given state, without specifying which operations to perform to transition from one state to another. React handles the transition. This eliminates an entire category of bugs related to synchronisation between data and interface.
Components and unidirectional flow
In React every part of the interface is a component: a self-contained unit that receives input data (props) and returns a description of what should be displayed. Components compose: a component can contain others, forming a hierarchical tree that mirrors the interface structure.
Data flow is unidirectional: data flows downward through props, and events flow upward through callbacks. This model makes application behaviour predictable: given a state, the interface is determined. There are no hidden update cycles, no implicit side effects.
JSX is the syntax that allows writing component structure with an HTML-like notation directly in JavaScript code. JSX is transformed into JavaScript function calls during compilation — it is not a template engine, but a syntactic extension.
A library, not a framework
React is deliberately limited to the view layer: it includes no routing, no global state management, no HTTP calls and none of the other features that full frameworks provide. This design choice allows integrating React into existing applications incrementally and choosing complementary tools freely. For teams building complex, dynamic user interfaces, React offers a clear mental model and an efficient update mechanism.
Link: reactjs.org