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

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.

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.

Last updated