Currently, in a component's render, you can only return one node; if you have, say, a list of divs to return, you must wrap your components within a div, span or any other component. Don't forget that JSX compiles into regular JS; returning two functions doesn't really make syntactic sense. Likewise, don't put more than one child in a ternary.

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.createFactory factoryFunction createFactory( string/ReactClass type ) Return a function that produces ReactElements of a given type. Like React.createElement, the type argument can be either an html tag name string (eg. 'div', 'span', etc), or a ReactClass.

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

One of React's biggest strengths is that it's easy to track the flow of data through your React components. When you look at a component, you can easily see exactly which props are being passed in which makes your apps easy to reason about. Occasionally, you want to pass data through the component tree without having to pass the props down manually at every level. React's "context" feature lets you do this. Context is an advanced and experimental feature. The API is likely to change in future

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

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.

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

You don't have to go full React. The component lifecycle events, especially componentDidMount and componentDidUpdate, are good places to put your other libraries' logic. var App = React.createClass({ getInitialState: function() { return {myModel: new myBackboneModel({items: [1, 2, 3]})}; }, componentDidMount: function() { $(this.refs.placeholder).append($('<span />')); }, componentWillUnmount: function() { // Clean up work here. }, shouldComponentUpdate: funct

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.