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.cloneElement ReactElement cloneElement( ReactElement element, [object props], [children ...] ) Clone and return a new ReactElement using element as the starting point. The resulting element will have the original element's props with the new props merged in shallowly. New children will replace existing children. Unlike React.addons.cloneWithProps, key and ref from the original element will be preserved. There is no special behavior for merging any props (unlike cloneWithProps). Se

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>; } })

Trying to compare and contrast React with WebComponents inevitably results in specious conclusions, because the two libraries are built to solve different problems. WebComponents provide strong encapsulation for reusable components, while React provides a declarative library that keeps the DOM in sync with your data. The two goals are complementary; engineers can mix-and-match the technologies. As a developer, you are free to use React in your WebComponents, or to use WebComponents in React, or

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

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.

Mounting: componentDidMount void componentDidMount() Invoked once, only on the client (not on the server), immediately after the initial rendering occurs. At this point in the lifecycle, you can access any refs to your children (e.g., to access the underlying DOM representation). The componentDidMount() method of child components is invoked before that of parent components. If you want to integrate with other JavaScript frameworks, set timers using setTimeout or setInterval, or send AJAX requ

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

Updating: componentWillUpdate void componentWillUpdate( object nextProps, object nextState ) Invoked immediately before rendering when new props or state are being received. This method is not called for the initial render. Use this as an opportunity to perform preparation before an update occurs. You cannot use this.setState() in this method. If you need to update state in response to a prop change, use componentWillReceiveProps instead.