Guia do React Para Iniciantes

Preparei este guia para treinar você em sua jornada com React.js no mercado, com os conceitos mais usados em React.js e com conteúdo extra!😄

Aprender

Cada módulo do guia, terá sua instrução de como deve ser feito e a gente vai ver os seguintes módulos

• Conhecendo o React
• Interfaces
• Arquitetura em React
• Respeitando o código
• Testes em React
• Projetos Legados
• Projeto Final

Módulo 1 - Conhecendo o React

Primeiro passo antes de caminhar para coisas mais complexas é intender como os CONCEITOS de frontend se aplicam no React. Porque na realidade os conceitos não mudam. Então é fundamental entender como funciona a sintaxe do React, a criação de componentes e utilização de componentes, a manipulação de rotas com react, hooks, lidar com estados, reatividade e fluxo de renderização de componentes.

Módulo 2 - Interfaces

Com o React, é possível criar uma variedade de interfaces de usuário, desde páginas simples até aplicações mais complexas como SPAs. O React permite uma construção de interface declarativa e eficiente, o que é ideal para criar interfaces responsivas e de alta performance. Então é fundamental saber como criar essas interfaces porque vai compor grande parte do teu uso com essas ferramenta.

Módulo 3 - Arquitetura em React

A arquitetura em React é baseada em componentes reutilizáveis e independentes, o que permite uma organização eficiente do projeto. A utilização de Hooks e Context API também ajuda na organização e reutilização do código, além de permitir uma melhor gestão de estado da aplicação.

Além da arquitetura é importante conhecer padrões usados no React e como estruturar componentes no seu APP.

Módulo 4 - Respeitando o código

O React possui diversas boas práticas que devem ser seguidas para garantir uma aplicação robusta e escalável. Algumas das boas práticas incluem a utilização de componentes reutilizáveis, evitar manipulação direta do DOM e a utilização de Hooks para gerenciamento de estado.

Módulo 5 - Testes em React

Os testes são uma parte fundamental da construção de uma aplicação robusta e escalável. O React possui diversas ferramentas para testes, incluindo o Jest e o meu mais recente amigo VITEST. Os testes podem ser realizados em diversos níveis, incluindo testes unitários, testes de integração e testes end-to-end.

Módulo 5 - Projetos Legados

Projetos legados podem apresentar desafios adicionais na construção de aplicações em React. É importante entender as tecnologias e padrões utilizados na aplicação legada para conseguir integrar o React de forma eficiente. Tente fazer alguma participação num projeto antigo de react porque grande parte dos projetos hoje estão constuidos sobre praticas legadas. E de certeza em alguma empresa por aí que vai te contratar esteja usando versões antigas e a sua responsabilidade será atualizar esse sistema para versões mais atuais.

Módulo 5 - Projeto Final

• Comece pequeno, faça um projeto onde vc consiga usar as principais funcionalidades do react e entender elas !
• Comece a criar interfaces com react, até se sentir confortável
• Organize o seu código, talvez até no projeto anterior. Separando os componentes de forma reúsavel ou até usando um ATOMIC DESIGN ou estrutando o seu app de uma forma organizada.
• Aprenda as boas práticas e aplique nesse seu projeto. Conheça os padrões mais usados no react e entenda eles.
• Até esse momento vc já construiu algo mais proximo do mundo real. Aplique testes automatizados. Teste seus componentes, suas funcionalidades e seus fluxos. Depois disso sim. Se marcou todos checks acima, vc está mais do preparado para atuar com React.
• Agora vai seguindo por dar uma participação em pelo menos 1 projeto legado em react e BOA SORTE !