formação_

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
75h

Para conclusão

7
Cursos
1
Vídeo extra
5
Artigos

Assista 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

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

  • 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. 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
    • 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)
    • 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
  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.

  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, neste caso, utilizaremos o Recoil: uma das alternativas mais simples para a implementação de estados globais.

  4. 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.

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
R$85
à vista R$1.020
Matricule-se

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
R$120
à vista R$1.440
Matricule-se
Conheça os Planos para Empresas

Acesso completo
durante 1 ano

Estude 24h/dia
onde e quando quiser

Novos cursos
todas as semanas