One of the great things about React is that it doesn't require the DOM as a dependency, which means it is possible to render a React application on the server and send the HTML markup down to the client. There are a few things that React expects, so this guide will help you get started in your preferred environment. Node.js Node.js is a popular JavaScript runtime that comes with an extensive core library and support for installing packages from npm to expand on the basic functionality. As we'

setProps void setProps( object nextProps, [function callback] ) When you're integrating with an external JavaScript application you may want to signal a change to a React component rendered with ReactDOM.render(). Calling setProps() on a root-level component will change its properties and trigger a re-render. In addition, you can supply an optional callback function that is executed once setProps is completed and the component is re-rendered. This method is deprecated and will be remove

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

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.

replaceProps void replaceProps( object nextProps, [function callback] ) Like setProps() but deletes any pre-existing props instead of merging the two objects. This method is deprecated and will be removed soon. This method is not available on ES6 class components that extend React.Component. Instead of calling replaceProps, try invoking ReactDOM.render() again with the new props. For additional notes, see our blog post about using the Top Level API

replaceState void replaceState( object nextState, [function callback] ) Like setState() but deletes any pre-existing state keys that are not in nextState. This method is not available on ES6 class components that extend React.Component. It may be removed entirely in a future version of React.

render ReactElement render() The render() method is required. When called, it should examine this.props and this.state and return a single child element. This child element can be either a virtual representation of a native DOM component (such as <div /> or React.DOM.div()) or another composite component that you've defined yourself. You can also return null or false to indicate that you don't want anything rendered. Behind the scenes, React renders a <noscript> tag to work with o

React's key design decision is to make the API seem like it re-renders the whole app on every update. This makes writing applications a lot easier but is also an incredible challenge to make it tractable. This article explains how with powerful heuristics we managed to turn a O(n3) problem into a O(n) one. Motivation Generating the minimum number of operations to transform one tree into another is a complex and well-studied problem. The state of the art algorithms have a complexity in the ord

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

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