03 ReactDom

React Dom

React DOM é uma biblioteca JavaScript usada para manipular elementos HTML e renderizar componentes React na árvore de elementos DOM (Document Object Model) do navegador. Ela é responsável por criar e atualizar elementos HTML baseados em componentes React, gerenciando o estado da ap

render

O React DOM trabalha em conjunto com o React, permitindo que você crie componentes com código JSX e, em seguida, os renderize na página usando o método ReactDOM.render(). Esse método recebe dois argumentos: o primeiro é o componente React que você deseja renderizar, e o segundo é o elemento HTML na página em que você deseja renderizá-lo.

O método render é usado para renderizar a aplicação React em um elemento HTML existente na página. Ele é tipicamente usado no lado do servidor, ou em casos em que o aplicativo é renderizado completamente do zero, sem qualquer pré-renderização.

  import React from 'react';
  import ReactDOM from 'react-dom';

  function App() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <p>Welcome to my React app.</p>
      </div>
    );
  }

  ReactDOM.render(<App />, document.getElementById('root'));

Neste exemplo, o componente App é renderizado dentro do elemento HTML com o ID "root" usando o método ReactDOM.render(). Quando a página é carregada, o método render() é chamado para criar uma nova árvore de elementos HTML baseados no componente App e adicioná-la à árvore de elementos DOM do navegador.

Além disso, o React DOM também oferece métodos para atualizar a interface do usuário quando o estado da aplicação muda. Por exemplo, o método ReactDOM.render() pode ser chamado novamente com um novo estado para atualizar a interface do usuário. Além disso, existem outros métodos, como ReactDOM.hydrate() e ReactDOM.unmountComponentAtNode(), que são usados para hidratar e remover componentes React do DOM, respectivamente.

hydrate

O método hydrate, por outro lado, é usado para fazer uma "reconstrução hidratada" da aplicação React em um elemento HTML existente na página. Ele é tipicamente usado quando a aplicação é pré-renderizada no servidor, mas precisa ser "hidratada" no cliente para torná-la interativa.

A reconstrução hidratada é quando o React detecta o HTML pré-renderizado no servidor e "hidrata" os componentes, adicionando eventos e comportamentos interativos à aplicação. Isso é útil para melhorar a velocidade de carregamento e a experiência do usuário, pois a página pode ser visualizada instantaneamente com o HTML pré-renderizado enquanto o JavaScript é baixado e executado em segundo plano para tornar a aplicação completamente interativa.

O método hydrate é semelhante ao método render, mas em vez de criar novos elementos HTML, ele adiciona comportamentos interativos aos elementos HTML existentes na página. Por exemplo, se você tiver um botão que deve exibir uma mensagem quando clicado, o método hydrate adicionaria um evento de clique a esse botão para exibir a mensagem quando necessário.

  import React from 'react';
  import ReactDOM from 'react-dom';

  function App() {
    const [count, setCount] = React.useState(0);

    return (
      <div>
        <h1>Counter</h1>
        <p>Count: {count}</p>
        <button onClick={() => setCount(count + 1)}>Increment</button>
      </div>
    );
  }

  ReactDOM.hydrate(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
    document.getElementById('root')
  );

Neste exemplo, o método ReactDOM.hydrate é usado para hidratar um componente App que foi pré-renderizado no servidor. O componente possui um contador que é atualizado quando um botão é clicado. O método hydrate adicionará os comportamentos interativos necessários ao HTML pré-renderizado, tornando-o totalmente interativo.