Ecosistema React: Componentes Fundamentales

Etsructura General del Ecosistema React

Para mostrar visualmente la jerarquía del ecosistema React, aquí está su estructura representada en forma de árbol:

Ecosistema React
│
├── Biblioteca Principal (React Core)
│   ├── React (createElement / useState / useEffect ...)
│   └── ReactDOM (Renderizado en DOM del navegador)
│
├── Enrutamiento y Navegación
│   └── React Router
│
├── Librerías de Componentes UI
│   ├── Material-UI (MUI)
│   ├── Ant Design
│   └── Chakra UI
│
├── Gestión de Estado
│   ├── Redux (+ React-Redux)
│   ├── Zustand
│   └── Recoil
│
├── Obtención de Datos
│   ├── Axios
│   └── React Query (TanStack Query)
│
├── Manejo de Formularios
│   └── React Hook Form
│
├── Animaciones
│   └── Framer Motion
│
└── Herramientas de Construcción y Desarrollo
    ├── Vite / Create React App
    └── React Developer Tools

Explicación:

• Biblioteca Principal es React en sí, responsable del renderizado de la capa de vista y la gestión del ciclo de vida.
• Enrutamiento gestiona la navegación entre páginas y la sincronización con URL en aplicaciones de una sola página.
• Librerías de Componentes UI proporcionan componentes listos para usar, reduciendo el tiempo de escritura de estilos e interacciones.
• Gestión de Estado aborda la complejidad del estado compartido entre componentes.
• Obtención de Datos simplifica las llamadas API y la gestión de caché.
• Manejo de Formularios procesa validación y envío de formularios de manera eficiente.
• Animaciones ofrece efectos visuales fluidos.
• Herramientas de Construcción permiten crear proyectos rápidamente y facilitar la depuración.

Componentes Esenciales del Ecosistema + Ejemplos Ejecutables

A continuación, seleccionamos varios componentes comunes del ecosistema React con ejemplos de código completos y ejecutables (usando Vite + React) para ilustrar su función.

1. React Router (Gestión de Enrutamiento)

Ubicación: En la capa de Enrutamiento y Navegación del ecosistema React. Función: Implementar navegación entre páginas, aálisis de parámetros URL y rutas anidadas en aplicaciones de una sola página.

Instalación:

npm install react-router-dom

Código de ejemplo (src/App.jsx):

import { BrowserRouter, Routes, Route, NavLink } from "react-router-dom";
import Inicio from "./paginas/Inicio";
import Nosotros from "./paginas/Nosotros";

function App() {
  return (
    <BrowserRouter>
      <nav>
        <NavLink to="/">Inicio</NavLink> | <NavLink to="/nosotros">Nosotros</NavLink>
      </nav>
      <Routes>
        <Route path="/" element={<Inicio />} />
        <Route path="/nosotros" element={<Nosotros />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Archivos de página (src/paginas/Inicio.jsx):

export default function Inicio() {
  return <h1>Página de Inicio</h1>;
}

Archivos de página (src/paginas/Nosotros.jsx):

export default function Nosotros() {
  return <h1>Página Nosotros</h1>;
}

Explicación de funcionalidad:

• BrowserRouter envuelve toda la aplicación, habilitando el modo de historial HTML5.
• Routes y Route definen la correspondencia entre URL y componentes.
• NavLink implementa navegación sin recarga de página.

2. Material-UI (Librería de Componentes UI)

Ubicación: En la capa de Librerías de Componentes UI. Función: Proporcionar componentes React de alta calidad y personalizables (botones, tablas, formularios, etc.).

Instalación:

npm install @mui/material @emotion/react @emotion/styled

Código de ejemplo (src/App.jsx):

import React from "react";
import { Button, Table, Stack } from "@mui/material";
import { createTheme, ThemeProvider } from "@mui/material/styles";

const tema = createTheme();

const datos = [
  { id: "1", nombre: "Carlos", edad: 28 },
  { id: "2", nombre: "María", edad: 32 },
];

const columnas = [
  { id: "nombre", label: "Nombre", minWidth: 100 },
  { id: "edad", label: "Edad", minWidth: 50 },
];

export default function App() {
  return (
    <ThemeProvider theme={tema}>
      <div style={{ padding: 24 }}>
        <Stack spacing={2}>
          <Button variant="contained" color="primary">Botón Principal</Button>
          <tablehead> <tablerow> {columnas.map((columna) =&gt; ( <tablecell columna.minwidth="" key="{columna.id}" minwidth:="" style="{{"> {columna.label} </tablecell> ))} </tablerow> </tablehead><tablebody> {datos.map((fila) =&gt; ( <tablerow key="{fila.id}"> <tablecell>{fila.nombre}</tablecell> <tablecell>{fila.edad}</tablecell> </tablerow> ))} </tablebody>
        </Stack>
      </div>
    </ThemeProvider>
  );
}

Explicación de funcionalidad:

• Material-UI encapsula componentes UI comunes, ahorrando tiempo en escritura de CSS.
• Permite temas personalizados para mantener la coherencia visual.

3. Redux (Gestión de Estado Compleja)

Ubicación: En la capa de Gestión de Estado. Función: Administrar el estado global de la aplicación de predecible y centralizada, especialmetne útil en aplicaciones grandes.

Instalación:

npm install redux react-redux

Código de ejemplo (src/store/contador.js):

import { configureStore, createSlice } from "@reduxjs/toolkit";

const contadorSlice = createSlice({
  name: "contador",
  initialState: { valor: 0 },
  reducers: {
    incrementar: (estado) => {
      estado.valor += 1;
    },
    decrementar: (estado) => {
      estado.valor -= 1;
    },
  },
});

export const { incrementar, decrementar } = contadorSlice.actions;

const store = configureStore({
  reducer: {
    contador: contadorSlice.reducer,
  },
});

export default store;

App.jsx:

import React from "react";
import { Provider, useSelector, useDispatch } from "react-redux";
import store from "./store/contador";

function ContadorComponente() {
  const contador = useSelector((estado) => estado.contador.valor);
  const dispatch = useDispatch();

  return (
    <div style={{ padding: 24 }}>
      <h1>Contador: {contador}</h1>
      <button onClick={() => dispatch(incrementar())}>Incrementar</button>
      <button onClick={() => dispatch(decrementar())}>Decrementar</button>
    </div>
  );
}

export default function App() {
  return (
    <Provider store={store}>
      <h1>Aplicación con Redux</h1>
      <ContadorComponente />
    </Provider>
  );
}

Explicación de funcionalidad:

• Redux Toolkit simplifica la creación de stores y reducers.
• El estado se puede acceder en cualquier componente mediante los hooks useSelector y useDispatch.

4. SWR (Obtención de Datos y Caché)

Ubicación: En la capa de Obtención de Datos. Función: Manejar automáticamente la obtención, almacenamiento en caché, sincronización y actualización de datos.

Instalación:

npm install swr axios

Código de ejemplo (src/App.jsx):

import React from "react";
import useSWR from "swr";
import axios from "axios";

const fetcher = (url) => axios.get(url).then((res) => res.data);

function ListaProductos() {
  const { data, error, isLoading } = useSWR("https://fakestoreapi.com/products", fetcher);

  if (isLoading) return <p>Cargando productos...</p>;
  if (error) return <p>Error al cargar productos</p>;

  return (
    <div>
      <h2>Lista de Productos</h2>
       {data.map((producto) =&gt; ( - {producto.title} - ${producto.price}
 ))} 
    </div>
  );
}

export default function App() {
  return (
    <div>
      <h1>Tienda Online</h1>
      <ListaProductos />
    </div>
  );
}

Explicación de funcionalidad:

• useSWR gestiona automáticamente la obtención de datos, caché y actualizaciones.
• Simplifica el manejo de estados de carga y error.

Resumen y Recomendaciones de Selección