Two-Way Binding Helpers

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.

Multiple Components

So far, we've looked at how to write a single component to display data and handle user input. Next let's examine one of React's finest features: composability. Motivation: Separation of Concerns By building modular components that reuse other components with well-defined interfaces, you get much of the same benefits that you get by using functions or classes. Specifically you can separate the different concerns of your app however you please simply by building new components. By building a c

Reusable Components

When designing interfaces, break down the common design elements (buttons, form fields, layout components, etc.) into reusable components with well-defined interfaces. That way, the next time you need to build some UI, you can write much less code. This means faster development time, fewer bugs, and fewer bytes down the wire. Prop Validation As your app grows it's helpful to ensure that your components are used correctly. We do this by allowing you to specify propTypes. React.PropTypes export

Tutorial

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

React.isValidElement

React.isValidElement boolean isValidElement(* object) Verifies the object is a ReactElement.

Immutability Helpers

React lets you use whatever style of data management you want, including mutation. However, if you can use immutable data in performance-critical parts of your application it's easy to implement a fast shouldComponentUpdate() method to significantly speed up your app. Dealing with immutable data in JavaScript is more difficult than in languages designed for it, like Clojure. However, we've provided a simple immutability helper, update(), that makes dealing with this type of data much easier, wi

Transferring Props

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' })

React.Children.map

React React is the entry point to the React library. If you're using one of the prebuilt packages it's available as a global; if you're using CommonJS modules you can require() it. React.Component class Component This is the base class for React Components when they're defined using ES6 classes. See Reusable Components for how to use ES6 classes with React. For what methods are actually provided by the base class, see the Component API. React.createClass ReactClass createClass(object spe

propTypes

propTypes object propTypes The propTypes object allows you to validate props being passed to your components. For more information about propTypes, see Reusable Components.

componentWillMount

Mounting: componentWillMount void componentWillMount() Invoked once, both on the client and server, immediately before the initial rendering occurs. If you call setState within this method, render() will see the updated state and will be executed only once despite the state change.