Explorando HTML, CSS e Componentes em React
Área: Frontend | Nível recomendado: Iniciante
Nesta missão, vamos aprofundar os conhecimentos em HTML e CSS no contexto do React, explorando como JSX difere do HTML tradicional, como aplicar CSS em componentes React. Além disso, a missão focará em componentização, princípio chave para um desenvolvimento eficiente em React.
Vídeo
Link direto: https://youtu.be/R5UcZleeNbw
Tópicos
HTML e JSX:
Introdução ao HTML.
Diferenças entre JSX e HTML tradicional.
Integração de expressões JavaScript em JSX.
CSS:
Introdução ao CSS.
Estilização de componentes React usando CSS.
Seletores de CSS e propriedades comuns.
Princípios Básicos de Animações e Design Visual:
Animações com
transition
.Princípios de design visual: alinhamento, espaçamento e contraste.
Componentização:
Importância da componentização.
Criação e encapsulamento de um componente
Card
.
Material de Apoio
Repositório no GitHub
PDF para Download
Miro
Exercícios de Fixação
Use esses exercícios para reforçar o que acabou de aprender. Se errar, leia a explicação para entender melhor o conceito.
Exercícios de Validação
Esses exercícios testarão sua compreensão prática. Revise o feedback para melhorar suas habilidades.
Desafio de Código
Crie um componente adicional Header
que exiba um título e uma breve descrição.
Implementar o novo componente
Header
no arquivoHeader.jsx
.
Revisão de Código
Analise o código a seguir, encontre e corrija o erro.
Projeto Prático
Crie uma nova aplicação React que inclua:
Um componente
Card
que exiba informações.Um componente
Header
que exiba um título e uma breve descrição.Um layout básico que organize os componentes
Header
eCard
de forma visualmente agradável.
Tarefas
Criação do Projeto:
Inicialize um novo projeto React.
Crie os componentes
Card
eHeader
.
Implementação do Layout:
Estilize os componentes utilizando CSS.
Organize os componentes em um layout agradável e responsivo.
Last updated