Escola_
Front-end
Além dessa, a categoria Front-end conta com cursos de HTML, CSS, React, Angular, JavaScript, jQuery,e mais...
formação_
Aprenda a biblioteca mais usada em desenvolvimento Front-end
Esta formação faz parte dos nossos cursos de Front-end
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
Esta formação foi criada em parceria com o Nubank.
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 planosEmpresas que utilizam essa formação no treinamento de suas equipes
Algum texto para linkar com Alura empresas
Professores especializados Front-end
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
Vinny 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.
-
Vinny 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
Crie um projeto do zero 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 lidar com diferentes tipos de arquivos.
-
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
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 - 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
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, neste 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 - 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
Chegou a hora de dar um mergulho mais profundo e aprender na prática como implementar testes no React. Você verá como utilizar o Jest para realizar asserções, diferentes tipos de testes e como aplicá-los, além de saber quais os benefícios que os exemplos apresentados fornecem.
-
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:
-
nossos alunos e alunas
Experiências de quem já mergulhou com a gente.
Ótimo curso, me surpreendeu bastante! Sou iniciante na área e me trouxe muito conhecimento e assuntos que não sabia.
HTTP: Entendendo a web por baixo dos panos
Vitória Mariano da Silva
Comece hoje mesmo os cursos de React com TypeScript. Matricule-se agora!
Plus
- Acesso a TODOS os cursos da plataforma
Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.
- Alura Challenges
Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.
- Alura Cases
Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.
- Certificado
Emitimos certificados para atestar que você finalizou nossos cursos e formações.
- Alura Língua (incluindo curso Inglês para Devs)
Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.
12X
Matricule-se
R$85
à vista
R$1.020
Pro
- Acesso a TODOS os cursos da plataforma
Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.
- Alura Challenges
Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.
- Alura Cases
Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.
- Certificado
Emitimos certificados para atestar que você finalizou nossos cursos e formações.
- Alura Língua (incluindo curso Inglês para Devs)
Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.
12X
Matricule-se
R$120
à vista
R$1.440
Acesso completo
durante 1 ano
Estude 24h/dia
onde e quando quiser
Novos cursos
todas as semanas