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.

Currently, in a component's render, you can only return one node; if you have, say, a list of divs to return, you must wrap your components within a div, span or any other component. Don't forget that JSX compiles into regular JS; returning two functions doesn't really make syntactic sense. Likewise, don't put more than one child in a ternary.

mixins array mixins The mixins array allows you to use mixins to share behavior among multiple components. For more information about mixins, see Reusable Components.

ReactTestUtils makes it easy to test React components in the testing framework of your choice (we use Jest). var ReactTestUtils = require('react-addons-test-utils'); Airbnb has released a testing utility called Enzyme, which makes it easy to assert, manipulate, and traverse your React Components' output. If you're deciding on a unit testing library, it's worth checking out: http://airbnb.io/enzyme/ Simulate Simulate.{eventName}( DOMElement element, [object eventData] ) Simulate an ev

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

CDN-hosted React We provide CDN-hosted versions of React on our download page. These pre-built files use the UMD module format. Dropping them in with a simple <script> tag will inject the React and ReactDOM globals into your environment. It should also work out-of-the-box in CommonJS and AMD environments. Using React from npm You can use React with a CommonJS module system like browserify or webpack. Use the react and react-dom npm packages. // main.js var React = require('react'); va

ES2015 with JSX In-browser JSX Transform If you like using JSX, Babel 5 provided an in-browser ES2015 and JSX transformer for development called browser.js that can be included from CDNJS. Include a <script type="text/babel"> tag to engage the JSX transformer. The in-browser JSX transformer is fairly large and results in extraneous computation client-side that can be avoided. Do not use it in production — see the next section. Productionizing: Precompiled JSX If you have npm, you

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

if-else statements don't work inside JSX. This is because JSX is just syntactic sugar for function calls and object construction. Take this basic example: // This JSX: ReactDOM.render(<div id="msg">Hello World!</div>, mountNode); // Is transformed to this JS: ReactDOM.render(React.createElement("div", {id:"msg"}, "Hello World!"), mountNode); This means that if statements don't fit in. Take this example: // This JSX: <div id={if (condition) { 'msg' }}>Hello World!</div>

React.Children React.Children provides utilities for dealing with the this.props.children opaque data structure. React.Children.map array React.Children.map(object children, function fn [, object thisArg]) Invoke fn on every immediate child contained within children with this set to thisArg. If children is a keyed fragment or array it will be traversed: fn will never be passed the container objects. If children is null or undefined returns null or undefined rather than an array. React.Chil