Formação React com TypeScript

Passo a passo

1. 1 Primeiro mergulho no React

   Aprenda a criar um projeto do zero com React e Typescript, utilizando props e state para aprender sobre componentização e boas práticas, evitando problemas de sobreposição de CSS com CSS Modules e refatorando class components para function components.

   Além disso, você irá aprender como lidar com arquivos estáticos no React. Comece criando um projeto do zero com Create React App, aprenda como utilizar pacotes como o classnames e entenda como o React lida com diferentes tipos de arquivos.

   • 

     Curso Fundamentos de React: escrevendo com Typescript

     12h

   Faça esse curso e:

   • Crie um projeto React com Typescript do zero com Create React App
   • Entenda conceitos de React como Componentização, Props e State
   • Evite sobreposições de CSS com CSS Modules
   • Aprenda sobre os hooks useState e useEffect e entenda como eles eram usados nos class components
   • Deixe seu código mais limpo e documentado com a forma mais atual de se escrever React
   • Desenvolva seu código com conceitos de boas práticas como DRY (Don't repeat yourself) e SRP (Single Responsibility Principle)

   Mais detalhesdo curso Fundamentos de React: escrevendo com Typescript

   • 

     Artigo React Hooks: o que é e como eles funcionam | Alura Cursos Online

   • 

     Artigo NPM vs Yarn | Alura Cursos Online

   • 

     Curso React: lidando com arquivos estáticos

     10h

   Faça esse curso e:

   • Crie um projeto do zero com Create React App
   • Aprenda a utilizar o normalize.css para resetar estilos padrões de navegadores
   • Configure absolute imports para não precisar mais importar arquivos com vários níveis ('../../../')
   • Aprenda boas práticas em CSS como criar variáveis, criar arquivos para estas variáveis e para breakpoints de media-queries
   • Utilize o pacote classnames para poder utilizar o CSS Modules sem precisar concatenar um monte de estilos CSS e lidar com estilos condicionais
   • Aprenda como utilizar o SVGR, um pacote que vem no Create React App para importar svgs como componentes React
   • Entenda como o React entende os imports estáticos tanto via arquivos .js quanto em arquivos de estilos como .scss ou .css. Aprenda como importar arquivos estáticos como variáveis via js ou utilizando a pasta public para imports dinâmicos de arquivos estáticos

   Mais detalhesdo curso React: lidando com arquivos estáticos

2. 2 Trabalhando com Rotas

   Veja como o React lida com a manipulação de rotas utilizando React Router. Você irá aplicar na prática conceitos dessa biblioteca que possibilita a navegação fluida do usuário no navegador quando trabalhamos com Single Page Applications.

   • 

     Alura+ Ciclo de vida de um componente React

   • 

     Curso React: conhecendo a biblioteca React Router

     10h

   Faça esse curso e:

   • Saiba como refatorar um projeto utilizando ESLint
   • Desenvolva um código escalável, priorizando um código limpo e fácil de entender
   • Utilize o pacote react-router-dom de forma simples e prática, aprendendo todos os conceitos principais da biblioteca
   • Descubra como a biblioteca se integra com o navegador e utiliza de coisas nativas para mudar as rotas e compartilhar estados
   • Crie telas navegando entre elas de diversas formas diferentes e reaproveite componentes eles elas
   • Entenda sobre nested routes e como criá-las para reaproveitar código e resolver problemas

   Mais detalhesdo curso React: conhecendo a biblioteca React Router

   • 

     Artigo React: componentes com Styled Components | Alura Cursos Online

3. 3 Gerenciando estados

   Trazendo um exemplo próximo do dia a dia, aprenda como organizar a gestão de estado em uma aplicação React. Existem várias ferramentas disponíveis para isso, mas, nesse caso, utilizaremos o Recoil: uma das alternativas mais simples para a implementação de estados globais.

   • 

     Artigo REST: Conceito e fundamentos

   • 

     Curso React: integrando seu projeto React com APIs

     08h

   Faça esse curso e:

   • Desenvolva a comunicação entre uma aplicação React e uma API REST
   • Implemente hooks para buscar dados em uma API
   • Utilize o axios para realizar requisições HTTP
   • Avalie as informações da resposta da API
   • Integre o frontend ao backend
   • Descreva o funcionamento de uma API a partir do Swagger

   Mais detalhesdo curso React: integrando seu projeto React com APIs

   • 

     Curso HTTP: Entendendo a web por baixo dos panos

     14h

   Faça esse curso e:

   • Torne-se um programador web completo
   • Entenda os detalhes do protocolo HTTP
   • Saiba quando usar GET e POST
   • Estude sobre segurança na web e o HTTPS
   • A web stateful e a web stateless
   • Conheça as melhorias do HTTP/2

   Mais detalhesdo curso HTTP: Entendendo a web por baixo dos panos

   • 

     Curso React: gerenciando estado com Recoil

     08h

   Faça esse curso e:

   • Projete uma boa solução de gestão de estado com Recoil
   • Entenda todas as vantagens do Recoil
   • Extraia a comunicação com o recoil em hooks
   • Implemente os principais hooks do Recoil
   • Compare diferentes soluções de mercado para gestão de estado

   Mais detalhesdo curso React: gerenciando estado com Recoil

   • 

     Artigo Prop Drilling: o que é? | Alura Cursos Online

4. 4 Hora de praticar

   Chegou o momento de colocarmos em prática tudo que você viu nessa formação. Montar o seu portfólio e fixar todo o conhecimento que adquiriu com os professores e professoras da Alura. Nesse próximo passo você encontrará uma atividade do #7DaysOfCode que foi pensada por pessoas do mercado para que você resolva desafios comuns em qualquer empresa que trabalha com tecnologia.

   • 

     Site 7days Of Code | Alura