> For the complete documentation index, see [llms.txt](https://salvatore-academy.gitbook.io/dev-fullstack-web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://salvatore-academy.gitbook.io/dev-fullstack-web/academia/missoes-de-frontend/explorando-html-e-css-em-react.md).

# Explorando HTML, CSS e Componentes em React

{% hint style="info" %}
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.
{% endhint %}

## Vídeo

{% embed url="<https://youtu.be/R5UcZleeNbw>" %}

**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

{% embed url="<https://github.com/SalvatoreAcademy/frontend-missao-aprendizado-iniciante-explorando-html-css-e-componentes-em-react>" %}

### PDF para Download

{% file src="/files/HxJvNuU43lrnGwFfZXlN" %}

### Miro

{% embed url="<https://miro.com/app/board/uXjVNOBw03o=/?moveToWidget=3458764570069463850&cot=14>" %}

## Exercícios de Fixação

{% hint style="info" %}
Use esses exercícios para reforçar o que acabou de aprender. Se errar, leia a explicação para entender melhor o conceito.
{% endhint %}

<details>

<summary>Qual é a principal diferença entre HTML e JSX?</summary>

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.

</details>

<details>

<summary>Resposta correta</summary>

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

</details>

***

<details>

<summary>Complete o código para estilizar o componente com CSS.</summary>

{% code lineNumbers="true" %}

```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>
  );
}
```

{% endcode %}

**Referência de Estilo:**

<img src="/files/VdGh8HvAy7kYi6PmhGkr" alt="" data-size="original">

</details>

<details>

<summary>Resposta correta</summary>

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

**Resposta Correta**:

```css
.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`.

</details>

***

<details>

<summary>Afirmativa: O CSS permite aplicar estilos diferentes para diferentes dispositivos e tamanhos de tela.</summary>

A) Verdadeiro

B) Falso

</details>

<details>

<summary>Resposta correta</summary>

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

</details>

***

<details>

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

A) `animation`

B) `transition`

C) `transform`

D) `translate`

</details>

<details>

<summary>Resposta correta</summary>

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

</details>

***

<details>

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

{% code lineNumbers="true" %}

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

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

{% endcode %}

</details>

<details>

<summary>Resposta correta</summary>

**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 />`.

</details>

## Exercícios de Validação

{% hint style="info" %}
Esses exercícios testarão sua compreensão prática. Revise o feedback para melhorar suas habilidades.
{% endhint %}

### 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`.

<details>

<summary>Resposta esperada</summary>

{% code lineNumbers="true" %}

```jsx
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>
  );
}

```

{% endcode %}

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

</details>

### Revisão de Código

{% hint style="danger" %}
**Analise o código a seguir, encontre e corrija o erro.**
{% endhint %}

{% code lineNumbers="true" %}

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

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

{% endcode %}

<details>

<summary>Resposta Correta</summary>

**Erro:** O atributo `class` deve ser `className` em JSX.

{% code lineNumbers="true" %}

```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>
  );
}
```

{% endcode %}

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

</details>

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

<details>

<summary>Código esperado</summary>

{% code title="App.jsx" lineNumbers="true" %}

```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>
  );
}
```

{% endcode %}

{% code title="App.css" lineNumbers="true" %}

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

{% endcode %}

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

</details>