Learn the fundamentals of React, including simple and class components, state, props, and submitting form data.
State & Lifecycle
<div id="root"></div> |
function FormattedDate(props) { | |
return <h2>It is {props.date.toLocaleTimeString()}.</h2> | |
} | |
// Clock component | |
class Clock extends React.Component { | |
constructor(props) { | |
super(props); | |
this.state = {date: new Date()}; | |
} | |
// Mounting | |
componentDidMount() { | |
this.timerID = setInterval( | |
() => this.tick(), | |
1000 | |
); | |
} | |
// Unmounting | |
componentWillUnmount() { | |
clearInterval(this.timerID); | |
} | |
tick() { | |
this.setState({ | |
date: new Date() | |
}); | |
} | |
render() { | |
return ( | |
<div> | |
<h1>Hello world!</h1> | |
<FormattedDate date={this.state.date} /> | |
</div> | |
); | |
} | |
} | |
ReactDOM.render( | |
<Clock />, | |
document.getElementById("root") | |
); |
<script src="https://unpkg.com/react/umd/react.development.js"></script> | |
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script> |