React IV
+Ecosistema npm, React Router, useContext
Contenido
+-
+
- Ecosistema React y paquetes npm +
- Librerías externas +
- React Router +
- Parámetros de URL +
useContext
+
Ecosistema Node
+Hasta ahora hemos trabajado únicamente con React y JavaScript.
+Sin embargo, en el desarrollo real de aplicaciones es muy común utilizar librerías externas, para ello podemos recurrir Node.JS.
React está diseñado para funcionar dentro de un ecosistema de paquetes.
+Ejemplos habituales:
+-
+
- React Router → navegación +
- Axios → peticiones HTTP +
- Chart.js → gráficas +
- Zustand / Redux → gestión de estado +
- Librerías de UI: Tailwind, Bootstrap, Booswatch +
npm
+npm (Node Package Manager) es el sistema que permite instalar y gestionar librerías de JavaScript. Como su nombre indica, está desarrollado por Node.JS
+Cada proyecto tiene un archivo:
+package.jsonEn este archivo se registran las dependencias del proyecto.
+Ejemplo:
+{
+ "dependencies": {
+ "react": "^18.0.0",
+ "react-router-dom": "^6.0.0"
+ }
+}Instalación de paquetes
+Las librerías se instalan desde la terminal.
+npm install react-router-domEsto hace tres cosas:
+-
+
- Descarga el paquete +
- Lo guarda en
node_modules(capreta donde se guardan las librerías externas)
+ - Añade la dependencia en
package.json
+
React Router
+En una aplicación web tradicional cada enlace carga una página nueva.
+En React normalmente trabajamos con Single Page Applications (SPA).
+En una SPA:
+-
+
- el navegador no recarga la página +
- React cambia los componentes que se muestran +
Para gestionar esto utilizamos React Router.
+Realmente es la misma página, solo que el usuario lo percibe como distintas páginas
+El usuario percibirá que el sitio web está divido en diferentes subpáginas
+-
+
/
+pokemons
+pokemons/pikachu
+
Componentes principales de React Router
+Los elementos fundamentales son:
+-
+
BrowserRouter
+Routes
+Route
+Link
+
Ejemplo básico:
+Elementos del código
+-
+
BrowserRouter
+Es el componente que activa el sistema de navegación de React Router. Utiliza la API de historial del navegador para cambiar la URL sin recargar la página.
+Routes
+Es el contenedor donde se definen todas las rutas de la aplicación. React Router examina las rutas dentro de este componente para decidir qué componente mostrar.
+Route
+Define una ruta concreta de la aplicación.
+
-
+
path
+Indica la URL que activa la ruta.
+Ejemplo:/corresponde a la página principal.
+element
+Es el componente de React que se renderiza cuando la URL coincide con elpath.
+<Home />
+Componente que se muestra cuando el usuario accede a la ruta/.
+<PokemonList />
+Componente que se muestra cuando el usuario accede a la ruta/pokemons.
+
Parámetros dinámicos
+Podemos crear rutas dinámicas.
+Ejemplo:
+/pokemon/25
+/pokemon/7Definición de la ruta:
+<Route path="/pokemon/:id" element={<PokemonDetail />} />useParams
+Para acceder al parámetro utilizamos el hook useParams de React Router.
import { useParams } from "react-router-dom";
+
+function PokemonDetail() {
+
+ const { id } = useParams();
+
+ return <p>Pokemon {id}</p>;
+
+}Este parámetro puede utilizarse para realizar peticiones a una API.
+Context API
+En aplicaciones grandes aparece un problema frecuente.
+Muchos componentes necesitan acceder a la misma información.
+Por ejemplo:
+-
+
- usuario +
- tema visual +
- idioma +
- configuración +
Si pasamos la información mediante props, los datos deben atravesar muchos componentes.
+Representación conceptual:
+App
+ └ Layout
+ └ Page
+ └ ComponentSi todos necesitan user, debemos pasar la prop continuamente.
Este problema se conoce como prop drilling.
+Context
+React proporciona una solución llamada Context.
+Context permite compartir información entre múltiples componentes sin pasar props manualmente.
+El proceso tiene tres pasos:
+-
+
- Crear el contexto +
- Proveer el contexto +
- Consumir el contexto +
Crear un contexto
+import { createContext } from "react";
+
+const UserContext = createContext();Esto crea un contenedor que puede almacenar información compartida.
+Provider
+El Provider permite que los componentes hijos accedan al contexto.
<UserContext.Provider value={user}>
+
+ <App />
+
+</UserContext.Provider>Todos los componentes dentro del Provider pueden acceder al valor.
Consumir el contexto
+Para acceder al contexto utilizamos el hook useContext.
import { useContext } from "react";
+
+const user = useContext(UserContext);El componente obtiene directamente el valor almacenado en el contexto.
+Ejemplo completo
+import { createContext, useContext } from "react";
+
+const UserContext = createContext();
+
+function App() {
+
+ const user = { name: "Javier" };
+
+ return (
+
+ <UserContext.Provider value={user}>
+
+ <Profile />
+
+ </UserContext.Provider>
+
+ );
+}
+
+function Profile() {
+
+ const user = useContext(UserContext);
+
+ return <h1>{user.name}</h1>;
+
+}