30h

Para conclusão

3
Cursos
1
Podcast
2
Artigos

Criando uma aplicação acessível com JavaScript, Emotion e React Router

Implemente um design system com React, atribuindo componentes de interface do usuário reutilizáveis e acessíveis para aplicativos web. Você aprenderá as boas práticas de codificação, bem como criar componentes de interface limpos e bem estruturados, e garantir que esses componentes sejam acessíveis para usuários com necessidades especiais. Também é possível aprender sobre ferramentas e técnicas para testar e validar a acessibilidade dos componentes e implementar soluções de acessibilidade em um sistema de design existente.

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?

  • Mônica Mazzochi Hillman

    Bacharela em Tecnologias Digitais, especialista em User Experience e pós graduanda em Docência e Performance na Educação a Distância com experiência em suporte técnico de T.I e com tecnologias front-end. Atualmente é Tech Community Manager na Magalu Cloud e instrutora na Alura. Nas horas vagas gosta de assistir animes e produções da marvel, ouvir kpop e post-hardcore, jogar Valorant e TFT.

  • Mônica Mazzochi Hillman

    Bacharela em Tecnologias Digitais, especialista em User Experience e pós graduanda em Docência e Performance na Educação a Distância com experiência em suporte técnico de T.I e com tecnologias front-end. Atualmente é Tech Community Manager na Magalu Cloud e instrutora na Alura. Nas horas vagas gosta de assistir animes e produções da marvel, ouvir kpop e post-hardcore, jogar Valorant e TFT.

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

Passo a passo
  1. 1 Fundamentos de React, Emotion e React Router para desenvolvimento acessível

    Você aprenderá a desenvolver componentes customizados e acessíveis com as bibliotecas Emotion e React. Serão abordados conceitos importantes como importação de fontes, uso de sistema de grids (com o react-grid-system), aplicação de estilos globais com Emotion, utilização de temas e outras técnicas que permitem criar componentes com um design atrativo e uma estrutura acessível para pessoas de diferentes perfis.

    Ao final, você terá aprendido a criar componentes personalizados e acessíveis com React e Emotion, que serão utilizados ao longo da formação na construção da aplicação.

    • Curso React: desenvolvendo componentes customizados e acessíveis com Emotion

      10h
      • Prototipe uma página usando React
      • Selecione bibliotecas de apoio ao layout
      • Integre o Emotion para etilizar componentes
      • Implemente componentes visuais baseado no Figma
      • Compreenda os problemas de layout utilizando um sistema de Grid
    • Curso React: arquitetando soluções de roteamento e gestão de estado com React Router e Context API

      08h
      • Implemente o roteamento de uma aplicação React com os benefícios do React Router v6,4
      • Modifique uma aplicação existente ao adicionar novas funcionalidades
      • Descreva vários cenários onde é necessária uma gestão de estado
      • Idealize uma boa arquitetura de rotas aninhadas
      • Elabore validações de estados globais
    • Site Acessibilidade web - Hipsters #21 - Hipsters Ponto TechHipsters Ponto Tech

    • Artigo O que é acessibilidade na web? | Alura

  2. 2 Lidando com mudanças e evoluindo a aplicação

    Neste estágio da sua jornada, você vai dominar a arte de adaptar e fazer a sua aplicação React crescer. Vamos explorar juntos várias facetas desse universo, navegando desde as nuances entre o Create React App (CRA) e o Vite, até as tendências mais recentes que moldam o ecossistema React. E tem mais!

    Vamos mergulhar profundamente na diversidade de autenticações de aplicações React e até implementar a autenticação baseada em token, equipando você com mais uma habilidade essencial no seu arsenal de desenvolvimento.

    E sabe o que é melhor? Você também vai descobrir como usar os interceptors do Axios numa aplicação React para gerenciar esses tokens de autenticação. Isso significa que você estará pronto para permitir que os usuários acessem endpoints protegidos da API após o login, tornando suas aplicações ainda mais robustas e seguras.

    Então, você está pronto para esta aventura?

    • Curso React: migrando para o Vite e implementando autenticação baseada em Token

      10h
      • Reconheça as diferenças entre o Create React App (CRA) e o Vite, incluindo como cada um se integra a um projeto React existente
      • Compreenda os diferentes tipos de autenticação de aplicativos React, como autenticação baseada em token, autenticação baseada em sessão e autenticação social
      • Aplique interceptors do Axios em uma aplicação React para lidar com autenticação, permitindo que o usuário acesse rotas protegidas após o login
      • Analise como lidar com refresh tokens em uma aplicação React, incluindo quando renovar o token e como armazenar o token atualizado no armazenamento local
      • Avalie as melhores práticas para lidar com bearer tokens em uma aplicação React, incluindo a forma de garantir que o token seja passado corretamente em cada solicitação
      • Crie um plano de recuperação de erros para lidar com erros 401 em uma aplicação React que usa refresh tokens e interceptors do Axios, garantindo que o usuário possa continuar usando o aplicativo sem interrupções
    • Podcast Estado do ecossistema React 2023 – Hipsters Ponto Tech #354

    • Artigo A evolução do desenvolvimento React: porque outras ferramentas estão ganhando espaço sobre o create-react-app

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