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

1. HTML e JSX:

   • Introdução ao HTML.

   • Diferenças entre JSX e HTML tradicional.

   • Integração de expressões JavaScript em JSX.

2. CSS:

   • Introdução ao CSS.

   • Estilização de componentes React usando CSS.

   • Seletores de CSS e propriedades comuns.

3. Princípios Básicos de Animações e Design Visual:

   • Animações com transition.

   • Princípios de design visual: alinhamento, espaçamento e contraste.

4. Componentização:

   • Importância da componentização.

   • Criação e encapsulamento de um componente Card.

Material de Apoio

Repositório no GitHub

GitHub - SalvatoreAcademy/frontend-missao-aprendizado-iniciante-explorando-html-css-e-componentes-em-react: Frontend - Iniciante - Missão de Aprendizado: Explorando HTML, CSS e Componentes em ReactGitHub

PDF para Download

803KB

Frontend - Iniciante - Missão de Aprendizado - Explorando HTML, CSS e Componentes em React.pdf

pdf

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.

Qual é a principal diferença entre HTML e JSX?

A) JSX é uma linguagem de marcação diferente de HTML.

B) JSX permite integrar expressões JavaScript diretamente no código.

C) HTML é mais eficiente que JSX.

D) JSX não suporta tags auto-fechadas.

Resposta correta

Qual é a principal diferença entre HTML e JSX?

Resposta Correta: B

Feedback: JSX permite integrar expressões JavaScript diretamente no código, facilitando a criação de componentes dinâmicos.

---

Complete o código para estilizar o componente com CSS.

import React from 'react';
import './Card.css';

export default function Card() {
  return (
    <div className="card">
      <h2>Título</h2>
      <p>Conteúdo</p>
    </div>
  );
}

Referência de Estilo:

Resposta correta

Complete o código para estilizar o componente com CSS.

Resposta Correta:

.card {
  border: 1px solid #ccc;
  box-shadow: 2px 2px 5px #888888;
  padding: 20px;
  margin: 10px;
  border-radius: 8px;
}

Feedback: A classe card aplica estilos como borda, sombra, padding, margem e borda arredondada ao componente Card.

---

Afirmativa: O CSS permite aplicar estilos diferentes para diferentes dispositivos e tamanhos de tela.

A) Verdadeiro

B) Falso

Resposta correta

Afirmativa: O CSS permite aplicar estilos diferentes para diferentes dispositivos e tamanhos de tela.

Resposta Correta: A

Feedback: Verdadeiro. CSS permite criar designs responsivos que se adaptam a diferentes dispositivos e tamanhos de tela.

---

Qual propriedade CSS é usada para controlar a animação de transições?

A) animation

B) transition

C) transform

D) translate

Resposta correta

Qual propriedade CSS é usada para controlar a animação de transições?

Resposta Correta: B

Feedback: A propriedade transition é usada para definir as transições animadas entre diferentes estados de um elemento.

---

Complete o código JSX para renderizar um componente `Card` dentro de um componente `App`.

import React from 'react';
import Card from './Card';

export default function App() {
  return (
    <div>
      <________ />
    </div>
  );
}

Resposta correta

Complete o código JSX para renderizar um componente Card dentro de um componente App.

Resposta Correta: <Card />

Feedback: O componente Card é renderizado dentro do componente App usando a sintaxe <Card />.

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 arquivo Header.jsx.

Resposta esperada

import React from 'react';
import './Header.css';

export default function Header() {
  return (
    <header className="header">
      <h1>Bem-vindo ao Curso de React</h1>
      <p>Aprendendo a criar componentes reutilizáveis</p>
    </header>
  );
}

Feedback: O componente Header exibe um título e uma descrição, utilizando tags HTML padrão e aplicando estilos definidos em Header.css.

Revisão de Código

Analise o código a seguir, encontre e corrija o erro.

import React from 'react';
import './Card.css';

export default function Card() {
  <div class="card">
    <h2>Título</h2>
    <p>Conteúdo</p>
  </div>
}

Resposta Correta

Erro: O atributo class deve ser className em JSX.

import React from 'react';
import './Card.css';

export default function Card() {
  return (
    <div className="card">
      <h2>Título</h2>
      <p>Conteúdo</p>
    </div>
  );
}

Feedback: A função precisa de return para exibir o JSX corretamente. Além disso, o atributo class do HTML tradicional deve ser escrito como className para evitar conflitos com a palavra-chave class do JavaScript.

Projeto Prático

Crie uma nova aplicação React que inclua:

1. Um componente Card que exiba informações.

2. Um componente Header que exiba um título e uma breve descrição.

3. Um layout básico que organize os componentes Header e Card de forma visualmente agradável.

Tarefas

• Criação do Projeto:

  • Inicialize um novo projeto React.

  • Crie os componentes Card e Header.

• Implementação do Layout:

  • Estilize os componentes utilizando CSS.

  • Organize os componentes em um layout agradável e responsivo.

Código esperado

App.jsx

import React from 'react';
import Card from './Card';
import Header from './Header';
import './App.css';

export default function App() {
  return (
    <div className="app">
      <Header />
      <Card />
    </div>
  );
}

App.css

.app {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

Feedback Detalhado

• Verificação dos Componentes: Certifique-se de testar cada componente (Card, Header) separadamente e em conjunto dentro do componente App.

• Estrutura: A estrutura básica da aplicação deve seguir a mesma lógica apresentada na missão original.

• Diferença Sutil: A inclusão de novos componentes oferece um exercício prático de aplicação do conhecimento adquirido, sem introduzir novos conceitos.