2
respostas

[Dúvida] Dificuldade para entender o mecanismo principal do React

Boa tarde, tudo bem?

Eu me empaquei nessa mecânica dos useState, hooks e o ciclo de vida dos componentes...

De uma forma resumida, o React funciona com eventos certo? (Eventos seriam os DOMS do Javascript? Pequei em não pegar essa parte...)

Daí eu pego esses esses eventos com os hooks para renderizar conforme eventos?

Estou perdido sem entender por onde começa e por onde termina a mecânica toda... Estou vindo de vanilla literalmente, então como que devo pensar dentro do React?

2 respostas

Olá, Rodrigo. Como vai?

Eu sou estudante aqui da Alura também, mas faço estágio como dev front react e acho que consigo te ajudar com suas dúvidas.

Antes de tudo, eu acho importante a gente entender a motivação por baixo da contrução do React. De modo sucinto, ele surgiu para resolver problemas como: centralizar componentes (ou funcionalidades) que serão utilizadas em diversas partes da aplicação através de um único código, facilitar o gerenciamento de estados e o Virtual DOM que foi construido para não modificar diretamente a DOM, pois fazer isso é um processo demorado e se precisarmos atualizar muitas coisas ao mesmo tempo, teremos problemas de performance.

Agora respondendo sua pergunta: Sim, o React funciona com a manipulação de eventos, mas a dinâmica é um pouco diferente do Javascript vanilla. No React a gente não manipula diretamente a DOM e sim o Virtual DOM que é uma representação em memória da DOM, porque ele é mais rápido de ser acessado.

Com isso, a gente consegue manipular os estados de diversos modos no react, criando uma função e passando ela para algum botão por exemplo, ou utilizando os hooks.

Sobre os hooks existem diversos e cada um possui uma função diferente, temos o useState que é utilizado para monitorar e modificar, caso necessário, o comportamento/valor do componente ou campo que ele é responsável por controlar.

Eu recomendo você a pesquisar mais sobre a motivação da criação do React antes de entrar no código e, após entender a base disso, ler a documentação do React (que é muito boa e tem explicação com exemplos de cada hook), assistir as aulas do curso aqui na Alura e praticar com exemplos simples para entender a dinâmica. Foi o que funcionou para mim.

Links que podem ajudar:

  1. https://tableless.com.br/guia-completo-react-ecossistema/
  2. https://www.treinaweb.com.br/blog/o-que-e-dom-virtual-dom-e-shadow-dom
  3. https://reactjs.org/docs/getting-started.html

Se ficou com alguma dúvida é só dizer. Abraços e bons estudos!