Primeiros Passos com ReactJS
[Recomendada para começar] Área: Frontend | Nível recomendado: Iniciante
Vídeo
Link direto: https://youtu.be/l8TyZElnSYg
Tópicos
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.
Exploração do Projeto e DevTools:
Visão geral do fluxo de pastas e arquivos, começando pelo
index.html
,main.jsx
, e chegando noApp.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.
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.
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.
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
PDF para Download
Miro
Exercícios de Fixação
Exercícios de Validação
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
.
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'));
Projeto Prático
Crie um novo projeto React com Vite que inclua:
Um elemento JSX que exiba um título "Meu Primeiro Projeto React".
Um elemento JSX que exiba um card com uma imagem e um título.
Aplicar estilos básicos aos elementos utilizando CSS.
Tarefas
Configuração Inicial:
Inicialize um novo projeto React com Vite.
Familiarize-se com a estrutura do projeto e personalize o arquivo
App.jsx
.
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.
Aplicação de Estilos:
Adicione estilos básicos aos elementos JSX do card utilizando CSS.
Last updated