React.js :Getting Started

PluralSight training...

by Cary Price

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.1/react-with-addons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.1/react-dom.js"></script>
<div id="root">
  <!-- This element's contents will be replaced with your component. -->
</div>

Babel + JSX

class Button extends React.Component {
	handleClick = () => {
  	this.props.onClickFunction(this.props.incrementValue);
  };

  render() {
    return ( 
    	<button onClick = {this.handleClick}>
      	+{this.props.incrementValue}
      </button>
    );
  }
}

const Result = (props) => {
  return ( 
  	<div>{props.counter}</div>
  );
};

class App extends React.Component {
  state = { counter: 0 };

  incrementCounter = (incrementValue) => {
    this.setState((prevState) => ({
      counter: prevState.counter + incrementValue
    }));
  };

  render() {
    return ( < div >
      < Button incrementValue={1} onClickFunction={this.incrementCounter} / >
      < Button incrementValue={5} onClickFunction={this.incrementCounter} / >
      < Button incrementValue={10} onClickFunction={this.incrementCounter} / >
      < Button incrementValue={100} onClickFunction={this.incrementCounter} / >
      < Result counter={this.state.counter} / >
      < /div>
    );
  }
}

ReactDOM.render( < App / > , root);