Formações Front-end React com TypeScript
Formação React com TypeScript
Aprenda a biblioteca mais usada em desenvolvimento Front-end
* Esta formação faz parte dos nossos cursos de Front-end
Quero estudar na alura
75h
Para conclusão
7
Cursos
1
Vídeo extra
5
ArtigosAssista o vídeo
veja nossa apresentação da Formação e uma Alura Live sobre a Carreira em Front-end
React com TypeScript
O que é o React?
O React é a biblioteca JavaScript mais popular em desenvolvimento Front-End na atualidade. O que faz esta biblioteca ser tão amada é que ela traz uma maneira simplificada para a criação de interfaces de usuário, além de possibilitar uma atualização e renderização eficientes dos componentes necessários à medida que os dados mudam.
Como o React surgiu?
Surgiu da dificuldade do time do Facebook em sincronizar os diversos eventos que ocorriam ao mesmo tempo na tela da rede social (pop-ups, chat, lista de amigos etc), porque a lógica ficava muito complexa para fazer a página atualizar todos os elementos simultaneamente. O que começou a ser resolvido mais tarde com o gerenciamento (alteração) de estado.
Como o React funciona?
O React trabalha de forma declarativa e flexível, possibilitando a criação de interações complexas.
O que é Styled Components e Recoil?
Ambas são bibliotecas que beneficiam o trabalho com React, enquanto com a primeira é possível fazer CSS no JavaScript (CSS-in-JS), a segunda se trata é para o gerenciamento de estados.
Como o React melhora com o Typescript?
Somado ao TypeScript, a pessoa desenvolvedora consegue otimizar o seu código, identificando e prevenindo erros durante o desenvolvimento, além de possuir uma flexibilidade maior para trabalhar com tipagem.
Quais conhecimentos ter para aprender React?
Antes de mergulhar no mundo React, é importante ter conhecimento em HTML, CSS, JavaScript e TypeScript. Conhecer Git e versionamento de código também será muito valioso para aproveitar a formação.
Por que estudar esta formação?
Guia de aprendizado
Conteúdos pensados para facilitar seu estudo
Do básico ao avançado
Formação completa para o mercado
Você dentro do mercado
Do zero ao sonhado emprego em sua área de interesse
Comece essa formação agora mesmo e capacite-se para seu próximo projeto!
Conheça os planos
Com quem você vai aprender?
Fábio Pimentel
Fábio é desenvolvedor full-stack com foco em Android (Java e Kotlin) e Ruby on Rails, formado pela UFRJ. É ativo na comunidade, palestrou na CocoaHeads e na Mobile Conf.
-
Fábio Pimentel
Fábio é desenvolvedor full-stack com foco em Android (Java e Kotlin) e Ruby on Rails, formado pela UFRJ. É ativo na comunidade, palestrou na CocoaHeads e na Mobile Conf.
Luiz Fernando Ribeiro
-
Luiz Fernando Ribeiro
Vinicios Neves
Vinicios é engenheiro de software, envolvido na arquitetura, design e implementação de microsserviços, micro frontends e sistemas distribuídos. Tem experiência significativas em aplicativos, integração e arquitetura corporativa. É Engenheiro de Software pela UNESA e Arquiteto de Software pela PUC Minas.
-
Vinicios Neves
Vinicios é engenheiro de software, envolvido na arquitetura, design e implementação de microsserviços, micro frontends e sistemas distribuídos. Tem experiência significativas em aplicativos, integração e arquitetura corporativa. É Engenheiro de Software pela UNESA e Arquiteto de Software pela PUC Minas.
Passo a passo
1 Primeiro mergulho no React
-
Curso React: escrevendo com Typescript
12h - 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)
-
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 - 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
Faça esse curso e:
Faça esse curso e:
-
2 Trabalhando com Rotas
-
Alura+ Ciclo de vida de um componente React
-
Curso React: conhecendo a biblioteca React Router
10h - 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
-
Artigo React: componentes com Styled Components | Alura Cursos Online
Faça esse curso e:
Mais detalhesdo curso React: conhecendo a biblioteca React Router
-
3 Gerenciando estados
-
Artigo REST: Conceito e fundamentos
-
Curso React: integrando seu projeto React com APIs
08h - 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
-
Curso HTTP: Entendendo a web por baixo dos panos
14h - 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
-
Curso React: gerenciando estado com Recoil
08h - 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
-
Artigo Prop Drilling: o que é? | Alura Cursos Online
Faça esse curso e:
Mais detalhesdo curso React: integrando seu projeto React com APIs
Faça esse curso e:
Mais detalhesdo curso HTTP: Entendendo a web por baixo dos panos
Faça esse curso e:
-
4 Testando componentes em React
-
Site 7days Of Code | Alura
-
Curso React: testando os seus componentes
10h - Implemente testes que garantem o comportamento dos componentes
- Utilize o Jest para realizar asserções
- Descreva a técnica TDD
- Explique os diferentes tipos de testes
- Reconheça os benefícios dos testes
Faça esse curso e:
-
Escola
Front-end
Além dessa, a categoria Front-end conta com cursos de HTML, CSS, React, Angular, JavaScript, jQuery,e mais...
Conheça a Escola
