Antes de prosseguir com os estilos, é necessário considerar a estrutura de pastas e a organização do código. No capítulo anterior, abordamos esse tema. Já sabemos que precisamos do seguinte:

• Criar uma pasta separada para cada componente;
• Criar um arquivo jsx para esse componente;
• Criar um arquivo module.css para esse componente;
• Integrá-los para que o arquivo jsx reconheça os estilos.

O que vem a seguir? Para garantir clareza, desenvolveremos um aplicativo simples para compreender sua organização.

Nota

Código completo do projeto e página ao vivo podem ser encontrados ao final deste capítulo.

Os componentes que compõem nosso aplicativo incluem:

• O componente Bar representa a barra de navegação do aplicativo, composta por um logotipo e vários links;
• O componente Information exibe uma imagem e o conteúdo de texto correspondente;
• O componente Footer representa os direitos autorais e todos os direitos reservados;
• O componente Section atua como um elemento de bastidor. Ele serve como um wrapper, centralizando todo o conteúdo com o auxílio do CSS;
• O componente App representa todo o aplicativo. Construiremos todo o projeto dentro do arquivo App.jsx e o importaremos no arquivo principal index.js.

Organização

Ao organizar nossos arquivos, seguimos uma estrutura onde cada componente possui sua própria pasta. Criamos um arquivo jsx dentro de cada pasta e um arquivo module.css correspondente. Essa abordagem resulta na seguinte estrutura:

Como o index.js reconhece todos os componentes?

Conforme mencionado anteriormente, todo o projeto é construído dentro do arquivo App.jsx e, posteriormente, esse componente (App) é importado e renderizado no arquivo index.js.

import { createRoot } from "react-dom/client";
import App from "./App/App";

const root = createRoot(document.getElementById("root"));

root.render(<App />);

Um arquivo é importado utilizando a declaração import e o caminho correto para o arquivo.

import <file_name> from "<file_path>";

Vamos criar alguns componentes para verificar a sintaxe.

Componente App

O arquivo App.jsx é o ponto de entrada onde todos os outros componentes são importados e organizados para construir o projeto. Isso envolve importar todos os componentes necessários dentro do arquivo App.jsx e estruturar o aplicativo de acordo.

// Import of all components
import Section from "../Section/Section";
import Bar from "../Bar/Bar";
import Footer from "../Footer/Footer";
import Information from "../Information/Information";

// Creation of the whole app
const App = () => (
  <Section>
    <Bar />
    <Information />
    <Footer />
  </Section>
);

// Component export
export default App;

É possível observar que as exportações de arquivos também são essenciais, além das importações. A exportação adequada permite importar um componente em outro arquivo. Portanto, incluir a linha 17 especificamente para o componente App tem o objetivo de exportá-lo. Isso garante que o componente App esteja disponível para ser importado e utilizado em outras partes do código da aplicação. A sintaxe é:

export default <component_name>;

Componente Section

Serve como um wrapper para o aplicativo. Recebe a propriedade children e a renderiza dentro do elemento div. A div possui alguns estilos que foram adicionados com o auxílio do arquivo Section.module.css.

Código do Section.jsx:

// Import of the file with styles
import s from "./Section.module.css";

// Component
const Section = (props) => (
  <div className={s.container}>{props.children}</div>
);

// Export the component
export default Section;

Código do Section.module.css:

.container {
  width: 800px;
  margin: 0 auto;
  padding-left: 15px;
}

Componente Bar

O componente Bar renderiza uma marcação específica e aplica os estilos correspondentes. A organização geral desse processo permanece consistente. Começamos importando o arquivo CSS associado ao componente, depois prosseguimos para criar o próprio componente, onde renderizamos a marcação necessária e aplicamos nomes de classes para obter a estilização desejada. Por fim, exportamos o componente, garantindo sua disponibilidade em outras partes da base de código.

Código do Bar.jsx:

// Import the file with styles
import s from "./Bar.module.css";

// Component
const Bar = () => (
  <div className={s.container}>
    <a href="###" className={s.logo}>
      Logo
    </a>
    <ul className={s.list}>
      <li className={s.item}>
        <a href="###" className={s.link}>
          Home
        </a>
      </li>
      <li className={s.item}>
        <a href="###" className={s.link}>
          About
        </a>
      </li>
      <li className={s.item}>
        <a href="###" className={s.link}>
          Contact
        </a>
      </li>
    </ul>
  </div>
);

// Export the component
export default Bar;

Código do Bar.module.css:

.container {
  background-color: lightcoral;
  padding: 0px 30px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.logo {
  text-decoration: none;
  font-size: 28px;
  color: lightcyan;
  padding-top: 30px;
  padding-bottom: 30px;
  display: block;
}

.logo:hover,
.logo:focus {
  color: lightsteelblue;
}

.list {
  list-style: none;
  display: flex;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
}

.item:not(:last-child) {
  margin-right: 50px;
}

.link {
  text-decoration: none;
  font-size: 20px;
  color: lightblue;
  padding-top: 30px;
  padding-bottom: 30px;
  display: block;
}

Nota

Para evitar sobrecarregar o capítulo, não entraremos em uma análise detalhada dos outros componentes. Isso ocorre porque o processo seguido para cada componente é exatamente o mesmo. Em vez disso, recomendo que você examine cuidadosamente o projeto completo fornecido abaixo. Reserve um tempo para inspecionar cada pasta e abrir cada componente para entender sua organização. Isso é fundamental, pois à medida que avançarmos, novos componentes serão adicionados. É importante que não deixemos passar nenhum detalhe nesta etapa.

Código completo do aplicativo:

Nota

Para examinar a raiz do projeto, clique no controle deslizante no lado esquerdo da interface para expandi-lo e, no canto superior esquerdo, você encontrará um botão de menu (representado por três linhas horizontais). Ao clicar nesse botão, será possível acessar a raiz do projeto, permitindo explorar os arquivos e pastas dentro do projeto.