Primeiros Passos com ReactJS

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

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.

Vídeo

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

https://github.com/SalvatoreAcademy/frontend-missao-aprendizado-iniciante-primeiros-passos-reactgithub.com

PDF para Download

2MB

Frontend - Iniciante - Missão de Aprendizado - Primeiros Passos com ReactJS.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 comando usamos para criar um novo projeto React com Vite?

A) npx create-react-app my-app

B) npm create vite@latest

C) npm install vite

D) npx create-vite-app

Resposta correta

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.

---

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

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

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

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

Resposta correta

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

Resposta Correta:

<h1>Hello, React!</h1>

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

---

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

A) Verdadeiro

B) Falso

Resposta correta

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.

---

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

A) <h1>

B) <p>

C) <div>

D) <span>

Resposta correta

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.

---

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

.text-blue {
  ________: ________;
}

Resposta correta

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

Resposta Correta:

color: blue;

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

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

Resposta esperada

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;

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

Revisão de Código

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

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

Resposta Correta

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

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

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

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.

Código esperado

App.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;

App.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;
}

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.