Test Utilities

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

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

Server-side Environments

One of the great things about React is that it doesn't require the DOM as a dependency, which means it is possible to render a React application on the server and send the HTML markup down to the client. There are a few things that React expects, so this guide will help you get started in your preferred environment. Node.js Node.js is a popular JavaScript runtime that comes with an extensive core library and support for installing packages from npm to expand on the basic functionality. As we'

replaceProps

replaceProps void replaceProps( object nextProps, [function callback] ) Like setProps() but deletes any pre-existing props instead of merging the two objects. This method is deprecated and will be removed soon. This method is not available on ES6 class components that extend React.Component. Instead of calling replaceProps, try invoking ReactDOM.render() again with the new props. For additional notes, see our blog post about using the Top Level API

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.

Add-ons

The React add-ons are a collection of useful utility modules for building React apps. These should be considered experimental and tend to change more often than the core. TransitionGroup and CSSTransitionGroup, for dealing with animations and transitions that are usually not simple to implement, such as before a component's removal. LinkedStateMixin, to simplify the coordination between user's form input data and the component's state. cloneWithProps, to make shallow copies of React componen

React.DOM

React.DOM React.DOM provides convenience wrappers around React.createElement for DOM components. These should only be used when not using JSX. For example, React.DOM.div(null, 'Hello World!')

React.Children.count

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

JSX Gotchas

JSX looks like HTML but there are some important differences you may run into. For DOM differences, such as the inline style attribute, check here. HTML Entities You can insert HTML entities within literal text in JSX: <div>First &middot; Second</div> If you want to display an HTML entity within dynamic content, you will run into double escaping issues as React escapes all the strings you are displaying in order to prevent a wide range of XSS attacks by default. // Bad: It

setProps

setProps void setProps( object nextProps, [function callback] ) When you're integrating with an external JavaScript application you may want to signal a change to a React component rendered with ReactDOM.render(). Calling setProps() on a root-level component will change its properties and trigger a re-render. In addition, you can supply an optional callback function that is executed once setProps is completed and the component is re-rendered. This method is deprecated and will be remove