Componentes en React

En este post exploraremos uno de los temas principales de react que son los componentes, no guiaremos de la documentación oficial https://es.react.dev/learn#components para entender los conceptos básicos y como aplicarlos a react.

Prerrequisitos

• Instalación react se explica a detalle como instar y configurar un entono de trabajo para react
• Estructura de un proyecto React    Conocer los archivos principales, index.js, App.js, carpetas, etc.
• JSX  Sintaxis básica, reglas JSX, expresiones, fragmentos (<> </>).

¿Que es un componentes?

En React, un componente es un bloque de construcción reutilizable que forma la interfaz de usuario. Son como funciones de JavaScript que pueden tomar entradas (props) y devolver elementos React que describen la vista. Los componentes pueden ser funcionales o basados en clases. 

Las aplicaciones de React están hechas a partir de componentes y la organización de los componentes en un proyecto React depende del tamaño, la complejidad, y las necesidades del proyecto. 

Componentes Funcionales:

• Son funciones de JavaScript que devuelven JSX, que es una sintaxis para escribir código HTML dentro de JavaScript. 
• Son más simples y recomendados para componentes pequeños o sin lógica. 

Componentes de Clase:

• Se definen usando la clase React.Component.
• Pueden tener un estado interno que controla cómo el componente se ve.

Propiedades (props):

• Son argumentos que se pasan a un componente cuando se instancia.
• React pasa todos los atributos JSX y los hijos a un componente como un objeto props.
• Las props son de solo lectura y no deben modificarse dentro del componente. 

Ejemplo practico

Crearemos un proyecto llamado practicas-react

npm create vite@latest

Donde seleccionamos:

> npx
> create-vite
|
o  Project name:
|  practicas-react
|
o  Select a framework:
|  React
|
o  Select a variant:
|  TypeScript

Por ultimo, ejecutamos

cd practicas-react
npm install
npm run dev

Vamos a crear un directorio llamado components en el directorio src donde vamos a realizar lo siguiente

Crearemos un componente llamado MyButton.tsx dentro de components

function MyButton() {
  return (
    <button>Soy un botón</button>
  );
}

Ahora que has declarado MyButton, puedes anidarlo en otro componente:

import './App.css'
import MyButton from './components/MyButton'

function App() {
  
  return (
    <div>
      <h1>Bienvenido a mi aplicación</h1>
      <MyButton />
    </div>
  )
}

export default App

Caracteristicas de lo creado anteriormente:

• <MyButton /> empieza con mayúscula, los nombre de los componentes empiezan en mayúscula.
• Las palabras clave export default especifican el componente principal en el archivo.

Nota: La sintaxis de marcado es JSX, JSX es más estricto que HTML. Tienes que cerrar etiquetas como <br />. Los  componente tampoco puede devolver múltiples etiquetas de JSX. Debes envolverlas en un padre compartido, como <div>...</div> o en un envoltorio vacío <>...</>:

function AboutPage() {
  return (
    <>
      <h1>Acerca de</h1>
      <p>Hola.<br />¿Cómo vas?</p>
    </>
  );
}

Añadir estilos

En React, especificas una clase de CSS con className. Funciona de la misma forma que el atributo class de HTML:

<img className="avatar" />

Luego escribes las reglas CSS para esa clase en un archivo CSS aparte:

/* In your CSS */
.avatar {
  border-radius: 50%;
}

Mostrar datos

JSX permite colocar las llaves {} para pode colocar código JavaScript y poder incrustar una variable en el código y mostrársela al usuario.

return (
  <h1>
    {user.name}
  </h1>
);

Otras formas de mostrar datos son:

return (
  <img
    className="avatar"
    src={user.imageUrl}
    alt={'Foto de ' + user.name}
  />
);

Estructura básica para componentes

Una práctica común es organizar los componentes en una carpeta llamada components/ dentro de la carpeta src/:

src/
├── components/
│   ├── Button/
│   │   ├── Button.js
│   │   ├── Button.css
│   │   └── index.js
│   ├── Header/
│   │   ├── Header.js
│   │   ├── Header.css
│   │   └── index.js
│   ├── Footer/
│   │   ├── Footer.js
│   │   ├── Footer.css
│   │   └── index.js

¿Por qué usar una carpeta por componente?

• Separación de responsabilidades: Cada componente tiene su propio archivo JS, estilos, y pruebas, lo que facilita el mantenimiento.
• Reutilización: Componentes bien organizados son más fáciles de buscar y reutilizar.

Componentes de diseño

Estos son los bloques básicos que no dependen de otros componentes y son reutilizables en toda la aplicación.

• Ejemplos: Botones, cuadros de texto, etiquetas, íconos.
• Ubicación recomendada: src/components/ui/

src/
├── components/
│   ├── ui/
│   │   ├── Button/
│   │   ├── Input/
│   │   └── Icon/

Componentes estructurales

Se usan para organizar el diseño y maquetar la aplicación.

• Ejemplos: Header, Footer, Sidebar, Layout.
• Ubicación recomendada: src/components/layout/

src/
├── components/
│   ├── layout/
│   │   ├── Header/
│   │   ├── Footer/
│   │   ├── Sidebar/
│   │   └── Layout/

Componentes de página

Estos representan pantallas completas de tu aplicación, como Home, Login, o Dashboard.

• Ejemplos: Pantalla de inicio, página de perfil, panel de control.
• Ubicación recomendada: src/pages/

src/
├── pages/
│   ├── Home/
│   │   ├── Home.js
│   │   ├── Home.css
│   │   └── index.js
│   ├── Login/
│   └── Dashboard/

Componentes específicos de una funcionalidad

Si un componente solo pertenece a una funcionalidad específica, guárdalo en una carpeta que agrupe todos los elementos relacionados con esa funcionalidad.

Ejemplo: En una aplicación de comercio electrónico, los componentes relacionados con el carrito podrían estar juntos.

src/
├── features/
│   ├── Cart/
│   │   ├── CartList/
│   │   ├── CartSummary/
│   │   └── CartItem/

Uso de index.js en carpetas de componentes

Cada carpeta de componente puede tener un archivo index.js para simplificar las importaciones.

El archivo index.js dentro de una carpeta de componente se utiliza principalmente para simplificar las importaciones y mejorar la organización del código, aunque no es estrictamente necesario.

// components/Button/index.js

export { default } from './Button';

Esto permite importar el componente de manera limpia:

import Button from './components/Button';

Estructura para proyectos grandes

Si el proyecto es grande y tiene múltiples módulos, puedes usar una estructura modular:

src/
├── components/
│   ├── ui/
│   │   ├── Button/
│   │   ├── Input/
│   │   └── Icon/
│   ├── layout/
│   │   ├── Header/
│   │   ├── Footer/
│   │   └── Sidebar/
├── features/
│   ├── Auth/
│   │   ├── LoginForm/
│   │   └── SignUpForm/
│   ├── Cart/
│   │   ├── CartList/
│   │   ├── CartSummary/
│   │   └── CartItem/
├── pages/
│   ├── Home/
│   ├── Login/
│   ├── Dashboard/

Estructura profesional del proyecto

src/
├── assets/                 # Recursos estáticos (imágenes, fuentes, íconos, etc.)
│   ├── images/
│   ├── icons/
│   └── fonts/
├── components/             # Componentes reutilizables
│   ├── Button/
│   │   ├── Button.jsx
│   │   ├── Button.module.css
│   │   └── Button.test.jsx
│   ├── Header/
│   │   ├── Header.jsx
│   │   ├── Header.module.css
│   │   └── Header.test.jsx
│   └── ...
├── hooks/                  # Hooks personalizados
│   ├── useAuth.js
│   ├── useFetch.js
│   └── ...
├── layouts/                # Diseños o layouts generales para las páginas
│   ├── MainLayout.jsx
│   ├── AdminLayout.jsx
│   └── ...
├── pages/                  # Páginas de la aplicación
│   ├── Home/
│   │   ├── Home.jsx
│   │   ├── Home.module.css
│   │   └── Home.test.jsx
│   ├── About/
│   │   ├── About.jsx
│   │   ├── About.module.css
│   │   └── About.test.jsx
│   └── ...
├── routes/                 # Definición de rutas
│   ├── AppRouter.jsx
│   └── ProtectedRoute.jsx
├── services/               # Lógica de negocio y comunicación con APIs
│   ├── api.js
│   ├── authService.js
│   ├── userService.js
│   └── ...
├── store/                  # Estado global (Redux, Zustand, etc.)
│   ├── slices/
│   │   ├── authSlice.js
│   │   ├── userSlice.js
│   │   └── ...
│   └── store.js
├── styles/                 # Estilos globales
│   ├── variables.css
│   ├── global.css
│   └── ...
├── utils/                  # Funciones y utilidades
│   ├── helpers.js
│   ├── constants.js
│   └── ...
├── index.js                # Punto de entrada de React
└── App.jsx                 # Componente raíz de la aplicación

Descripción de las carpetas y archivos

• assets/:
  • Contiene recursos estáticos como imágenes, íconos, y fuentes que se usan globalmente en la aplicación.
• components/:
  • Agrupa componentes reutilizables y de propósito general.
  • Cada componente tiene su propia carpeta que incluye:
  • Su archivo principal (Button.jsx).
  • Sus estilos (opcionalmente con módulos CSS como Button.module.css).
  • Pruebas unitarias (Button.test.jsx).
• hooks/:
  • Contiene hooks personalizados (como useFetch para manejar solicitudes o useAuth para manejar autenticación).
• layouts/:
  • Diseños comunes que agrupan páginas, como MainLayout (diseño principal) o AdminLayout (diseño para panel de administración).
• pages/:
  • Contiene las páginas principales de la aplicación.
  • Cada página tiene su propia carpeta con:
  • Su archivo principal (Home.jsx).
  • Sus estilos específicos (Home.module.css).
  • Pruebas unitarias para el componente de página (Home.test.jsx).
• routes/:
  • Contiene las rutas de la aplicación definidas con React Router.
  • Ejemplo: AppRouter.jsx para gestionar rutas públicas y privadas, y ProtectedRoute.jsx para proteger rutas específicas.
• services/:
  • Contiene la lógica de negocio y los servicios para interactuar con APIs (ejemplo: autenticación, usuarios, etc.).
  • api.js: Configuración básica para solicitudes HTTP (como Axios o Fetch).
  • authService.js: Funciones relacionadas con la autenticación.
• store/:
  • Maneja el estado global de la aplicación.
  • Incluye los slices de Redux o lógica de estado (como Zustand o Context API).
• styles/:
  • Estilos globales como variables de CSS (variables.css) y estilos base (global.css).
• utils/:
  • Contiene funciones utilitarias y constantes globales.
  • Ejemplo: helpers.js para funciones genéricas y constants.js para valores constantes como URLs o claves.
• index.js:
  • Punto de entrada de la aplicación React.
  • Renderiza el componente raíz (App) en el DOM.
• App.jsx:
  • Componente principal de la aplicación.
  • Puede incluir las rutas principales o envolverlas con un diseño base.