Dominando JSX e Estrutura de Projeto em React

Para criar aplicações React escaláveis e bem organizadas, é essencial compreender a fundo o JSX, trabalhar melhor com props e definir uma boa estrutura de projeto. Esse conhecimento permitirá que você desenvolva interfaces mais dinâmicas, legíveis e fáceis de manter. Vamos explorar essas práticas de maneira simples e com exemplos práticos.

O que é JSX de Verdade?

O JSX não é HTML, mas uma sintaxe especial que permite escrever marcação dentro de JavaScript. A principal vantagem é combinar lógica e interface em um único arquivo, mantendo tudo mais legível.
Internamente, o JSX é convertido em chamadas para React.createElement().

Exemplo simples:

const element = <h1>Bem-vindo ao React!</h1>;

Esse código é traduzido para:

const element = React.createElement('h1', null, 'Bem-vindo ao React!');

Regras Importantes do JSX

• Um único elemento raiz: Todo componente deve retornar apenas um elemento raiz.
• Fechamento de tags: Todas as tags devem ser fechadas, mesmo as que no HTML não são obrigatórias.
• Expressões entre {}: Você pode inserir variáveis ou lógica dentro de {}.

function Greeting({ name }) {
  return <h1>Olá, {name || 'Visitante'}!</h1>;
}

Trabalhando com Props de Forma Eficiente

Props são valores enviados de um componente pai para um filho. Além de passá-los como atributos, você pode usar desestruturação para simplificar o código:

function UserCard({ name, age }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>Idade: {age}</p>
    </div>
  );
}

function App() {
  return <UserCard name="Ana" age={28} />;
}

Props Children

O React oferece a prop children, que permite passar conteúdo dinâmico para dentro de componentes:

function Card({ children }) {
  return <div className="card">{children}</div>;
}

function App() {
  return (
    <Card>
      <h1>Bem-vindo</h1>
      <p>Esse conteúdo está dentro de um Card!</p>
    </Card>
  );
}

Estrutura de Pastas para Projetos Escaláveis

Uma boa estrutura de projeto facilita manutenção e escalabilidade. Veja um modelo inicial recomendado:

src/
  components/
    Header.jsx
    Footer.jsx
  pages/
    Home.jsx
    About.jsx
  App.jsx
  index.jsx
  styles/
    App.css

Essa organização separa componentes reutilizáveis, páginas e estilos.

Estilizando Componentes

Você pode estilizar seus componentes de várias formas:

• CSS tradicional: Arquivos .css importados no componente.
• CSS Modules: Escopo local para cada componente.
• Styled Components: Biblioteca para estilização usando JavaScript.

Exemplo simples de CSS tradicional:

import './App.css';

function Button() {
  return <button className="primary">Clique Aqui</button>;
}

Boas Práticas no Desenvolvimento

1. Componentes Pequenos e Reutilizáveis: Um componente deve ter uma única responsabilidade.
2. Nomeação Clara: Use nomes descritivos para arquivos e funções.
3. Separação de Lógica e Estilo: Mantenha estilos e lógica bem organizados para evitar confusão.

Conclusão

Dominar JSX, entender bem o uso de props (incluindo children) e manter uma boa estrutura de pastas são passos fundamentais para criar projetos React limpos e escaláveis. Essas práticas, quando aplicadas desde o início, tornam o desenvolvimento mais simples, além de facilitar a colaboração em equipe e o crescimento do projeto.

Conteúdo adaptado do livro “The Road to React”, de Robin Wieruch.