Introdução ao React: componentes e JSX

1. O que é React e por que usá-lo?

React é uma biblioteca JavaScript de código aberto mantida pelo Facebook (Meta) para construção de interfaces de usuário. Diferente de frameworks completos, React foca exclusivamente na camada de visualização, permitindo que você construa UIs complexas a partir de peças pequenas e isoladas chamadas componentes.

O paradigma de componentes é o coração do React. Cada componente é uma peça independente, reutilizável e que gerencia seu próprio estado. Você compõe a interface combinando esses componentes como blocos de montar, o que facilita a manutenção, o teste e a escalabilidade do código.

Outro conceito fundamental é o Virtual DOM. Em vez de manipular diretamente o DOM do navegador (operação lenta), React mantém uma representação virtual da árvore DOM em memória. Quando o estado de um componente muda, React calcula a diferença entre o Virtual DOM e o DOM real, aplicando apenas as alterações mínimas necessárias. Isso resulta em atualizações muito mais rápidas e eficientes.

No contexto do ecossistema Node.js + React, o Node.js atua como runtime para ferramentas de desenvolvimento (Create React App, Vite, Next.js) e para o servidor em aplicações full-stack. React roda no navegador, mas todo o pipeline de build, transpilação (Babel) e bundling (Webpack) acontece no Node.js.

2. Configurando o ambiente de desenvolvimento

A maneira mais rápida de iniciar um projeto React é usando o Create React App (CRA). Com o Node.js instalado, execute no terminal:

npx create-react-app meu-primeiro-react
cd meu-primeiro-react
npm start

O comando npx executa o pacote create-react-app sem precisar instalá-lo globalmente. Após alguns segundos, você terá uma estrutura de pastas como esta:

meu-primeiro-react/
├── public/          # Arquivos estáticos (index.html, favicon)
├── src/             # Código-fonte da aplicação
│   ├── App.js       # Componente principal
│   ├── App.css
│   ├── index.js     # Ponto de entrada
│   └── index.css
├── package.json     # Dependências e scripts
└── node_modules/    # Dependências instaladas

O servidor de desenvolvimento será iniciado em http://localhost:3000. O hot reload (recarregamento automático) faz com que qualquer alteração no código seja refletida instantaneamente no navegador, sem necessidade de recarregar a página manualmente.

3. Entendendo o JSX

JSX é uma extensão de sintaxe para JavaScript que se parece com HTML. Ela permite que você escreva estruturas de interface diretamente no código JavaScript. Veja um exemplo:

const elemento = <h1>Olá, mundo!</h1>;

Isso não é HTML nem string — é JSX. Ele é transformado pelo Babel em chamadas React.createElement() durante o build.

Expressões JavaScript dentro de JSX

Você pode inserir qualquer expressão JavaScript válida dentro de chaves {}:

const nome = "Maria";
const saudacao = <p>Bem-vinda, {nome}!</p>;

const ano = new Date().getFullYear();
const rodape = <footer>© {ano} - Todos os direitos reservados</footer>;

Regras importantes do JSX

  1. Elemento pai único: Todo JSX deve ter um único elemento raiz. Se precisar retornar múltiplos elementos sem um container extra, use um fragmento (<>...</>).

  2. Fechamento de tags: Todas as tags devem ser fechadas, inclusive as auto-fecháveis como <img /> e <br />.

  3. Atributos especiais: Como class e for são palavras reservadas em JavaScript, React usa className e htmlFor respectivamente:

const link = <a className="link-ativo" href="https://react.dev">Aprender React</a>;
const label = <label htmlFor="email">Email:</label>;

4. Criando seu primeiro componente funcional

Um componente funcional é simplesmente uma função JavaScript que retorna JSX. Vamos criar nosso primeiro componente:

// src/components/Saudacao.js
function Saudacao() {
  return (
    <div>
      <h1>Olá, visitante!</h1>
      <p>Bem-vindo ao mundo React.</p>
    </div>
  );
}

export default Saudacao;

Agora, podemos importá-lo e usá-lo no componente principal:

// src/App.js
import Saudacao from './components/Saudacao';

function App() {
  return (
    <div className="App">
      <Saudacao />
      <Saudacao />
    </div>
  );
}

export default App;

Perceba a composição: o componente App está usando o componente Saudacao duas vezes. Isso demonstra a reutilização — o mesmo componente pode ser renderizado em diferentes partes da aplicação.

5. Props: passando dados entre componentes

Props (propriedades) são a forma de passar dados de um componente pai para um componente filho. Vamos modificar nosso componente Saudacao para aceitar props:

// src/components/Saudacao.js
function Saudacao(props) {
  return (
    <div>
      <h1>Olá, {props.nome}!</h1>
      <p>{props.mensagem}</p>
    </div>
  );
}

export default Saudacao;

E usar o componente passando props:

// src/App.js
import Saudacao from './components/Saudacao';

function App() {
  return (
    <div className="App">
      <Saudacao nome="Ana" mensagem="Seja muito bem-vinda!" />
      <Saudacao nome="Carlos" mensagem="Que bom ter você aqui!" />
    </div>
  );
}

export default App;

Uma prática recomendada é usar desestruturação para tornar o código mais limpo:

function Saudacao({ nome, mensagem }) {
  return (
    <div>
      <h1>Olá, {nome}!</h1>
      <p>{mensagem}</p>
    </div>
  );
}

Importante: props são imutáveis. Um componente nunca deve modificar suas próprias props. Se precisar alterar dados ao longo do tempo, você usará estado (state), que abordaremos em artigos futuros.

6. Componentes com children e fragmentos

A prop especial children permite que você passe conteúdo aninhado entre as tags de abertura e fechamento de um componente. Vamos criar um componente Card:

// src/components/Card.js
function Card({ titulo, children }) {
  return (
    <div className="card">
      <h2 className="card-titulo">{titulo}</h2>
      <div className="card-conteudo">
        {children}
      </div>
    </div>
  );
}

export default Card;

Agora podemos usar o Card envolvendo qualquer conteúdo:

import Card from './components/Card';

function App() {
  return (
    <div>
      <Card titulo="Notícia 1">
        <p>Conteúdo da primeira notícia.</p>
      </Card>

      <Card titulo="Lista de tarefas">
        <ul>
          <li>Estudar React</li>
          <li>Praticar JSX</li>
          <li>Criar componentes</li>
        </ul>
      </Card>
    </div>
  );
}

React.Fragment (<>...</>) resolve o problema do elemento pai único sem adicionar nós extras ao DOM. É útil quando você precisa agrupar elementos sem criar uma div desnecessária:

function ListaNomes() {
  return (
    <>
      <h2>Participantes</h2>
      <ul>
        <li>João</li>
        <li>Maria</li>
      </ul>
    </>
  );
}

7. Estilizando componentes com JSX

Existem várias formas de estilizar componentes React. As três principais são:

Estilos inline com objeto JavaScript

function BotaoDestaque() {
  const estilo = {
    backgroundColor: '#007bff',
    color: 'white',
    padding: '10px 20px',
    border: 'none',
    borderRadius: '5px',
    cursor: 'pointer'
  };

  return <button style={estilo}>Clique aqui</button>;
}

Note a sintaxe: style={...} (chaves para expressão JS) e dentro um objeto JavaScript com propriedades em camelCase.

Importando arquivos CSS tradicionais

// src/components/Header.js
import './Header.css';

function Header() {
  return <header className="header-principal">Meu Site</header>;
}

/* Header.css */
.header-principal {
  background-color: #333;
  color: white;
  padding: 20px;
  text-align: center;
}

CSS Modules (arquivos .module.css)

CSS Modules evitam conflitos de nomes gerando classes únicas automaticamente:

// src/components/Formulario.js
import styles from './Formulario.module.css';

function Formulario() {
  return (
    <form className={styles.form}>
      <input className={styles.input} type="text" placeholder="Nome" />
      <button className={styles.botao}>Enviar</button>
    </form>
  );
}

/* Formulario.module.css */
.form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.botao {
  background-color: #28a745;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 4px;
}

8. Boas práticas e próximos passos

Algumas práticas recomendadas ao criar componentes React:

  • Nomeação PascalCase: Componentes devem começar com letra maiúscula (MeuComponente, Card, Header). Isso diferencia componentes de elementos HTML nativos.
  • Um componente, uma função: Cada componente deve ter uma responsabilidade única. Se um componente está fazendo muitas coisas, considere dividi-lo em componentes menores.
  • Organização de arquivos: Mantenha cada componente em seu próprio arquivo, com nome correspondente ao componente.

Este artigo cobriu os fundamentos de componentes e JSX. No próximo artigo, exploraremos state e hooks — como adicionar interatividade e gerenciar dados que mudam ao longo do tempo nos seus componentes React.

Referências