JSFiddle - React, Tailwind, and code Playground

by Allie Yu

HTML

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

Babel + JSX

class Child extends React.Component {
	constructor(props) {
  	super(props)
    this.state = {
    	num : 123,
      ziText : "I'm child component"
    }
  }

	fun = () => {
  	this.setState({
    	num : 321
    })
  }
  
  render(){
    return (
      <div>
  	    Child : {this.props.text} ---- {this.props.num}
        <button onClick = {this.fun}>Click</button>
        <button onClick = {this.props.fufun(this.state.ziText)}>Click</button>
  	  </div>
    )
  }
}


class App extends React.Component {
	constructor(props) {
  	super(props)
    this.state = {
      text : "parent component"
    }
  }
  
	dataFun = text => {
  	console.log(text)
    this.setState({
    	text
    })
  }
  
  render(){
    return (
      <div>
        {this.state.text}
  	    <Child text="hello" fufun={this.dataFun}/>
  	  </div>
    )
  }
}

let target = document.getElementById('root');
ReactDOM.render(<App />, target);