Antes de proceder con los estilos, es necesario considerar la estructura de carpetas y la organización del código. En el capítulo anterior, se abordó este tema. Ya sabemos que necesitamos lo siguiente:

• Crear una carpeta separada para cada componente;
• Crear un archivo jsx para este componente;
• Crear un archivo module.css para este componente;
• Combinarlos para que el archivo jsx pueda reconocer los estilos.

¿Qué sigue? Para garantizar claridad, desarrollaremos una aplicación sencilla para comprender su organización.

Nota

El código completo del proyecto y la página en vivo se encuentran al final de este capítulo.

Los componentes que conforman nuestra aplicación incluyen:

• El componente Bar representa la barra de navegación de la aplicación, compuesta por un logotipo y varios enlaces;
• El componente Information muestra una imagen y contenido de texto asociado;
• El componente Footer representa los derechos de autor y todos los derechos reservados;
• El componente Section funciona como un elemento de soporte. Actúa como un contenedor, alineando centralmente todo el contenido con la ayuda de CSS;
• El componente App representa toda la aplicación. Construiremos todo el proyecto dentro del archivo App.jsx y lo importaremos en el archivo principal index.js.

Organización

Al organizar nuestros archivos, seguimos una estructura donde cada componente tiene su propia carpeta. Creamos un archivo jsx dentro de cada carpeta y un archivo module.css correspondiente. Este enfoque conduce a la siguiente estructura:

¿Cómo sabe index.js acerca de todos los componentes?

Como se mencionó anteriormente, se construye todo el proyecto dentro del archivo App.jsx y, posteriormente, se importa y renderiza ese componente (componente App) en el archivo index.js.

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

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

root.render(<App />);

Se importa un archivo utilizando la declaración import y la ruta correcta al archivo.

import <file_name> from "<file_path>";

Creación de algunos componentes para comprobar la sintaxis.

Componente App

El archivo App.jsx es el punto de entrada donde se importan y ensamblan todos los demás componentes para construir el proyecto. Esto implica importar todos los componentes necesarios dentro del archivo App.jsx y estructurar la aplicación en consecuencia.

// 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;

Se puede observar que las exportaciones de archivos también son fundamentales además de las importaciones. Una exportación adecuada permite importar un componente en otro archivo. Por lo tanto, incluir la línea 17 específicamente para el componente App cumple la función de exportarlo. Esto asegura que el componente App esté disponible para que otras partes del código lo importen y utilicen dentro de la aplicación. La sintaxis es:

export default <component_name>;

Componente Section

Funciona como contenedor de la aplicación. Recibe la prop children y la renderiza dentro del elemento div. El div tiene algunos estilos que se añadieron con ayuda del archivo Section.module.css.

Código de 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 de Section.module.css:

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

Componente Bar

El componente Bar renderiza un marcado específico y aplica los estilos correspondientes. La organización general de este proceso se mantiene constante. Comenzamos importando el archivo CSS asociado al componente, luego procedemos a crear el propio componente, donde renderizamos el marcado necesario y aplicamos los nombres de clase para lograr el estilo deseado. Finalmente, exportamos el componente, asegurando su disponibilidad en otras partes de la base de código.

Código de 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 de 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 sobrecargar el capítulo, no profundizaremos en un análisis detallado de los demás componentes. Esto se debe a que el proceso seguido para cada componente es exactamente el mismo. En su lugar, le animo a examinar detenidamente el proyecto completo proporcionado a continuación. Tómese el tiempo para inspeccionar cada carpeta y abrir cada componente para comprender su organización. Esto es fundamental porque, a medida que avancemos, se agregarán más componentes. Es importante no pasar por alto ningún detalle en esta etapa.

Código completo de la aplicación:

Nota

Para examinar la raíz del proyecto, haga clic en el deslizador en el lado izquierdo de la interfaz para expandirlo, y en la esquina superior izquierda encontrará un botón de menú (representado por tres líneas horizontales). Al hacer clic en este botón, tendrá acceso a la raíz del proyecto, lo que le permitirá explorar los archivos y carpetas dentro del proyecto.