Cacher is the code snippet organizer for pro developers

import React from 'react';
import ReactDOM from 'react-dom';

class MyComponentClass extends React.Component {
  render() {
    return <h1>Hello world</h1>;
  }
}

import React from 'react';
import ReactDOM from 'react-dom';

class MyName extends React.Component {
	// name property goes here:
	get name()
  {
    return 'whatever-your-name-is-goes-here'
  }

  render() {
    return <h1>My name is {this.name}.</h1>;
  }
}

class Button extends React.Component {
  scream() {
    alert('AAAAAAAAHHH!!!!!');
  }

  render() {
    return <button onClick={this.scream}>AAAAAH!</button>;
  }
}

ReactDOM.render(<Button />, document.getElementById('app'));

//Pass variables using props
class Greeting extends React.Component {
  render() {
    return <h1>Hi there, {this.props.firstName}!</h1>;
  }
}

ReactDOM.render(
  <Greeting firstName='Roberta' />, 
  document.getElementById('app')
);

//use state
import React from 'react';
import ReactDOM from 'react-dom'

const green = '#39D1B4';
const yellow = '#FFD712';

class Toggle extends React.Component {
  
  constructor(props){
    super(props)
    this.state= {color:green}
    this.changeColor = this.changeColor.bind(this);
  }
  
  changeColor()
  {
    
    //Any time that you call this.setState(), this.setState() AUTOMATICALLY calls .render() as soon as the state has changed
    if(this.state.color==green)
    	this.setState({color:yellow})
    else
      this.setState({color:green})
  }
  
  render() {
    return (
      <div style={{background: this.state.color}}>
        <h1>
          Change my color
        </h1>
        <button onClick={this.changeColor}>
          Change color
        </button>
      </div>
    );
  }
}

ReactDOM.render(<Toggle />, document.getElementById('app'))