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>; } })

by Pete Hunt React is, in my opinion, the premier way to build big, fast Web apps with JavaScript. It has scaled very well for us at Facebook and Instagram. One of the many great parts of React is how it makes you think about apps as you build them. In this post, I'll walk you through the thought process of building a searchable product data table using React. Start with a mock Imagine that we already have a JSON API and a mock from our designer. Our designer apparently isn't very good becaus

ReactTestUtils makes it easy to test React components in the testing framework of your choice (we use Jest). var ReactTestUtils = require('react-addons-test-utils'); Airbnb has released a testing utility called Enzyme, which makes it easy to assert, manipulate, and traverse your React Components' output. If you're deciding on a unit testing library, it's worth checking out: http://airbnb.io/enzyme/ Simulate Simulate.{eventName}( DOMElement element, [object eventData] ) Simulate an ev

Supported Elements React attempts to support all common elements in both HTML and SVG. Any lower case tag in JSX will be rendered to an element with that tag. SVG elements must be contained within an <svg> element to work properly. Using React.DOM Factory methods If you aren't using JSX and are using the React.DOM.* API to create elements, then you are slightly more limited and there is list of supported elements that will be available on that API. HTML Elements The following HTML e

statics object statics The statics object allows you to define static methods that can be called on the component class. For example: var MyComponent = React.createClass({ statics: { customMethod: function(foo) { return foo === 'bar'; } }, render: function() { } }); MyComponent.customMethod('bar'); // true Methods defined within this block are static, meaning that you can run them before any component instances are created, and the methods do not have access to the pr

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.

Updating: shouldComponentUpdate boolean shouldComponentUpdate( object nextProps, object nextState ) Invoked before rendering when new props or state are being received. This method is not called for the initial render or when forceUpdate is used. Use this as an opportunity to return false when you're certain that the transition to the new props and state will not require a component update. shouldComponentUpdate: function(nextProps, nextState) { return nextProps.id !== this.props.id; } I

When specifying a pixel value for your inline style prop, React automatically appends the string "px" for you after your number value, so this works: var divStyle = {height: 10}; // rendered as "height:10px" ReactDOM.render(<div style={divStyle}>Hello World!</div>, mountNode); See Inline Styles for more info. Sometimes you do want to keep the CSS properties unitless. Here's a list of properties that won't get the automatic "px" suffix: animationIterationCount boxFlex boxFlexGroup b

shallowCompare is a helper function to achieve the same functionality as PureRenderMixin while using ES6 classes with React. If your React component's render function is "pure" (in other words, it renders the same result given the same props and state), you can use this helper function for a performance boost in some cases. Example: var shallowCompare = require('react-addons-shallow-compare'); export class SampleComponent extends React.Component { shouldComponentUpdate(nextProps, nextState) {

setState void setState( function|object nextState, [function callback] ) Performs a shallow merge of nextState into current state. This is the primary method you use to trigger UI updates from event handlers and server request callbacks. The first argument can be an object (containing zero or more keys to update) or a function (of state and props) that returns an object containing keys to update. Here is the simple object usage: setState({mykey: 'my new value'}); It's also possible to pa