<h2>React: O que é e por que aprender</h2>
<p>React é uma biblioteca JavaScript desenvolvida pelo Facebook para criar interfaces de usuário (UIs) de forma eficiente e escalável. Diferentemente de frameworks como Angular, React foca em uma coisa: renderizar componentes. Ele utiliza uma abordagem declarativa, o que significa você descreve <em>como</em> a UI deve ser, não <em>como fazê-la acontecer</em>. Isso torna o código mais previsível e fácil de debugar.</p>
<p>A filosofia do React repousa em três pilares: componentes reutilizáveis, unidirecionalidade de dados e virtual DOM. O virtual DOM é uma representação em memória da UI real. Quando o estado muda, React atualiza apenas o necessário no DOM real, tornando as aplicações extremamente rápidas. Aprender React hoje é praticamente obrigatório para qualquer desenvolvedor frontend moderno.</p>
<h2>JSX: A Sintaxe que Facilita Tudo</h2>
<h3>O que é JSX</h3>
<p>JSX (JavaScript XML) permite escrever estruturas HTML dentro de código JavaScript. Parece HTML, mas é na verdade JavaScript compilado. Um transpilador como Babel converte JSX em chamadas de função React que o navegador compreende.</p>
<pre><code class="language-jsx">// JSX
const elemento = <h1>Olá, mundo!</h1>;
// Compilado para:
const elemento = React.createElement('h1', null, 'Olá, mundo!');</code></pre>
<p>JSX é opcional, mas torna o código infinitamente mais legível e intuitivo. Sem JSX, você precisaria escrever <code>React.createElement()</code> manualmente para cada elemento, o que rapidamente vira um pesadelo.</p>
<h3>Expressões dinâmicas em JSX</h3>
<p>Dentro de chaves <code>{}</code>, você insere expressões JavaScript. Isso permite dados dinâmicos, operações lógicas e até chamadas de função.</p>
<pre><code class="language-jsx">const nome = 'Maria';
const idade = 28;
const ativo = true;
const perfil = (
<div>
<h1>Bem-vinda, {nome}!</h1>
<p>Idade: {idade + 1}</p>
<p>Status: {ativo ? 'Online' : 'Offline'}</p>
</div>
);</code></pre>
<p>Lembre-se: dentro de <code>{}</code> você usa JavaScript puro. Fora delas, é HTML. Classes em JSX se chamam <code>className</code> (não <code>class</code>, que é palavra-chave do JS). Atributos multi-palavra como <code>data-id</code> viram camelCase: <code>dataId</code>.</p>
<h2>Componentes Funcionais: A Forma Moderna</h2>
<h3>Estrutura básica</h3>
<p>Um componente React é uma função JavaScript que retorna JSX. A função recebe <code>props</code> (propriedades) como argumentos — dados passados de componentes pai para filho.</p>
<pre><code class="language-jsx">function Saudacao(props) {
return <h1>Olá, {props.nome}!</h1>;
}
// Uso:
<Saudacao nome="João" /></code></pre>
<p>Componentes funcionais são a forma recomendada atualmente. Componentes de classe (sintaxe mais antiga) ainda existem, mas foram largamente substituídos por hooks, que adicionam estado e efeitos colaterais às funções.</p>
<h3>Props: Dados do Pai para o Filho</h3>
<p>Props são leitura apenas — um componente filho nunca modifica as props que recebe. Elas fluem sempre de cima para baixo. Você pode desconstruir props para código mais limpo.</p>
<pre><code class="language-jsx">function Produto({ titulo, preco, desconto }) {
const precoFinal = preco * (1 - desconto / 100);
return (
<div>
<h2>{titulo}</h2>
<p>R$ {precoFinal.toFixed(2)}</p>
</div>
);
}
// Uso:
<Produto titulo="Notebook" preco={3000} desconto={10} /></code></pre>
<h3>Hooks: Estado e Efeitos</h3>
<p>O Hook <code>useState</code> adiciona estado aos componentes funcionais. Toda vez que o estado muda, o componente re-renderiza.</p>
<pre><code class="language-jsx">import { useState } from 'react';
function Contador() {
const [contagem, setContagem] = useState(0);
return (
<div>
<p>Contagem: {contagem}</p>
<button onClick={() => setContagem(contagem + 1)}>
Incrementar
</button>
</div>
);
}</code></pre>
<p>O Hook <code>useEffect</code> executa efeitos colaterais (requisições HTTP, subscrições, etc.) depois da renderização. Use o array de dependências para controlar quando executa.</p>
<pre><code class="language-jsx">import { useState, useEffect } from 'react';
function Usuarios() {
const [usuarios, setUsuarios] = useState([]);
useEffect(() => {
fetch('/api/usuarios')
.then(res => res.json())
.then(dados => setUsuarios(dados));
}, []); // Executa uma vez, quando monta
return (
<ul>
{usuarios.map(user => <li key={user.id}>{user.nome}</li>)}
</ul>
);
}</code></pre>
<h2>Composição e Boas Práticas</h2>
<h3>Componentes pequenos e reutilizáveis</h3>
<p>Evite "god components" — componentes gigantes que fazem tudo. Divida a UI em componentes menores, cada um com responsabilidade única. Um botão é um componente, um card é outro.</p>
<pre><code class="language-jsx">function BotaoPrimario({ texto, onClick }) {
return (
<button
style={{ background: '#007bff', color: 'white', padding: '10px 20px' }}
onClick={onClick}
>
{texto}
</button>
);
}
function Card({ titulo, filhos, ao_clicar }) {
return (
<div style={{ border: '1px solid #ddd', padding: '15px' }}>
<h3>{titulo}</h3>
{filhos}
<BotaoPrimario texto="Confirmar" onClick={ao_clicar} />
</div>
);
}</code></pre>
<h3>Lifting State Up</h3>
<p>Quando dois componentes precisam compartilhar estado, mova o estado para o componente pai comum. Isso mantém a fonte da verdade (single source of truth) clara.</p>
<pre><code class="language-jsx">function App() {
const [filtro, setFiltro] = useState('');
return (
<div>
<Buscador valor={filtro} onChange={setFiltro} />
<Lista filtro={filtro} />
</div>
);
}</code></pre>
<blockquote><p><strong>Dica de ouro</strong>: React flui de cima para baixo. Dados descem (props), eventos sobem (callbacks). Quando respeita isso, seu código fica limpo e previsível.</p></blockquote>
<h2>Conclusão</h2>
<p>Você aprendeu que <strong>React é uma biblioteca para criar UIs com componentes reutilizáveis</strong>, onde a declaração clara do que você quer é mais importante que os detalhes de implementação. <strong>JSX é JavaScript com cara de HTML</strong>, tornando o código legível sem perder o poder da linguagem. <strong>Componentes funcionais com hooks</strong> são o padrão moderno — useState para estado, useEffect para efeitos colaterais, e sempre tenha em mente que props descem e eventos sobem. Comece pequeno, crie componentes focados, e não tenha medo de refatorar. React premia a disciplina.</p>
<h2>Referências</h2>
<ul>
<li><a href="https://react.dev" target="_blank" rel="noopener noreferrer">Documentação oficial do React</a></li>
<li><a href="https://react.dev/reference/react" target="_blank" rel="noopener noreferrer">Introducing Hooks - React Blog</a></li>
<li><a href="https://javascript.info/" target="_blank" rel="noopener noreferrer">JavaScript.info - React Basics</a></li>
<li><a href="https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367" target="_blank" rel="noopener noreferrer">Você não precisa de Redux - Medium</a></li>
<li><a href="https://www.patterns.dev/posts/react-patterns" target="_blank" rel="noopener noreferrer">React Patterns - Dan Abramov</a></li>
</ul>