componentWillMount

Mounting: componentWillMount void componentWillMount() Invoked once, both on the client and server, immediately before the initial rendering occurs. If you call setState within this method, render() will see the updated state and will be executed only once despite the state change.

propTypes

propTypes object propTypes The propTypes object allows you to validate props being passed to your components. For more information about propTypes, see Reusable Components.

React.Children.map

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

replaceProps

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

React.createElement

React.createElement ReactElement createElement( string/ReactClass type, [object props], [children ...] ) Create and return a new ReactElement of the given type. The type argument can be either an html tag name string (eg. 'div', 'span', etc), or a ReactClass (created via React.createClass).

ReactDOMServer.renderToStaticMarkup

ReactDOMServer.renderToStaticMarkup string renderToStaticMarkup(ReactElement element) Similar to renderToString, except this doesn't create extra DOM attributes such as data-react-id, that React uses internally. This is useful if you want to use React as a simple static page generator, as stripping away the extra attributes can save lots of bytes.

Tooling Integration

We've tried to make React as environment-agnostic as possible. People use React in a variety of languages (JavaScript, TypeScript, ClojureScript, etc) and in a variety of environments (web, iOS, Android, NodeJS, Nashorn, etc). There are many tools to help you build great applications. In these sections we introduce some of the tools that are most commonly used together with React. Language Tooling describes how to set up tools like Babel to transpile JSX for a better development experience. P

Language Tooling

ES2015 with JSX In-browser JSX Transform If you like using JSX, Babel 5 provided an in-browser ES2015 and JSX transformer for development called browser.js that can be included from CDNJS. Include a <script type="text/babel"> tag to engage the JSX transformer. The in-browser JSX transformer is fairly large and results in extraneous computation client-side that can be avoided. Do not use it in production — see the next section. Productionizing: Precompiled JSX If you have npm, you

Server-side Environments

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'

Transferring Props

It's a common pattern in React to wrap a component in an abstraction. The outer component exposes a simple property to do something that might have more complex implementation details. You can use JSX spread attributes to merge the old props with additional values: <Component {...this.props} more="values" /> If you don't use JSX, you can use any object helper such as ES6 Object.assign or Underscore _.extend: React.createElement(Component, Object.assign({}, this.props, { more: 'values' })