JSFiddle - React, Tailwind, and code Playground

React boilerplate

by Varayut Lerdkanlayanawat

HTML

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

Babel + JSX

const HelloWorld = (props) => {
	return (
  	<div>
      <h1>Hello {props.firstName} {props.lastName}</h1>
      <p>I'm {props.age} years old</p>
  	</div>
   );
};

class Person extends React.Component {
	constructor() {
  	super();
    this.state = {
    	age: Math.floor(Math.random() * 80) + 1
    }
  }
  render() {
    const { firstName, lastName } = this.props;
  	return (
    	<HelloWorld 
        firstName={firstName} 
        lastName={lastName} 
        age={this.state.age} 
      />
    );
  }
}


ReactDOM.render(
	<Person firstName="John" lastName="Doe" />, 
  document.getElementById('root')
 );