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

If you know all the properties that you want to place on a component ahead of time, it is easy to use JSX: var component = <Component foo={x} bar={y} />; Mutating Props is Bad If you don't know which properties you want to set, you might be tempted to add them onto the object later: var component = <Component />; component.props.foo = x; // bad component.props.bar = y; // also bad This is an anti-pattern because it means that we can't help you check the right propTypes u

You don't have to go full React. The component lifecycle events, especially componentDidMount and componentDidUpdate, are good places to put your other libraries' logic. var App = React.createClass({ getInitialState: function() { return {myModel: new myBackboneModel({items: [1, 2, 3]})}; }, componentDidMount: function() { $(this.refs.placeholder).append($('<span />')); }, componentWillUnmount: function() { // Clean up work here. }, shouldComponentUpdate: funct

JSX is a JavaScript syntax extension that looks similar to XML. You can use a simple JSX syntactic transform with React. Why JSX? You don't have to use JSX with React. You can just use plain JS. However, we recommend using JSX because it is a concise and familiar syntax for defining tree structures with attributes. It's more familiar for casual developers such as designers. XML has the benefit of balanced opening and closing tags. This helps make large trees easier to read than function calls

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

You've already learned how to display data with React. Now let's look at how to make our UIs interactive. A Simple Example var LikeButton = React.createClass({ getInitialState: function() { return {liked: false}; }, handleClick: function(event) { this.setState({liked: !this.state.liked}); }, render: function() { var text = this.state.liked ? 'like' : 'haven\'t liked'; return ( <p onClick={this.handleClick}> You {text} this. Click to toggle.

Note: cloneWithProps is deprecated. Use React.cloneElement instead. In rare situations, you may want to create a copy of a React element with different props from those of the original element. One example is cloning the elements passed into this.props.children and rendering them with different props: var cloneWithProps = require('react-addons-clone-with-props'); var _makeBlue = function(element) { return cloneWithProps(element, {style: {color: 'blue'}}); }; var Blue = React.createClass({

by Pete Hunt React is, in my opinion, the premier way to build big, fast Web apps with JavaScript. It has scaled very well for us at Facebook and Instagram. One of the many great parts of React is how it makes you think about apps as you build them. In this post, I'll walk you through the thought process of building a searchable product data table using React. Start with a mock Imagine that we already have a JSON API and a mock from our designer. Our designer apparently isn't very good becaus

Unmounting: componentWillUnmount void componentWillUnmount() Invoked immediately before a component is unmounted from the DOM. Perform any necessary cleanup in this method, such as invalidating timers or cleaning up any DOM elements that were created in componentDidMount.

ReactDOMServer.renderToString string renderToString(ReactElement element) Render a ReactElement to its initial HTML. This should only be used on the server. React will return an HTML string. You can use this method to generate HTML on the server and send the markup down on the initial request for faster page loads and to allow search engines to crawl your pages for SEO purposes. If you call ReactDOM.render() on a node that already has this server-rendered markup, React will preserve it and on