React lets you use whatever style of data management you want, including mutation. However, if you can use immutable data in performance-critical parts of your application it's easy to implement a fast shouldComponentUpdate() method to significantly speed up your app. Dealing with immutable data in JavaScript is more difficult than in languages designed for it, like Clojure. However, we've provided a simple immutability helper, update(), that makes dealing with this type of data much easier, wi

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

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'

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.

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).

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 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

React has implemented a browser-independent events and DOM system for performance and cross-browser compatibility reasons. We took the opportunity to clean up a few rough edges in browser DOM implementations. All DOM properties and attributes (including event handlers) should be camelCased to be consistent with standard JavaScript style. We intentionally break with the spec here since the spec is inconsistent. However, data-* and aria-* attributes conform to the specs and should be lower-cased

If you know all the properties that you want to place on a component ahead of time, it is easy to use JSX: var component = <Component foo={x} bar={y} />; Mutating Props is Bad If you don't know which properties you want to set, you might be tempted to add them onto the object later: var component = <Component />; component.props.foo = x; // bad component.props.bar = y; // also bad This is an anti-pattern because it means that we can't help you check the right propTypes u

Updating: componentWillReceiveProps void componentWillReceiveProps( object nextProps ) Invoked when a component is receiving new props. This method is not called for the initial render. Use this as an opportunity to react to a prop transition before render() is called by updating the state using this.setState(). The old props can be accessed via this.props. Calling this.setState() within this function will not trigger an additional render. componentWillReceiveProps: function(nextProps) {