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

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

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.

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

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.

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

In React, inline styles are not specified as a string. Instead they are specified with an object whose key is the camelCased version of the style name, and whose value is the style's value, usually a string (more on that later): var divStyle = { color: 'white', backgroundImage: 'url(' + imgUrl + ')', WebkitTransition: 'all', // note the capital 'W' here msTransition: 'all' // 'ms' is the only lowercase vendor prefix }; ReactDOM.render(<div style={divStyle}>Hello World!</div>

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>

getInitialState object getInitialState() Invoked once before the component is mounted. The return value will be used as the initial value of this.state.

getDefaultProps object getDefaultProps() Invoked once and cached when the class is created. Values in the mapping will be set on this.props if that prop is not specified by the parent component (i.e. using an in check). This method is invoked before any instances are created and thus cannot rely on this.props. In addition, be aware that any complex objects returned by getDefaultProps() will be shared across instances, not copied.