curso de

React: lidando com arquivos estáticos

Estudando este mês:

e mais 520 alunos(as)

Resumo do curso

  • 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

Público alvo

Desenvolvedores(as) que se interessam em React e que não tem conhecimento sobre imports de arquivos estáticos. Desenvolvedores(as) que tem dificuldade em importar dinâmicamente arquivos estáticos e que não tem conhecimento sobre reset css e normalize.css. Desenvolvedores(as) que não tem conhecimento sobre o pacote classnames ou gostaria de aperfeiçoar conhecimentos sobre CSS Modules.

Conteúdo relacionado

Cursos de React em Front-end

Leia nossos artigos de Front-end

Última atualização

10/04/2022

Já é aluno?

Comece o curso agora

10h

p/ conclusão

54

Atividades

191

Minutos de video

1652

Alunos nesse curso

9.3

Nota deste curso

Certificado de participação

Um pouco mais do conteúdo

Descubra se esse curso é pra você lendo as primeiras aulas de React: lidando com arquivos estáticos

Formação com esse curso

Conteúdo Detalhado

  1. Criando o projeto

    • Apresentação
    • Criando e limpando o projeto
    • Configurando pacotes
  2. Assets

    • Tentando importar o svg
    • Importando a logo
    • Absolute imports e reset do css
  3. Header e Buscador

    • Adicionando fontes e normalize
    • Criando o header
    • Criando o buscador
  4. Ordenação e filtros

    • Criando os filtros
    • Fazendo os filtros funcionarem
    • Criando o ordenador
    • Fazendo o ordenador funcionar
  5. Lista de itens

    • Criando os itens
    • Populando cada item
    • Atualizando os tipos
    • Imports dinâmicos
  6. Finalizando o projeto

    • Buscador e filtros
    • Ordenador
    • Conclusão

Ainda não estuda com a gente?

Invista na transformação da sua carreira!

Comece agora

Aprenda React com esse e outros cursos, comece 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