Skip to content

Instantly share code, notes, and snippets.

@anselmdk anselmdk/README.md
Last active Mar 29, 2016

Embed
What would you like to do?
React Cheat Sheet

React Cheat Sheet

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

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

//setting
this.setState({obj1: 'something'});
//getting
this.state.obj1;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.