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

Unmounting: componentWillUnmount void componentWillUnmount() Invoked immediately before a component is unmounted from the DOM. Perform any necessary cleanup in this method, such as invalidating timers or cleaning up any DOM elements that were created in componentDidMount.

ReactDOMServer.renderToString string renderToString(ReactElement element) Render a ReactElement to its initial HTML. This should only be used on the server. React will return an HTML string. You can use this method to generate HTML on the server and send the markup down on the initial request for faster page loads and to allow search engines to crawl your pages for SEO purposes. If you call ReactDOM.render() on a node that already has this server-rendered markup, React will preserve it and on

ReactDOM.unmountComponentAtNode boolean unmountComponentAtNode(DOMElement container) Remove a mounted React component from the DOM and clean up its event handlers and state. If no component was mounted in the container, calling this function does nothing. Returns true if a component was unmounted and false if there was no component to unmount.

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.

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

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

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

We'll be building a simple but realistic comments box that you can drop into a blog, a basic version of the realtime comments offered by Disqus, LiveFyre or Facebook comments. We'll provide: A view of all of the comments A form to submit a comment Hooks for you to provide a custom backend It'll also have a few neat features: Optimistic commenting: comments appear in the list before they're saved on the server so it feels fast. Live updates: other users' comments are popped into the comment

mixins array mixins The mixins array allows you to use mixins to share behavior among multiple components. For more information about mixins, see Reusable Components.