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!')

You can't access the children of your component through this.props.children. this.props.children designates the children being passed onto you by the owner: var App = React.createClass({ componentDidMount: function() { // This doesn't refer to the `span`s! It refers to the children between // last line's `<App></App>`, which are undefined. console.log(this.props.children); }, render: function() { return <div><span/><span/></div>; } })

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

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

Beside DOM differences, React offers some attributes that simply don't exist in DOM. key: an optional, unique identifier. When your component shuffles around during render passes, it might be destroyed and recreated due to the diff algorithm. Assigning it a key that persists makes sure the component stays. See more here. ref: see here. dangerouslySetInnerHTML: Provides the ability to insert raw HTML, mainly for cooperating with DOM string manipulation libraries. See more here.

React.cloneElement ReactElement cloneElement( ReactElement element, [object props], [children ...] ) Clone and return a new ReactElement using element as the starting point. The resulting element will have the original element's props with the new props merged in shallowly. New children will replace existing children. Unlike React.addons.cloneWithProps, key and ref from the original element will be preserved. There is no special behavior for merging any props (unlike cloneWithProps). Se

Fetch data in componentDidMount. When the response arrives, store the data in state, triggering a render to update your UI. When fetching data asynchronously, use componentWillUnmount to cancel any outstanding requests before the component is unmounted. This example fetches the desired Github user's latest gist: var UserGist = React.createClass({ getInitialState: function() { return { username: '', lastGistUrl: '' }; }, componentDidMount: function() { this.serverR

For parent-child communication, simply pass props. For child-parent communication: Say your GroceryList component has a list of items generated through an array. When a list item is clicked, you want to display its name: var handleClick = function(i, props) { console.log('You clicked: ' + props.items[i]); } function GroceryList(props) { return ( <div> {props.items.map(function(item, i) { return ( <div onClick={handleClick.bind(this, i, props)} key={i}

Trying to compare and contrast React with WebComponents inevitably results in specious conclusions, because the two libraries are built to solve different problems. WebComponents provide strong encapsulation for reusable components, while React provides a declarative library that keeps the DOM in sync with your data. The two goals are complementary; engineers can mix-and-match the technologies. As a developer, you are free to use React in your WebComponents, or to use WebComponents in React, or

You don't have to go full React. The component lifecycle events, especially componentDidMount and componentDidUpdate, are good places to put your other libraries' logic. var App = React.createClass({ getInitialState: function() { return {myModel: new myBackboneModel({items: [1, 2, 3]})}; }, componentDidMount: function() { $(this.refs.placeholder).append($('<span />')); }, componentWillUnmount: function() { // Clean up work here. }, shouldComponentUpdate: funct