Last active
November 12, 2017 06:15
-
-
Save saurabhpati/6f659569de68e0f886f03dae2d34f4b5 to your computer and use it in GitHub Desktop.
Implementing a clock using props in React
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react' // npm package of react is required | |
| import ReactDOM from 'react-dom' // npm package of react-dom | |
| class Clock extends React.Component { | |
| render() { | |
| return ( | |
| <div> | |
| <h2>Hello world, Its {this.props.date.toLocaleString()}</h2> | |
| </div> | |
| ); | |
| } | |
| componentDidMount() { | |
| this.timerId = setInterval(() => { tick() }, 1000); | |
| } | |
| componentWillUnmount() { | |
| clearInterval(this.timerId); | |
| } | |
| } | |
| let tick = () => { | |
| ReactDOM.render(<Clock date={new Date()} />, document.getElementById('clock')); | |
| } | |
| export default Clock; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <title>React App</title> | |
| </head> | |
| <body> | |
| <!--Include react script reference here--> | |
| <!--Include react-dom script reference here--> | |
| <div id="clock"></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment