[React]Class based and Functional based transform

class MyButton extends React.Component{
  
  //init
  constructor(props) {
    super(props);
    this.state ={btnText:"click me"}
    this._clk = this.clk.bind(this)
  }

  clk(){
    this.setState({
  btnText:"click!"
   });
  }
  

  render(){
    return(
      <div>
        <button type="button" id="123" onClick={this._clk}>{this.state.btnText}</button>
      </div>
    )
  }
}


ReactDOM.render(
 <MyButton />,
    document.getElementById('root')
);

var NewComponent = React.createClass({

  getInitialState: function(){
  return {
   textContent:"click me"
   };
 },

  _event:function(e){
   console.log("click");
   console.log(e.target.textContent);
   this.setState({
  textContent:"click!"
   });
  },

  render: function() {
    return (
      <div>
        <button type="button" id="123" onClick={this._event}>{this.state.textContent}</button>
      </div>
    );
  }
});


ReactDOM.render(
 React.createElement(NewComponent,{
  }),
    document.getElementById('root')
);