This cheatsheet is out of date. It was created at a time I started learning Reactjs, months ago. It doesn't reflect the latest version of react. For a cheatsheet kept current, head to : reactjs Cheat Sheet by kitallis

Changed to es6 syntax.

`import React from 'react'; class MyComponent extends React.Component { render() { return
Hello {this.props.name}
; } }` `React.render( , document.body);` `import React from 'react'; import CommentList from './path/to/CommentList' class MyComponent extends React.Component { getInitialState() { return { data: [], postingAllowed: false }; } componentWillMount() { $.get(this.props.url, function (data) { this.setState(data); // this.state.postAllowed === true // Don't ever // this.replaceState({ ... }); // Reseting state to the specified variables }); } render() { return ( @#CommentList data={this.state.data} /#@ ); } }); /* Access state in any of: shouldComponentUpdate() componentWillUpdate() render() componentDidUpdate() */` `import React from 'react'; class MyComponent extends React.Component { static propTypes = { // required requiredFunc: React.PropTypes.func.isRequired, requiredAny: React.PropTypes.any.isRequired, // primitives, optional by default bool: React.PropTypes.bool, func: React.PropTypes.func, number: React.PropTypes.number, string: React.PropTypes.string, } static defaultProps = { fullscreen: false }; /* In any of: componentWillReceiveProps() shouldComponentUpdate() componentWillUpdate() this.setProps({ fullscreen: true }); this.props.fullscreen === true this.replaceProps({ ... }); */ };` `getDefaultProps() getInitialState() // initial render only // not executed when properties or state are changed componentWillMount() componentDidMount() // when new properties are set componentWillReceiveProps(props) // when new properties or state are set shouldComponentUpdate(props, state) componentWillUpdate(props, state) // all scenarios render() // When properties or state are set componentDidUpdate(prevProps, prevState) componentDidMount() // removing componentWillUnmount() // ...there is no DidUnmount or ReceiveState.` `import React from 'react'; class TodoList extends React.Component { // Let's move this to a static method, to minimise the // footprint of each object instance static createItem(itemText) { return
- {itemText}
; } render() { return

{this.props.items.map(TodoList.createItem)}

; } });` `import React from 'react'; class VideoPlayer extends React.Component { render: function() { return @#VideoEmbed {...this.props} controls='false' /#@; } }); @#VideoPlayer src="video.mp4" /#@` `// Use composition and functional programming, pass in an // object that will manage the decoration actions. Directly // augmenting the object with a mixin makes for code that is // terse but also hard to debug. // https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750`