emersonbrogadev/README.MD

## README.MD

      
    Raw
  

              README.MD
            
          
    React Clock - uma demonstração do ReactDOM.render()

DEMO 1

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.
Video do projeto rodando


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

➜ Veja as dicas no Instagram
➜ Assita nosso canal no YouTube
➜ Curta nossa página no Facebook
➜ Não perca as atualizações no Twitter
➜ Veja os repositórios no Github

  
## index.html
<!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%;
      font-family: sans-serif;
      color: #FFFFFF;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      background: #ad5389;
      background: -webkit-linear-gradient(to right, #3c1053, #ad5389);
      background: linear-gradient(to right, #3c1053, #ad5389);
    }

    h1 {
      font-size: 60px;
      display: block;
    }

    span {
      font-size: 45px;
      display: block;
    }
  </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 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}`;
    }

    const clock = () => {
      const time = getTime();
      const element = (
        <div className="clock">
          It's {time}.
        </div>
      );
      ReactDOM.render(element, document.getElementById('root'));
    }

    setInterval(clock, 1000);
  </script>
</body>
</html>
	<!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%;
	font-family: sans-serif;
	color: #FFFFFF;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	background: #ad5389;
	background: -webkit-linear-gradient(to right, #3c1053, #ad5389);
	background: linear-gradient(to right, #3c1053, #ad5389);
	}

	h1 {
	font-size: 60px;
	display: block;
	}

	span {
	font-size: 45px;
	display: block;
	}
	</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 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}`;
	}

	const clock = () => {
	const time = getTime();
	const element = (
	<div className="clock">
	It's {time}.
	</div>
	);
	ReactDOM.render(element, document.getElementById('root'));
	}

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