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. Durante a graduação foi vice-presidente do diretório acadêmico e monitora de LIBRAS. Atualmente é instrutora na Alura. Nas horas vagas gosta de assistir animes e produções da marvel, ouvir kpop e post-hardcore, jogar Valorant e Genshin Impact e praticar culinária.

  • 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. Durante a graduação foi vice-presidente do diretório acadêmico e monitora de LIBRAS. Atualmente é instrutora na Alura. Nas horas vagas gosta de assistir animes e produções da marvel, ouvir kpop e post-hardcore, jogar Valorant e Genshin Impact e praticar culinária.

  • 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 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 hoje mesmo os cursos de Criando uma aplicação acessível com JavaScript, Emotion e React Router. Matricule-se agora!

Plus

De
R$ 1.800
12X
R$109
à vista R$1.308
  • Acesso a TODOS os cursos da Alura

    Mais de 1500 cursos completamente atualizados, com novos lançamentos todas as semanas, emProgramaçã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.

Matricule-se

Pro

De
R$ 2.400
12X
R$149
à vista R$1.788
  • Acesso a TODOS os cursos da Alura

    Mais de 1500 cursos completamente atualizados, com novos lançamentos todas as semanas, emProgramaçã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.

  • Luri, a inteligência artificial da Alura

    Luri é nossa inteligência artificial que tira dúvidas, dá exemplos práticos e ajuda a mergulhar ainda mais durante as aulas. Você pode conversar com Luri até 100 mensagens por semana.

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

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