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 object propTypes The propTypes object allows you to validate props being passed to your components. For more information about propTypes, see Reusable Components.

Performance Tools

React is usually quite fast out of the box. However, in situations where you need to squeeze every ounce of performance out of your app, it provides a shouldComponentUpdate hook where you can add optimization hints to React's diff algorithm. In addition to giving you an overview of your app's overall performance, ReactPerf is a profiling tool that tells you exactly where you need to put these hooks. See these two articles by the Benchling Engineering Team for a in-depth introduction to performa

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

Type of the Children props

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

Displaying Data

The most basic thing you can do with a UI is display some data. React makes it easy to display data and automatically keeps the interface up-to-date when the data changes. Getting Started Let's look at a really simple example. Create a hello-react.html file with the following code: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React</title> <script src="https://fb.me/react-15.1.0.js"></script> <script s

DOM Event Listeners in a Component

This entry shows how to attach DOM events not provided by React (check here for more info). This is good for integrations with other libraries such as jQuery. Try to resize the window: var Box = React.createClass({ getInitialState: function() { return {windowWidth: window.innerWidth}; }, handleResize: function(e) { this.setState({windowWidth: window.innerWidth}); }, componentDidMount: function() { window.addEventListener('resize', this.handleResize); }, component

this.props.children undefined

You can't access the children of your component through this.props.children. this.props.children designates the children being passed onto you by the owner: var App = React.createClass({ componentDidMount: function() { // This doesn't refer to the `span`s! It refers to the children between // last line's `<App></App>`, which are undefined. console.log(this.props.children); }, render: function() { return <div><span/><span/></div>; } })

isMounted

isMounted boolean isMounted() isMounted() returns true if the component is rendered into the DOM, false otherwise. You can use this method to guard asynchronous calls to setState() or forceUpdate(). This method is not available on ES6 class components that extend React.Component. It will likely be removed entirely in a future version of React, so you might as well start migrating away from isMounted() now.

forceUpdate

forceUpdate void forceUpdate( [function callback] ) By default, when your component's state or props change, your component will re-render. However, if these change implicitly (eg: data deep within an object changes without changing the object itself) or if your render() method depends on some other data, you can tell React that it needs to re-run render() by calling forceUpdate(). Calling forceUpdate() will cause render() to be called on the component, skipping shouldComponentUpdate(). Thi