Componentes en React

Aprenderás a crear Componentes en React y a como estructurarlos en un proyecto

Componentes en React
oscar Escrito por oscar 20 April 2025 701 0
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

¿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:

Componentes de Clase:

Propiedades (props):

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

Componente boton
Componente boton

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:

Primer componente en react
Primer componente en react

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?

Componentes de diseño

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

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

Componentes estructurales

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

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

Componentes de página

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

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

Comentario

Debe aceptar antes de enviar