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

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

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.

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.

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>

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

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.

getDOMNode DOMElement getDOMNode() If this component has been mounted into the DOM, this returns the corresponding native browser DOM element. This method is useful for reading values out of the DOM, such as form field values and performing DOM measurements. When render returns null or false, this.getDOMNode() returns null. getDOMNode is deprecated and has been replaced with ReactDOM.findDOMNode(). This method is not available on ES6 class components that extend React.Component. It may be r