Mounting: componentWillMount void componentWillMount() Invoked once, both on the client and server, immediately before the initial rendering occurs. If you call setState within this method, render() will see the updated state and will be executed only once despite the state change.

React has implemented a browser-independent events and DOM system for performance and cross-browser compatibility reasons. We took the opportunity to clean up a few rough edges in browser DOM implementations. All DOM properties and attributes (including event handlers) should be camelCased to be consistent with standard JavaScript style. We intentionally break with the spec here since the spec is inconsistent. However, data-* and aria-* attributes conform to the specs and should be lower-cased

render ReactElement render() The render() method is required. When called, it should examine this.props and this.state and return a single child element. This child element can be either a virtual representation of a native DOM component (such as <div /> or React.DOM.div()) or another composite component that you've defined yourself. You can also return null or false to indicate that you don't want anything rendered. Behind the scenes, React renders a <noscript> tag to work with o

Here's how false renders in different situations: Renders as id="false": ReactDOM.render(<div id={false} />, mountNode); String "false" as input value: ReactDOM.render(<input value={false} />, mountNode); No child: ReactDOM.render(<div>{false}</div>, mountNode); The reason why this one doesn't render as the string "false" as a div child is to allow the more common use-case: <div>{x > 1 && 'You have more than one item'}</div>.

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

There's another (uncommon) way of communicating between components: simply expose a method on the child component for the parent to call. Say a list of todos, which upon clicking get removed. If there's only one unfinished todo left, animate it: var Todo = React.createClass({ render: function() { return <div onClick={this.props.onClick}>{this.props.title}</div>; }, //this component will be accessed by the parent through the `ref` attribute animate: function() { cons

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

Improper use of the innerHTML can open you up to a cross-site scripting (XSS) attack. Sanitizing user input for display is notoriously error-prone, and failure to properly sanitize is one of the leading causes of web vulnerabilities on the internet. Our design philosophy is that it should be “easy” to make things safe, and developers should explicitly state their intent when performing “unsafe” operations. The prop name dangerouslySetInnerHTML is intentionally chosen to be frightening, and the

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

This entry shows how to attach DOM events not provided by React (check here for more info). This is good for integrations with other libraries such as jQuery. Try to resize the window: var Box = React.createClass({ getInitialState: function() { return {windowWidth: window.innerWidth}; }, handleResize: function(e) { this.setState({windowWidth: window.innerWidth}); }, componentDidMount: function() { window.addEventListener('resize', this.handleResize); }, component