Entre para a LISTA VIP da Black Friday

00

DIAS

00

HORAS

00

MIN

00

SEG

Clique para saber mais
69h

Para conclusão

7
Cursos
2
Vídeos extras
5
Artigos
O que você vai aprender nesta Formação?

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?

  • Vinicios Neves

    Vinicios Neves, Tech Lead e Educador, mistura código e didática há mais de uma década. Especialista em TypeScript, lidera equipes full-stack em Lisboa e inspira futuros desenvolvedores na FIAP e Alura. Com um pé no código e outro no ensino, ele prova que a verdadeira engenharia de software vai além das linhas de código. Além de, claro, ser senior em falar que depende.

  • Vinicios Neves

    Vinicios Neves, Tech Lead e Educador, mistura código e didática há mais de uma década. Especialista em TypeScript, lidera equipes full-stack em Lisboa e inspira futuros desenvolvedores na FIAP e Alura. Com um pé no código e outro no ensino, ele prova que a verdadeira engenharia de software vai além das linhas de código. Além de, claro, ser senior em falar que depende.

  • Geovane Fedrecheski

    Geovane pesquisa e desenvolve soluções e protocolos, com foco em segurança pra Internet das Coisas. Bacharel em Ciência da Computação e Doutor em Engenharia Elétrica, já trabalhou com Android quando a LG ainda fazia smartphones, já fez uns backend aqui e uns frontend acolá, e hoje seu foco é em software embarcado (IoT). Colabora com a Alura desde 2022, além de também ser engenheiro pesquisador no Instituto Nacional de Pesquisa em Computação e Automação (Inria), na França.

  • Geovane Fedrecheski

    Geovane pesquisa e desenvolve soluções e protocolos, com foco em segurança pra Internet das Coisas. Bacharel em Ciência da Computação e Doutor em Engenharia Elétrica, já trabalhou com Android quando a LG ainda fazia smartphones, já fez uns backend aqui e uns frontend acolá, e hoje seu foco é em software embarcado (IoT). Colabora com a Alura desde 2022, além de também ser engenheiro pesquisador no Instituto Nacional de Pesquisa em Computação e Automação (Inria), na França.

  • Luiz Fernando Ribeiro

  • Luiz Fernando Ribeiro

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

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

  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.

    • 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

      10h
      • Compreenda a arquitetura e os conceitos fundamentais do protocolo HTTP
      • Implemente o HTTPS para proteger os dados de uma aplicação durante a comunicação na web
      • Explore os principais avanços trazidos pelo HTTP/2 e HTTP/3 para otimizar a performance
      • Desvende os componentes das mensagens HTTP, como requisições, respostas e cabeçalhos
      • Entenda o que são URLs e domínios na web

    • 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

  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.

    • 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

  5. 5 Cuide da performance em React

    Lidar com aplicações maiores sempre requer um pouco mais de atenção. Nesses casos é sempre bom conhecer o leque de ferramentas do React relacionados a performance. Nesse passo da formação você vai poder mergulhar mais fundo nos tópicos deste assunto.

    • Curso React: otimizando a performance

      08h
      • Saiba como analisar componentes e páginas que podem ser mais performáticas
      • Conheça a fundo como o React renderiza seus componentes, também termos como Virtual DOM e Reconciliation.
      • Aprenda como memoização e imutabilidade se complementam e porque eles são tão importantes no universo React
      • Entenda diferenças entre memo e useMemo e quando utilizar cada um deles
      • Utilize a extensão React Devtools de forma prática para analisar tempos de renderização de componentes e o motivo dos componentes estarem atualizando

    • Alura+ Hooks do React: useCallback

    • Site 7 days Of Code | Alura

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

Comece a estudar agora na maior escola de tecnologia do país

Conheça os Planos para Empresas

Cursos

Cursos de Programação
Lógica | Python | PHP | Java | .NET | Node JS | C | Computação | Jogos | IoT
Cursos de Front-end
HTML, CSS | React | Angular | JavaScript | jQuery
Cursos de Data Science
Ciência de dados | BI | SQL e Banco de Dados | Excel | Machine Learning | NoSQL | Estatística
Cursos de Inteligência Artificial
IA para Programação | IA para Dados
Cursos de DevOps
AWS | Azure | Docker | Segurança | IaC | Linux
Cursos de UX & Design
Usabilidade e UX | Vídeo e Motion | 3D
Cursos de Mobile
Flutter | iOS e Swift | Android, Kotlin | Jogos
Cursos de Inovação & Gestão
Métodos Ágeis | Softskills | Liderança e Gestão | Startups | Vendas

Cursos universitários FIAP

Graduação | Pós-graduação | MBA