forceUpdate void forceUpdate( [function callback] ) By default, when your component's state or props change, your component will re-render. However, if these change implicitly (eg: data deep within an object changes without changing the object itself) or if your render() method depends on some other data, you can tell React that it needs to re-run render() by calling forceUpdate(). Calling forceUpdate() will cause render() to be called on the component, skipping shouldComponentUpdate(). Thi

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

When specifying a pixel value for your inline style prop, React automatically appends the string "px" for you after your number value, so this works: var divStyle = {height: 10}; // rendered as "height:10px" ReactDOM.render(<div style={divStyle}>Hello World!</div>, mountNode); See Inline Styles for more info. Sometimes you do want to keep the CSS properties unitless. Here's a list of properties that won't get the automatic "px" suffix: animationIterationCount boxFlex boxFlexGroup b

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

React.DOM React.DOM provides convenience wrappers around React.createElement for DOM components. These should only be used when not using JSX. For example, React.DOM.div(null, 'Hello World!')

Specifying the value prop on a controlled component prevents the user from changing the input unless you desire so. You might have run into a problem where value is specified, but the input can still be changed without consent. In this case, you might have accidentally set value to undefined or null. The snippet below shows this phenomenon; after a second, the text becomes editable. ReactDOM.render(<input value="hi" />, mountNode); setTimeout(function() { ReactDOM.render(<input valu

ReactDOM.findDOMNode DOMElement findDOMNode(ReactComponent component) 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. In most cases, you can attach a ref to the DOM node and avoid using findDOMNode at all. When render returns null or false, findDOMNode returns null. findDOMNode() is an escape hatch used to access the

SyntheticEvent Your event handlers will be passed instances of SyntheticEvent, a cross-browser wrapper around the browser's native event. It has the same interface as the browser's native event, including stopPropagation() and preventDefault(), except the events work identically across all browsers. If you find that you need the underlying browser event for some reason, simply use the nativeEvent attribute to get it. Every SyntheticEvent object has the following attributes: boolean bubbles bo

statics object statics The statics object allows you to define static methods that can be called on the component class. For example: var MyComponent = React.createClass({ statics: { customMethod: function(foo) { return foo === 'bar'; } }, render: function() { } }); MyComponent.customMethod('bar'); // true Methods defined within this block are static, meaning that you can run them before any component instances are created, and the methods do not have access to the pr

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