Skip to content

Instantly share code, notes, and snippets.

@emersonbrogadev

emersonbrogadev/README.MD

Last active August 30, 2019 13:45
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save emersonbrogadev/df1365d00b8dbfb197d1dadd7e75f0ed to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save emersonbrogadev/df1365d00b8dbfb197d1dadd7e75f0ed to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. emersonbrogadev revised this gist Aug 30, 2019. 1 changed file with 3 additions and 0 deletions.
    3 changes: 3 additions & 0 deletions README.MD
    View file
    Original file line number Diff line number Diff line change
    @@ -12,6 +12,9 @@ Esse código é apenas para fins educativos e foi formatado de forma a exemplifi

    Baixe o html abaixo e abra no browser.

    ### Video do projeto rodando
    [![React Clock](http://i3.ytimg.com/vi/bGA3ZycFq84/maxresdefault.jpg)](https://www.youtube.com/watch?v=bGA3ZycFq84)

    #### Se ainda não segue, conheça as nossas Redes Sociais

    [➜ Veja as dicas no Instagram](https://www.instagram.com/emersonbrogadev/)
  2. emersonbrogadev revised this gist Aug 30, 2019. 1 changed file with 29 additions and 1 deletion.
    30 changes: 29 additions & 1 deletion README.MD
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1,29 @@
    Clock Demo 2
    # React Clock - uma demonstração do ReactDOM.render()

    ### DEMO 2

    O conteúdo aqui apresentado é para exemplificar o funcionamento do ReactDOM.render() e como funciona Virutal DOM 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 e a forma como foi escrito não é necessáriamente o mais indicado para projetos reais.

    ### Rodando o Projeto

    Baixe o html abaixo e abra no browser.

    #### 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>
  3. emersonbrogadev created this gist Aug 30, 2019.
    1 change: 1 addition & 0 deletions README.MD
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    Clock Demo 2
    65 changes: 65 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,65 @@
    <!DOCTYPE html>
    <html>
    <head>
    <title>ReactDOM.render() - Clock - DEMO 2</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">
    const getHours = () => `0${(new Date()).getHours()}`.slice(-2);
    const getMinutes = () => `0${(new Date()).getMinutes()}`.slice(-2);
    const getSeconds = () => `0${(new Date()).getSeconds()}`.slice(-2);

    const clock = () => {
    const h = getHours();
    const m = getMinutes();
    const s = getSeconds();

    const element = (
    <div className="clock">
    It's {h}:{m}:{s}.
    </div>
    );

    ReactDOM.render(element, document.getElementById('root'));
    }

    setInterval(clock, 1000);
    </script>
    </body>
    </html>