JSFiddle - React, Tailwind, and code Playground

by Grace Lee

HTML

<div id="display">

</div>
<button id="btn">
change component
</button>

CSS

p {
  color: red;
}

Babel + JSX

const lists=['Bibby', 'Darren', 'Joe', 'Teddy', 'Grace', 'Zizi', 'Carol', 'JC', '詩涵']
class Test extends React.Component {
  constructor(props) {
    super(props);

   	this.state={
   		whichClass:true
   	};
  }
  render() {
    if(this.state.whichClass){
    	this.state.whichClass=false;
      return(<TestTrue/>);
    }else{
    	this.state.whichClass=true;
      return(<TestFalse/>);
    }
  }
}

class TestTrue extends React.Component{
  constructor(props){
  	super(props);

 		this.state = {
      count: 0
    };
    this.computeCount = this.computeCount.bind(this);
  }
   computeCount(e) {
    this.setState({
      count: this.state.count +1
    });
  }
  render(){
   return ( < div >
      < p onClick = {
        this.computeCount
      } > Hello Grace < /p>  < span >
      Click Hello Grace {
        this.state.count
      }
      次 < /span>  < /div >
    )
  }
}

class TestFalse extends React.Component{
	constructor(props){
  	super(props);
    
  }
  render(){
  	return(
   		<div>
      	<ul>
        {lists.map(name=>{return (<li>{name}</li>);})}
      	</ul>
    	</div>
    );
  }
}

(function(){React.render( < Test / > , document.getElementById('display'));})();

document.getElementById('btn').addEventListener("click",function(){
	React.render( < Test / > , document.getElementById('display'));
});