Skip to content

Instantly share code, notes, and snippets.

@emersonbrogadev
Last active August 31, 2019 18:54

Revisions

  1. emersonbrogadev revised this gist Aug 31, 2019. 1 changed file with 25 additions and 2 deletions.
    27 changes: 25 additions & 2 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,7 @@
    <!DOCTYPE html>
    <html>
    <head>
    <title>ReactDOM.render() - Clock - Demo 1</title>
    <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 = new Date();
    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);
  2. emersonbrogadev created this gist Aug 31, 2019.
    32 changes: 32 additions & 0 deletions README.MD
    Original 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
    ![React Clock](https://s3.amazonaws.com/s3.emerson.link/prints/2019-08-31-143055-1k3ni.png)

    #### 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>
    64 changes: 64 additions & 0 deletions index.html
    Original 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>