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

Form components such as <input>, <textarea>, and <option> differ from other native components because they can be mutated via user interactions. These components provide interfaces that make it easier to manage forms in response to user interactions. For information on events on <form> see Form Events. Interactive Props Form components support a few props that are affected via user interactions: value, supported by <input> and <textarea> components. check

forceUpdate void forceUpdate( [function callback] ) By default, when your component's state or props change, your component will re-render. However, if these change implicitly (eg: data deep within an object changes without changing the object itself) or if your render() method depends on some other data, you can tell React that it needs to re-run render() by calling forceUpdate(). Calling forceUpdate() will cause render() to be called on the component, skipping shouldComponentUpdate(). Thi

Here's how false renders in different situations: Renders as id="false": ReactDOM.render(<div id={false} />, mountNode); String "false" as input value: ReactDOM.render(<input value={false} />, mountNode); No child: ReactDOM.render(<div>{false}</div>, mountNode); The reason why this one doesn't render as the string "false" as a div child is to allow the more common use-case: <div>{x > 1 && 'You have more than one item'}</div>.

There's another (uncommon) way of communicating between components: simply expose a method on the child component for the parent to call. Say a list of todos, which upon clicking get removed. If there's only one unfinished todo left, animate it: var Todo = React.createClass({ render: function() { return <div onClick={this.props.onClick}>{this.props.title}</div>; }, //this component will be accessed by the parent through the `ref` attribute animate: function() { cons

SyntheticEvent Your event handlers will be passed instances of SyntheticEvent, a cross-browser wrapper around the browser's native event. It has the same interface as the browser's native event, including stopPropagation() and preventDefault(), except the events work identically across all browsers. If you find that you need the underlying browser event for some reason, simply use the nativeEvent attribute to get it. Every SyntheticEvent object has the following attributes: boolean bubbles bo

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

This entry shows how to attach DOM events not provided by React (check here for more info). This is good for integrations with other libraries such as jQuery. Try to resize the window: var Box = React.createClass({ getInitialState: function() { return {windowWidth: window.innerWidth}; }, handleResize: function(e) { this.setState({windowWidth: window.innerWidth}); }, componentDidMount: function() { window.addEventListener('resize', this.handleResize); }, component

displayName string displayName The displayName string is used in debugging messages. JSX sets this value automatically; see JSX in Depth.

The most basic thing you can do with a UI is display some data. React makes it easy to display data and automatically keeps the interface up-to-date when the data changes. Getting Started Let's look at a really simple example. Create a hello-react.html file with the following code: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React</title> <script src="https://fb.me/react-15.1.0.js"></script> <script s