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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://salvatore-academy.gitbook.io/dev-fullstack-web/academia/missoes-de-frontend/explorando-html-e-css-em-react.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.