React.js

React.Js Components

by Abid Shaik

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js"></script>
<!-- Make sure we ad React.js and React Dom .js -->
<div id="root">
    <!-- This element's contents will be replaced with your component. -->
    <!-- https://codepen.io/AbidCharlotte49er/pen/PBOBdO CHECK Code PEN -->
</div>

Babel + JSX

class Toggle extends React.Component 
{
	constructor(props)
	{
		super(props);
		this.state = {isToggleOn : false, someData: "this is someDate in the state"}; 
		//this is required to make 'this' work in callback
		this.handleClick = this.handleClick.bind(this); 
    console.log(this); 
	}
  handleClick()
  {
   
  	this.setState(prevState=>({
    isToggleOn: !prevState.isToggleOn, 
    someData: "this state is updated on Click event"
    })); 
    console.log(this); 
  }

	render() 
	{
		return ( 
  		<button onClick={this.handleClick}>{this.state.isToggleOn ? "ON" : "OFF"}</button> 
  	);
	}
}

ReactDOM.render
( 
	<Toggle />,
  document.getElementById("root")
)