Why React.js is Changing Frontend Development in 2016

In 2016 the frontend JavaScript landscape is chaotic — Angular 1, Ember, Backbone, Knockout all compete for attention. But one library is pulling ahead: React. Open-sourced by Facebook in 2013 and battle-tested on Facebook.com and Instagram, React 0.14 brought a component model that is simultaneously simple to learn and powerful enough to build complex UIs.

The Virtual DOM

React’s killer feature is the Virtual DOM: a lightweight JavaScript representation of the real DOM. When state changes, React re-renders the virtual DOM, diffs it against the previous version, and applies only the minimal set of actual DOM mutations. This makes updates fast without developers having to micro-manage DOM manipulation.

Components and JSX

Everything in React is a component — a function or class that accepts props and returns a description of what to render:

// Functional component (React 0.14+)
function Greeting(props) {
    return <h1>Hello, {props.name}!</h1>;
}

// Usage
ReactDOM.render(
    <Greeting name="World" />,
    document.getElementById('root')
);

JSX looks like HTML inside JavaScript. Babel transpiles it to React.createElement() calls at build time.

One-Way Data Flow

React enforces a unidirectional data model: data flows down through props, events bubble up through callbacks. This makes dataflow predictable and debugging straightforward — you always know where state lives and how it changes.

State Management with Redux

For applications with complex, shared state, Redux (released 2015) pairs perfectly with React. Actions describe what happened, reducers specify how state changes, and a single store holds the entire application state tree. Redux DevTools lets you replay and inspect every state transition.

React vs Angular 1

Angular 1 is a full framework with two-way binding, directives, services, and its own HTTP client. React is a view library — it does one thing brilliantly and lets you compose the rest. Teams coming from Angular often find React’s mental model cleaner once they accept that they need to make more architectural decisions themselves.

Getting Started

Install create-react-app (released July 2016) for a zero-config development environment:

npm install -g create-react-app
create-react-app my-app
cd my-app && npm start

React’s community is growing faster than any other frontend library in 2016. Learning it now puts you ahead of the curve.