React Cheat Sheet

README.md

React Cheat Sheet

defaults.md

A default React Component (ES5)

import React from 'react'
var MyComponent = React.createClass({
    getDefaultProps(){
        return {}
    },
    getInitialState() {
      return {}
    },
    render(){
      return (
        <div className="component component-MyComponent">
          Hello World
        </div>
      )
    }
});
export default MyComponent;

jsx.md

JSX

Loops

{Array(10).fill(1).map((el, i) =>
  <ObjectRow key={i + 1} />
)}

See this answer on SO

Conditional statements

TODO: these might be simplifyable

//switch
{(() => {
  switch (this.state.color) {
    case "red":   return "#FF0000";
    case "green": return "#00FF00";
    case "blue":  return "#0000FF";
    default:      return "#FFFFFF";
  }
})()}

//if
{(() => { if (conditionIsMet) { return (
  <div>The condition is met</div>
)}})()}

state.md

State

//setting
this.setState({obj1: 'something'});
//getting
this.state.obj1;