React 101

by arunoda

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.0/react-dom.min.js"></script>
<div id="app"/>

Babel + JSX

class AgeIndicator extends React.Component {
	renderOld() {
  	return (<p>You are old bro.</p>);
  }
  
  renderYoung() {
		return (<p>You are young.</p>);
  }
  
  renderKid() {
		return (<p>You are a kid.</p>);
  }
  
  renderContent() {
  	const { age } = this.props;
    
    if ( age < 20 ) {
    	return this.renderKid();
    } else if( age < 40 ) { 
    	return this.renderYoung();
    } else {
    	return this.renderOld();
    }
  }
  
	render() {
  	return (
    	<div>
	      {this.renderContent()}
	    </div>
    );
  }
}

ReactDOM.render(
	<AgeIndicator age={10} />,
  document.getElementById('app')
);