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

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}

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

by Pete Hunt React is, in my opinion, the premier way to build big, fast Web apps with JavaScript. It has scaled very well for us at Facebook and Instagram. One of the many great parts of React is how it makes you think about apps as you build them. In this post, I'll walk you through the thought process of building a searchable product data table using React. Start with a mock Imagine that we already have a JSON API and a mock from our designer. Our designer apparently isn't very good becaus

In JSX, <MyComponent /> alone is valid while <MyComponent> isn't. All tags must be closed, either with the self-closing format or with a corresponding closing tag (</MyComponent>). Every React component can be self-closing: <div />. <div></div> is also an equivalent.

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.

After building your component, you may find yourself wanting to "reach out" and invoke methods on component instances returned from render(). In most cases, this should be unnecessary because the reactive data flow always ensures that the most recent props are sent to each child that is output from render(). However, there are a few cases where it still might be necessary or beneficial, so React provides an escape hatch known as refs. These refs (references) are especially useful when you need

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

When designing interfaces, break down the common design elements (buttons, form fields, layout components, etc.) into reusable components with well-defined interfaces. That way, the next time you need to build some UI, you can write much less code. This means faster development time, fewer bugs, and fewer bytes down the wire. Prop Validation As your app grows it's helpful to ensure that your components are used correctly. We do this by allowing you to specify propTypes. React.PropTypes export

React.isValidElement boolean isValidElement(* object) Verifies the object is a ReactElement.