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!😄
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
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.
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.
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.
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.
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.
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.
- 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 !