React

Uma introdução prática ao React em três partes: o que é a biblioteca, os recursos de JavaScript que ela usa o tempo todo e um primeiro projeto.

Nesta série

Uma olhada no React

Um exemplo com React puro. A própria documentação oferece um exemplo inicial sem precisar instalar nada (Installation, na documentação do React), só pra entender o funcionamento inicial da biblioteca.

pure-react.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>

    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

    <script>
      function App() {
        return React.createElement("header");
      }

      const root = ReactDOM.createRoot(document.getElementById("root"));
      root.render(React.createElement(App));
    </script>
  </body>
</html>

Esse exemplo acima apenas mostra o elemento header sendo renderizado na tela. Ou seja, estamos usando o react para criar um novo elemento HTML de forma dinâmica (através de código Javascript).

Como isso seria feito em Javascript puro?

A função createElement do React aceita mais valores como parâmetro. O primeiro parâmetro é o elemento HTML, o segundo as propriedades (props) e o terceiro é o filho do elemento.

<script>
  function App() {
    return React.createElement("header", null, "Hello World React");
  }

  const root = ReactDOM.createRoot(document.getElementById("root"));
  root.render(React.createElement(App));
</script>

Claro que até agora nada acontece. Apenas usamos uma maneira diferente de criar um elemento HTML e você pode estar se perguntando, então qual a utilidade do React? É uma ótima pergunta, para responder isso precisamos alterar o problema. Imagine que necessitamos criar um relógio que fica mostrando segundo a segundo. Ai introduzimos uma complexidade, precisamos alterar o código HTML do componente com um valor que fica alterando a cada 1 segundo. Conseguiríamos fazer isso com JavaScript puro? Com certeza, mas esse é o problema que o react vem resolver: *a alteração do estado de maneira automática.

Para isso acontecer precisamos entender um conceito importante chamado de estado. O estado nada mais é do que os dados naquele momento da aplicação. No caso do nosso exemplo o estado é o próprio tempo que muda a cada segundo. Esse estado precisa ser refletido na interface e é ai que o React poderá nos ajudar. O exemplo mostrado abaixo ilustra uma implementação pura em Javascript. A primeira vista pode parecer simples porém aqui estamos lidando manualmente com a alteração da interface. Veja que precisamos criar uma função que recebe o valor do estado através do objeto Date, procuramos um elemento no DOM com getElementById e fazemos sua alteração com o função textContent.

<script>
  function updateClock() {
    const date = new Date().toLocaleTimeString();
    document.getElementById("root").textContent = date;
  }

  setInterval(updateClock, 1000);
</script>

Vamos ver agora o mesmo exemplo utilizando o React:

<script>
  function App() {
    const [time, setTime] = React.useState(new Date().toLocaleTimeString());

    React.useEffect(() => {
      const interval = setInterval(() => {
        setTime(new Date().toLocaleTimeString());
      }, 1000);
    }, []);

    return React.createElement("header", null, `Hello World React! It's ${time}`);
  }

  const root = ReactDOM.createRoot(document.getElementById("root"));
  root.render(React.createElement(App));
</script>

Aqui nesse exemplo introduzimos várias partes novas sobre o React, mas não se preocupe que vamos entrar em detalhes em cada uma dessas partes. A principio pode parecer mais complicado comparando-se com o código puro, porém nosso exemplo é muito simples e a medida que a aplicação vai crescendo a vantagem de utilização do framework fica mais claro.

Próximo: Conceitos de JavaScript para React