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

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!')

React React is the entry point to the React library. If you're using one of the prebuilt packages it's available as a global; if you're using CommonJS modules you can require() it. React.Component class Component This is the base class for React Components when they're defined using ES6 classes. See Reusable Components for how to use ES6 classes with React. For what methods are actually provided by the base class, see the Component API. React.createClass ReactClass createClass(object spe

Updating: componentDidUpdate void componentDidUpdate( object prevProps, object prevState ) Invoked immediately after the component's updates are flushed to the DOM. This method is not called for the initial render. Use this as an opportunity to operate on the DOM when the component has been updated.

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

React.Children React.Children provides utilities for dealing with the this.props.children opaque data structure. React.Children.map array React.Children.map(object children, function fn [, object thisArg]) Invoke fn on every immediate child contained within children with this set to thisArg. If children is a keyed fragment or array it will be traversed: fn will never be passed the container objects. If children is null or undefined returns null or undefined rather than an array. React.Chil

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

React.createClass ReactClass createClass(object specification) Create a component class, given a specification. A component implements a render method which returns one single child. That child may have an arbitrarily deep child structure. One thing that makes components different than standard prototypal classes is that you don't need to call new on them. They are convenience wrappers that construct backing instances (via new) for you. For more information about the specification object, see

For parent-child communication, simply pass props. For child-parent communication: Say your GroceryList component has a list of items generated through an array. When a list item is clicked, you want to display its name: var handleClick = function(i, props) { console.log('You clicked: ' + props.items[i]); } function GroceryList(props) { return ( <div> {props.items.map(function(item, i) { return ( <div onClick={handleClick.bind(this, i, props)} key={i}