React Development Setup

by amrendra kumar

HTML

<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<div id="root">
</div>

Babel + JSX

class Clock extends React.Component {
	constructor(props) {
	super(props);
	this.state = {date: new Date()};

	}
	componentDidMount() {
		//console.log(this);
    console.log('componentdid mount parent ')
		this.timerId = setInterval(
			() => this.tick(),
		1000 
		);
	}

	componentWillUnmount() {
		cleartimeInterval(this.timerId);
	}
	
	tick() {
		this.setState({
			date: new Date(),
		});
	}
	
	render(){
		return(
			<div>
        <TestComponent/>
				<h1>time is:</h1>
				<h2>{this.state.date.toLocaleTimeString()}</h2>
			</div>
		);
	}
}


class TestComponent extends React.Component {
componentDidMount() {
	console.log('componentdid mount child ')
}
	render() {
  	return (<h1>test</h1>)
  }
}


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