Last active
August 31, 2019 18:54
Revisions
-
emersonbrogadev revised this gist
Aug 31, 2019 . 1 changed file with 25 additions and 2 deletions.There are no files selected for viewing
This file contains hidden or 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 charactersOriginal file line number Diff line number Diff line change @@ -1,7 +1,7 @@ <!DOCTYPE html> <html> <head> <title>State e Lifecycle - Clock - Demo 3</title> <style type="text/css"> html, body { width: 100%; @@ -40,8 +40,31 @@ <script type="text/babel"> class Clock extends React.Component { constructor(props) { super(props); this.state = { date : new Date() }; } componentDidMount() { this.timerId = setInterval( () => this.tick(), 1000); } componentWillUnmount() { clearInterval(this.timerId); } tick() { this.setState({ date: new Date(), }) } getTime() { const { date } = this.state; const h = `0${date.getHours()}`.slice(-2); const m = `0${date.getMinutes()}`.slice(-2); const s = `0${date.getSeconds()}`.slice(-2); -
emersonbrogadev created this gist
Aug 31, 2019 .There are no files selected for viewing
This file contains hidden or 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 charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,32 @@ # React Clock - uma demonstração do State e Lifecycle ### DEMO 3 O conteúdo aqui apresentado é para exemplificar o funcionamento do State e Lifecycle do React. Existe um video explicando passo a passo sobre o conteúdo desse repositório. Esse código é apenas para fins educativos e foi formatado de forma a exemplificar conceitos. ### Rodando o Projeto Baixe o html abaixo e abra no browser. ### Imagem do projeto rodando  #### Se ainda não segue, conheça as nossas Redes Sociais [➜ Veja as dicas no Instagram](https://www.instagram.com/emersonbrogadev/) [➜ Assita nosso canal no YouTube](https://www.youtube.com/c/emersonbroga/) [➜ Curta nossa página no Facebook](https://www.facebook.com/emersonbrogadev/) [➜ Não perca as atualizações no Twitter](https://www.twitter.com/emersonbrogadev/) [➜ Veja os repositórios no Github](https://www.github.com/emersonbrogadev/) <a href="https://emersonbroga.com"> <img src="https://emersonbroga.com/e/assets/emersonbroga-logo-name-black.png" height="60" / alt="EmersonBroga.com"> </a> This file contains hidden or 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 charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,64 @@ <!DOCTYPE html> <html> <head> <title>ReactDOM.render() - Clock - Demo 1</title> <style type="text/css"> html, body { width: 100%; height: 100%; margin: 0; padding: 0; } #root { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; background: #005AA7; background: -webkit-linear-gradient(to top, #FFFDE4, #005AA7); background: linear-gradient(to top, #FFFDE4, #005AA7); } .clock { width: 100%; font-family: sans-serif; font-size: 80px; font-variant-numeric: tabular-nums; color: #FFFFFF; text-align: center; } </style> </head> <body> <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <script type="text/babel"> class Clock extends React.Component { getTime() { const date = new Date(); const h = `0${date.getHours()}`.slice(-2); const m = `0${date.getMinutes()}`.slice(-2); const s = `0${date.getSeconds()}`.slice(-2); return `${h}:${m}:${s}`; } render() { const time = this.getTime(); return ( <div className="clock"> It's {time}. </div> ); } } ReactDOM.render(<Clock />, document.getElementById('root')); </script> </body> </html>