React (Virtual) DOM Terminology

In React's terminology, there are five core types that are important to distinguish: ReactElement / ReactElement Factory ReactNode ReactComponent / ReactComponent Class React Elements The primary type in React is the ReactElement. It has four properties: type, props, key and ref. It has no methods and nothing on the prototype. You can create one of these objects through React.createElement. var root = React.createElement('div'); To render a new tree into the DOM, you create ReactElements a

JSX in Depth

JSX is a JavaScript syntax extension that looks similar to XML. You can use a simple JSX syntactic transform with React. Why JSX? You don't have to use JSX with React. You can just use plain JS. However, we recommend using JSX because it is a concise and familiar syntax for defining tree structures with attributes. It's more familiar for casual developers such as designers. XML has the benefit of balanced opening and closing tags. This helps make large trees easier to read than function calls

React.DOM

React.DOM React.DOM provides convenience wrappers around React.createElement for DOM components. These should only be used when not using JSX. For example, React.DOM.div(null, 'Hello World!')

replaceState

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.

componentWillUpdate

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

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

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.

Two-Way Binding Helpers

ReactLink is an easy way to express two-way binding with React. ReactLink is deprecated as of React v15. The recommendation is to explicitly set the value and change handler, instead of using ReactLink. In React, data flows one way: from owner to child. This is because data only flows one direction in the Von Neumann model of computing. You can think of it as "one-way data binding." However, there are lots of applications that require you to read some data and flow it back into your program.

getDefaultProps

getDefaultProps object getDefaultProps() Invoked once and cached when the class is created. Values in the mapping will be set on this.props if that prop is not specified by the parent component (i.e. using an in check). This method is invoked before any instances are created and thus cannot rely on this.props. In addition, be aware that any complex objects returned by getDefaultProps() will be shared across instances, not copied.

React.Children.only

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