> 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/primeiros-passos-com-reactjs.md).

# Primeiros Passos com ReactJS

\[Recomendada para começar] Área: Frontend | Nível recomendado: Iniciante

{% hint style="info" %}
Introdução prática ao ReactJS através da criação de um projeto com Vite, uma abordagem moderna e simplificada para começar no desenvolvimento frontend. Esta missão visa demonstrar o processo de preparação de um projeto React, explorar as ferramentas de desenvolvimento e introduzir conceitos básicos de HTML, CSS e JavaScript no contexto do React.
{% endhint %}

## Vídeo

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

**Link direto:** <https://youtu.be/l8TyZElnSYg>

## **Tópicos**

1. **Configuração Inicial com Vite:**
   * Abertura do GitHub Codespaces e criação de um novo projeto React utilizando Vite.
   * Explicação da recomendação do uso de frameworks modernos como Vite, Next.js ou Remix para projetos de produção.
2. **Exploração do Projeto e DevTools:**
   * Visão geral do fluxo de pastas e arquivos, começando pelo `index.html`, `main.jsx`, e chegando no `App.jsx`.
   * Execução do projeto e introdução ao uso do DevTools para explorar o DOM Virtual do React e o DOM Real do HTML.
3. **Introdução às Bases do Desenvolvimento Web:**
   * Discussão sobre HTML, CSS e JavaScript como as tecnologias fundamentais que rodam no navegador e como o React as utiliza para construir interfaces.
   * Limpeza do arquivo `App.jsx` para começar a construção do zero.
4. **Compiladores e JSX:**
   * Explicação do papel dos compiladores como Babel no processo de transformação do JSX em JavaScript puro.
   * Demonstração de como Vite facilita esse processo.
5. **Criação de um Componente Simples:**
   * Construção de um card básico utilizando `<div>`, com um título `<h1>` e uma imagem `<img>`.
   * Introdução a adicionar estilos básicos e referência ao W3Schools para documentação.

## Material de Apoio

### Repositório no GitHub

{% embed url="<https://github.com/SalvatoreAcademy/frontend-missao-aprendizado-iniciante-primeiros-passos-react>" %}

### PDF para Download

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

### Miro

{% embed url="<https://miro.com/app/board/uXjVNOBw03o=/?moveToWidget=3458764570069463849&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 comando usamos para criar um novo projeto React com Vite?</summary>

A) `npx create-react-app my-app`

B) `npm create vite@latest`

C) `npm install vite`

D) `npx create-vite-app`

</details>

<details>

<summary>Resposta correta</summary>

**Qual comando usamos para criar um novo projeto React com Vite?**

**Resposta Correta**: B

**Feedback**: O comando `npm create vite@latest` é utilizado para criar um novo projeto React com Vite.

</details>

***

<details>

<summary>Complete o código para criar um elemento JSX em React que exiba "Hello, React!".</summary>

{% code lineNumbers="true" %}

```jsx
import React from 'react';
import ReactDOM from 'react-dom';

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

ReactDOM.render(<App />, document.getElementById('root'));
```

{% endcode %}

</details>

<details>

<summary>Resposta correta</summary>

**Complete o código para criar um elemento JSX em React que exiba "Hello, React!".**

**Resposta Correta**:

```jsx
<h1>Hello, React!</h1>
```

**Feedback**: O elemento `<h1>Hello, React!</h1>` é utilizado para exibir o texto "Hello, React!" no componente `App`.

</details>

***

<details>

<summary>Verdadeiro ou Falso: O Vite é um framework de backend.</summary>

A) Verdadeiro

B) Falso

</details>

<details>

<summary>Resposta correta</summary>

**Verdadeiro ou Falso: O Vite é um framework de backend.**

**Resposta Correta**: Falso

**Feedback**: O Vite é uma ferramenta de desenvolvimento frontend, não um framework de backend.

</details>

***

<details>

<summary>Qual elemento HTML utilizamos para criar um título de nível 1?</summary>

A) `<h1>`

B) `<p>`

C) `<div>`

D) `<span>`

</details>

<details>

<summary>Resposta correta</summary>

**Qual elemento HTML utilizamos para criar um título de nível 1?**

**Resposta Correta**: A

**Feedback**: O elemento `<h1>` é utilizado para criar um título de nível 1 no HTML.

</details>

***

<details>

<summary>Complete o código para aplicar um estilo CSS que mude a cor do texto para azul.</summary>

{% code lineNumbers="true" %}

```css
.text-blue {
  ________: ________;
}
```

{% endcode %}

</details>

<details>

<summary>Resposta correta</summary>

**Complete o código para aplicar um estilo CSS que mude a cor do texto para azul.**

**Resposta Correta**:

```css
color: blue;
```

**Feedback**: A propriedade `color` em CSS é utilizada para definir a cor do texto, e `blue` é o valor para a cor azul.

</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 elementos JSX adicionais em React que exibão um parágrafo com a mensagem "Este é um parágrafo em React".

* Implementar os novos elementos no arquivo `App.jsx`.

<details>

<summary>Resposta esperada</summary>

{% code lineNumbers="true" %}

```jsx
import React from 'react';

function App() {
  return (
    <div>
      <h1>Primeiro Elemento React</h1>
      <p>Este é um parágrafo em React</p>
    </div>
  );
}

export default App;
```

{% endcode %}

**Feedback**: O componente `App` agora inclui um parágrafo `<p>` que exibe a mensagem "Este é um parágrafo em React".

</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';

function App() {
  return (
    <div>
      <h1>Primeiro Elemento React</h1>
      <p>Este é um parágrafo em React</p>
      <img src="react-logo.png" alt="React Logo">
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
```

{% endcode %}

<details>

<summary>Resposta Correta</summary>

**Erro:** A tag `<img>` está faltando o fechamento.

{% code lineNumbers="true" %}

```jsx
import React from 'react';
import ReactDOM from 'react-dom';

function App() {
  return (
    <div>
      <h1>Primeiro Elemento React</h1>
      <p>Este é um parágrafo em React</p>
      <img src="react-logo.png" alt="React Logo" />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
```

{% endcode %}

**Feedback**: Em JSX, todas as tags devem ser fechadas, portanto, a tag `<img>` precisa ser fechada com `/>`.

</details>

### Projeto Prático

Crie um novo projeto React com Vite que inclua:

1. Um elemento JSX que exiba um título "Meu Primeiro Projeto React".
2. Um elemento JSX que exiba um card com uma imagem e um título.
3. Aplicar estilos básicos aos elementos utilizando CSS.

#### Tarefas

1. **Configuração Inicial**:
   * Inicialize um novo projeto React com Vite.
   * Familiarize-se com a estrutura do projeto e personalize o arquivo `App.jsx`.
2. **Criação dos Elementos**:
   * Crie um elemento JSX que exiba um título.
   * Crie um elemento JSX de card que exiba uma imagem e um título.
3. **Aplicação de Estilos**:
   * Adicione estilos básicos aos elementos JSX do card utilizando CSS.

<details>

<summary>Código esperado</summary>

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

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

function App() {
  return (
    <div className="App">
      <h1

>Meu Primeiro Projeto React</h1>
      <div className="card">
        <img src="https://example.com/imagem.png" alt="Título do Card" />
        <h1>Título do Card</h1>
      </div>
    </div>
  );
}

export default App;
```

{% endcode %}

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

```css
.card {
  border: 1px solid black;
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  width: 300px;
  transition: all 0.15s ease-out;
}

.card:hover {
  translate: -3px -3px;
  box-shadow: 3px 3px black;
}

.card h1 {
  font-size: 32px;
}
```

{% endcode %}

**Feedback Detalhado**

* **Verificação dos Elementos JSX**: Certifique-se de testar cada elemento JSX acessando a aplicação e verificando as respostas.
* **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 dos novos elementos JSX oferece um exercício prático de aplicação do conhecimento adquirido, sem introduzir novos conceitos.

</details>