React provides powerful abstractions that free you from touching the DOM directly in most cases, but sometimes you simply need to access the underlying API, perhaps to work with a third-party library or existing code. The Virtual DOM React is very fast because it never talks to the DOM directly. React maintains a fast in-memory representation of the DOM. render() methods actually return a description of the DOM, and React can compare this description with the in-memory representation to compu

React is a JavaScript library for creating user interfaces by Facebook and Instagram. Many people choose to think of React as the V in MVC. We built React to solve one problem: building large applications with data that changes over time. Simple Simply express how your app should look at any given point in time, and React will automatically manage all UI updates when your underlying data changes. Declarative When the data changes, React conceptually hits the "refresh" button, and knows to o

Trying to compare and contrast React with WebComponents inevitably results in specious conclusions, because the two libraries are built to solve different problems. WebComponents provide strong encapsulation for reusable components, while React provides a declarative library that keeps the DOM in sync with your data. The two goals are complementary; engineers can mix-and-match the technologies. As a developer, you are free to use React in your WebComponents, or to use WebComponents in React, or

Specifying the value prop on a controlled component prevents the user from changing the input unless you desire so. You might have run into a problem where value is specified, but the input can still be changed without consent. In this case, you might have accidentally set value to undefined or null. The snippet below shows this phenomenon; after a second, the text becomes editable. ReactDOM.render(<input value="hi" />, mountNode); setTimeout(function() { ReactDOM.render(<input valu

You don't have to go full React. The component lifecycle events, especially componentDidMount and componentDidUpdate, are good places to put your other libraries' logic. var App = React.createClass({ getInitialState: function() { return {myModel: new myBackboneModel({items: [1, 2, 3]})}; }, componentDidMount: function() { $(this.refs.placeholder).append($('<span />')); }, componentWillUnmount: function() { // Clean up work here. }, shouldComponentUpdate: funct

Usually, a component's children (this.props.children) is an array of components: var GenericWrapper = React.createClass({ componentDidMount: function() { console.log(Array.isArray(this.props.children)); // => true }, render: function() { return <div />; } }); ReactDOM.render( <GenericWrapper><span/><span/><span/></GenericWrapper>, mountNode ); However, when there is only a single child, this.props.children will be the single child co

ReactLink is an easy way to express two-way binding with React. ReactLink is deprecated as of React v15. The recommendation is to explicitly set the value and change handler, instead of using ReactLink. In React, data flows one way: from owner to child. This is because data only flows one direction in the Von Neumann model of computing. You can think of it as "one-way data binding." However, there are lots of applications that require you to read some data and flow it back into your program.

We'll be building a simple but realistic comments box that you can drop into a blog, a basic version of the realtime comments offered by Disqus, LiveFyre or Facebook comments. We'll provide: A view of all of the comments A form to submit a comment Hooks for you to provide a custom backend It'll also have a few neat features: Optimistic commenting: comments appear in the list before they're saved on the server so it feels fast. Live updates: other users' comments are popped into the comment

It's a common pattern in React to wrap a component in an abstraction. The outer component exposes a simple property to do something that might have more complex implementation details. You can use JSX spread attributes to merge the old props with additional values: <Component {...this.props} more="values" /> If you don't use JSX, you can use any object helper such as ES6 Object.assign or Underscore _.extend: React.createElement(Component, Object.assign({}, this.props, { more: 'values' })

We've tried to make React as environment-agnostic as possible. People use React in a variety of languages (JavaScript, TypeScript, ClojureScript, etc) and in a variety of environments (web, iOS, Android, NodeJS, Nashorn, etc). There are many tools to help you build great applications. In these sections we introduce some of the tools that are most commonly used together with React. Language Tooling describes how to set up tools like Babel to transpile JSX for a better development experience. P