2 title: React.js (v0.14)
7 **Deprecated:** this guide targets an old version of React (v0.14). See the [updated React cheatsheet](react) for new versions.
15 var Component = React.createClass({
17 return <div>Hello {this.props.name}</div>;
23 ReactDOM.render(<Component name="John" />, document.body);
27 Use the [React.js jsfiddle](http://jsfiddle.net/reactjs/69z2wepo/) to start hacking. (or the unofficial [jsbin](http://jsbin.com/yafixat/edit?js,output))
32 var UserAvatar = React.createClass({...});
33 var UserProfile = React.createClass({...});
38 var Info = React.createClass({
41 <UserAvatar src={this.props.avatar} />
42 <UserProfile username={this.props.username} />
48 Nest components to separate concerns. See [multiple components](http://facebook.github.io/react/docs/multiple-components.html).
50 ## States & Properties
56 <MyComponent fullscreen={true} />
62 this.props.fullscreen //=> true
65 this.setState({ username: 'rstacruz' });
66 this.replaceState({ ... });
67 this.state.username //=> 'rstacruz'
72 return <div className={this.props.fullscreen ? 'full' : ''}>
73 Welcome, {this.state.username}
78 Use [props](https://facebook.github.io/react/docs/tutorial.html#using-props) (`this.props`) to access parameters passed from the parent.
79 Use [states](https://facebook.github.io/react/docs/tutorial.html#reactive-state) (`this.state`) to manage dynamic data.
85 getInitialState: function () {
86 return { comments: [] };
89 getDefaultProps: function () {
90 return { name: "Hello" };
95 Pre-populates `this.state.comments` and `this.props.name`.
102 ReactDOM.findDOMNode(c) // 0.14+
103 React.findDOMNode(c) // 0.13
104 c.getDOMNode() // 0.12 below
116 c.replaceState({ ... })
118 c.setProps({ ... }) // for deprecation
119 c.replaceProps({ ... }) // for deprecation
124 These are methods available for `Component` instances. See [Component API](http://facebook.github.io/react/docs/component-api.html).
130 | [`render()`](http://facebook.github.io/react/docs/component-specs.html#render) | |
132 | [`getInitialState()`](http://facebook.github.io/react/docs/component-specs.html#getinitialstate) | |
133 | [`getDefaultProps()`](http://facebook.github.io/react/docs/component-specs.html#getdefaultprops) | |
135 | [`mixins: [ ... ]`](http://facebook.github.io/react/docs/component-specs.html#mixins) | Mixins ... [more](#mixins) |
136 | [`propTypes: { ... }`](http://facebook.github.io/react/docs/component-specs.html#proptypes) | Validation ... [more](#property-validation) |
137 | [`statics: { ... }`](http://facebook.github.io/react/docs/component-specs.html#statics) | Static methods |
138 | [`displayName: "..."`](http://facebook.github.io/react/docs/component-specs.html#displayname) | Automatically filled by JSX |
141 Methods and properties you can override. See [component specs](http://facebook.github.io/react/docs/component-specs.html).
147 | `componentWillMount()` | Before rendering (no DOM yet) |
148 | `componentDidMount()` | After rendering |
149 {:.greycode.no-head.lc}
151 Before initial rendering occurs. Add your DOM stuff on didMount (events, timers, etc). See [reference](http://facebook.github.io/react/docs/component-specs.html#mounting-componentwillmount).
155 | `componentWillReceiveProps`*(newProps={})* | Use `setState()` here |
156 | `shouldComponentUpdate`*(newProps={}, newState={})* | Skips `render()` if returns false |
157 | `componentWillUpdate`*(newProps={}, newState={})* | Can't use `setState()` here |
158 | `componentDidUpdate`*(prevProps={}, prevState={})* | Operate on the DOM here |
159 {:.greycode.no-head.lc}
161 Called when parents change properties and `.setState()`. These are not called for initial renders. See [reference](http://facebook.github.io/react/docs/component-specs.html#updating-componentwillreceiveprops).
165 | `componentWillUnmount()` | Invoked before DOM removal |
166 {:.greycode.no-head.lc}
168 Clear your DOM stuff here (probably done on didMount). See [reference](http://facebook.github.io/react/docs/component-specs.html#unmounting-componentwillunmount).
172 ### Example: loading data
176 componentDidMount: function () {
177 $.get(this.props.url, function (data) {
182 render: function () {
183 return <CommentList data={this.state.data} />
188 See [initial AJAX data](http://facebook.github.io/react/tips/initial-ajax.html).
195 <input ref="myInput">
201 ReactDOM.findDOMNode(this.refs.myInput).focus()
202 ReactDOM.findDOMNode(this.refs.myInput).value
206 Add attributes like `onChange`. See [events](https://facebook.github.io/react/docs/events.html).
210 value={this.state.value}
211 onChange={this.handleChange} />
216 handleChange: function(event) {
217 this.setState({ value: event.target.value });
221 Allows access to DOM nodes. See [References](http://facebook.github.io/react/docs/more-about-refs.html).
226 Email: <input type="text" valueLink={this.linkState('email')} />
232 mixins: [React.addons.LinkedStateMixin]
240 Use [LinkedStateMixin](http://facebook.github.io/react/docs/two-way-binding-helpers.html) for easier two-way binding.
242 ## Property validation
249 email: React.PropTypes.string,
250 seats: React.PropTypes.number,
251 settings: React.PropTypes.object,
252 callback: React.PropTypes.func,
253 isClosed: React.PropTypes.bool,
254 any: React.PropTypes.any,
258 Primitive types: `.string`, `.number`, `.func`, and `.bool`. See [propTypes](http://facebook.github.io/react/docs/reusable-components.html#prop-validation).
264 requiredFunc: React.PropTypes.func.isRequired,
265 requiredAny: React.PropTypes.any.isRequired,
274 element: React.PropTypes.element, // react element
275 node: React.PropTypes.node, // num, string, element
276 // ...or array of those
279 Use `.element`, `.node`.
285 enum: React.PropTypes.oneOf(['M','F']), // enum
286 union: React.PropTypes.oneOfType([ // any
287 React.PropTypes.string,
288 React.PropTypes.number ]),
291 Use `.oneOf`, `.oneOfType`.
293 ### Arrays and objects
297 array: React.PropTypes.array,
298 arrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
299 object: React.PropTypes.object,
300 objectOf: React.PropTypes.objectOf(React.PropTypes.number),
302 message: React.PropTypes.instanceOf(Message),
304 object2: React.PropTypes.shape({
305 color: React.PropTypes.string,
306 size: React.PropTypes.number
310 Use `.array[Of]`, `.object[Of]`, `.instanceOf`, `.shape`.
312 ### Custom validation
316 customProp: function(props, propName, componentName) {
317 if (!/matchme/.test(props[propName])) {
318 return new Error('Validation failed!');
324 Supply your own function.
331 var cx = require('classnames');
336 'message-important': this.props.isImportant,
337 'message-read': this.props.isRead
340 return <div className={classes}>Great Scott!</div>;
344 Manipulate DOM classes with [classnames](https://www.npmjs.org/package/classnames), previously known as `React.addons.classSet`. See [Class set](http://facebook.github.io/react/docs/class-name-manipulation.html).
346 ### Propagating properties
349 <VideoPlayer src="video.mp4" />
354 var VideoPlayer = React.createClass({
356 /* propagates src="..." down to this sub component */
357 return <VideoEmbed {...this.props} controls='false' />;
362 See [Transferring props](http://facebook.github.io/react/docs/transferring-props.html).
367 var SetIntervalMixin = {
368 componentWillMount: function() { .. }
374 var TickTock = React.createClass({
375 mixins: [SetIntervalMixin]
379 See [addons](https://facebook.github.io/react/docs/addons.html) for some built-in mixins.
381 ## [Top level API](https://facebook.github.io/react/docs/top-level-api.html)
384 React.createClass({ ... })
386 React.isValidElement(c)
388 ReactDOM.findDOMNode(c) // 0.14+
389 ReactDOM.render(<Component />, domnode, [callback]) // 0.14+
390 ReactDOM.unmountComponentAtNode(domnode) // 0.14+
392 ReactDOMServer.renderToString(<Component />) // 0.14+
393 ReactDOMServer.renderToStaticMarkup(<Component />) // 0.14+
401 var style = { backgroundImage: 'url(x.jpg)', height: 10 };
402 return <div style={style}></div>;
405 See [inline styles](https://facebook.github.io/react/tips/inline-styles.html).
410 function markdownify() { return "<p>...</p>"; }
411 <div dangerouslySetInnerHTML={{__html: markdownify()}} />
414 See [dangerously set innerHTML](https://facebook.github.io/react/tips/dangerously-set-inner-html.html).
419 var TodoList = React.createClass({
421 function item(itemText) {
422 return <li>{itemText}</li>;
424 return <ul>{this.props.items.map(item)}</ul>;
431 * [Animations](http://facebook.github.io/react/docs/animation.html)