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

This isn't really a React-specific tip, as such anti-patterns often occur in code in general; in this case, React simply points them out more clearly. Using props to generate state in getInitialState often leads to duplication of "source of truth", i.e. where the real data is. This is because getInitialState is only invoked when the component is first created. Whenever possible, compute values on-the-fly to ensure that they don't get out of sync later on and cause maintenance trouble. Bad ex

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

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

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

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.

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.

Fetch data in componentDidMount. When the response arrives, store the data in state, triggering a render to update your UI. When fetching data asynchronously, use componentWillUnmount to cancel any outstanding requests before the component is unmounted. This example fetches the desired Github user's latest gist: var UserGist = React.createClass({ getInitialState: function() { return { username: '', lastGistUrl: '' }; }, componentDidMount: function() { this.serverR

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

In most cases, you can use the key prop to specify keys on the elements you're returning from render. However, this breaks down in one situation: if you have two sets of children that you need to reorder, there's no way to put a key on each set without adding a wrapper element. That is, if you have a component such as: var Swapper = React.createClass({ propTypes: { // `leftChildren` and `rightChildren` can be a string, element, array, etc. leftChildren: React.PropTypes.node, right