💻 Conheça a Formação em Desenvolvimento Web 💻
refatorando.com.br/desenvolvi...
🚀 Mergulhe nos nossos eBooks repletos de insights valiosos e junte-se à nossa comunidade no Discord, onde o aprendizado se torna uma experiência coletiva e inspiradora.
✅ Ebook: Como usar a ChatGPT para aprender a programação: refatorando.com.br/m3m8
✅ Ebook: Como encontrar as melhores vagas em TI: refatorando.com.br/sygl
✅ Ebook: Como se destacar em processos seletivos de TI: refatorando.com.br/ajnw
✅ Faça parte da nossa comunidade no Discord: / discord
⏱️ Tópicos principais:
00:00 - Introdução
00:15 - Transpilação do TSX para JavaScript
00:55 - Gerenciamento de Estado
01:50 - Renderização no React
02:08 - Ciclo de Vida de um Componente
🏆 VÍDEOS MAIS ASSISTIDOS DO CANAL 🏆
5 motivos para fazer Análise e Desenvolvimento de Sistemas
👉 • 5 motivos para fazer A...
Vale a pena fazer Engenharia de software?
👉 • Vale a pena fazer Enge...
TOP 5 áreas de TI mais valorizadas no Brasil hoje
👉 • TOP 5 áreas de TI mais...
Como criar um portfólio de programação sem experiência profissional?
👉 • Como criar um portfóli...
_________________________________________________________________________
Aula 5 - Como React Funciona
Na aula de hoje, vamos entender um pouco dos bastidores do React. Você já criou seu primeiro componente na aula anterior, e deve estar curioso para saber como a magia acontece por trás das cortinas. Como o código que você escreve em TSX é transformado e acaba sendo renderizado na tela? Essas são questões fascinantes que revelam a eficiência e a elegância do React.
Transpilação do TSX para JavaScript:
O primeiro passo no processo de renderização é a transpilação do seu código TSX para JavaScript. O TSX, que é uma sintaxe especial que mistura JavaScript com HTML, não é entendido pelos navegadores. Então, precisamos de uma ferramenta chamada Babel para transformar nosso código TSX em JavaScript puro, que pode ser interpretado pelos navegadores. Esse processo é feito automaticamente quando você executa seu projeto React.
Agora que temos um JavaScript interpretável, o próximo passo é entender como o React gerencia o estado dos nossos componentes.
Gerenciamento de Estado:
No React, o estado de um componente é o que determina o que é renderizado na tela. Cada vez que o estado de um componente muda, o React re-renderiza esse componente. Mas, ao contrário do que você pode estar pensando, essa re-renderização é altamente eficiente. E isso é possível graças ao que é chamado de Virtual DOM, um tópico que vamos explorar com mais profundidade na próxima aula.
Renderização no React:
O processo de renderização no React começa quando há uma mudança no estado ou nas propriedades de um componente. O React cria uma árvore de componentes que representa a estrutura da sua interface. Quando o estado de um componente muda, o React compara a árvore de componentes atual com a árvore anterior e determina quais componentes precisam ser atualizados na tela.
Ciclo de Vida de um Componente:
No React, cada componente tem um ciclo de vida que você pode monitorar e manipular através de diferentes fases. As três fases principais são: Montagem, Atualização, e Desmontagem. Durante essas fases, há métodos do ciclo de vida que são chamados e podem ser usados para controlar o comportamento do componente.
Nesta aula, aprendemos o processo pelo qual o React interpreta e renderiza os componentes na tela. Ao compreender o ciclo de vida de um componente e o processo de transpilação e renderização, você agora pode entender o que acontece por trás das cortinas quando seu código é executado. Na próxima aula, vamos aprofundar nosso entendimento sobre o Virtual DOM, uma parte crucial que torna o React eficiente e poderoso. Até lá!
_________________________________________________________________________
Compatilhe esse vídeo com mais pessoas: • Aula 5 - Como React Fu...
▶ Increva-se no canal: / @refatorando
▶ Siga-nos no Instagram: / refatorandobr
▶ Siga-nos no Linkedin: / refatorando
▶ Email para contato: contato@refatorando.com
27 июл 2024
