🚀 Aprenda React do Zero: Guia Completo para Iniciantes

React é uma das bibliotecas JavaScript mais populares do mundo, usada por empresas como Facebook, Instagram, Netflix e muitas outras. Se você está começando sua jornada no desenvolvimento web, aprender React pode abrir muitas portas.

Neste post, vamos te guiar do zero absoluto até seu primeiro projeto React funcional, com uma explicação simples, direta e prática.

---

📘 O que é o React?

React é uma biblioteca JavaScript criada pelo Facebook para construir interfaces de usuário (UI). Com ele, você pode criar componentes reutilizáveis, deixando sua aplicação mais organizada e eficiente.

---

🧰 Pré-requisitos

Antes de começar, é bom ter:

• Conhecimento básico de HTML, CSS e JavaScript
• Node.js instalado (instalar aqui)
• Um editor de código como o VSCode

---

⚙️ Instalando o ambiente

1. Crie um projeto com Vite (forma rápida de começar com React):

npm create vite@latest meu-app-react -- --template react
cd meu-app-react
npm install
npm run dev

2. Abra o navegador no endereço mostrado (geralmente http://localhost:5173)

🧠 Entendendo os Conceitos Básicos

1. Componentes Tudo em React é um componente. Aqui vai um exemplo:

function HelloWorld() {
	return <h1>Olá, mundo!</h1>
}

2. JSX é uma mistura de HTML com JavaScript. Exemplo:

const nome = 'Maria'
return <p>Olá, {nome}</p>

3. Props Permitem passar dados entre componentes:

function Saudacao(props) {
	return <h1>Olá, {props.nome}!</h1>
}

// Uso:
;<Saudacao nome='Lucas' />

4. State (estado) Para armazenar dados dentro do componente:

import { useState } from 'react'

function Contador() {
	const [contador, setContador] = useState(0)

	return (
		<div>
			<p>Você clicou {contador} vezes</p>
			<button onClick={() => setContador(contador + 1)}>Clique aqui</button>
		</div>
	)
}

🛠️ Seu Primeiro Projeto: Um Contador

Crie o arquivo Contador.tsx e adicione:

import { useState } from 'react'

export function Contador() {
	const [valor, setValor] = useState(0)

	return (
		<div>
			<h2>Contador: {valor}</h2>
			<button onClick={() => setValor(valor + 1)}>Adicionar</button>
			<button onClick={() => setValor(valor - 1)}>Subtrair</button>
		</div>
	)
}

No App.tsx, importe e use:

import { Contador } from './Contador'

function App() {
	return (
		<div>
			<h1>Meu Primeiro App React</h1>
			<Contador />
		</div>
	)
}

🧭 Próximos Passos

Agora que você deu seus primeiros passos com React, aqui estão algumas dicas para continuar:

• Aprenda sobre React Router para navegação entre páginas
• Explore React Hook Form para formulários
• Entenda o useEffect e como lidar com APIs
• Comece a usar TypeScript com React

📚 Recursos Recomendados

• Documentação oficial do React