react actualizado

Author: s0raya

src/content/nodejs/api-rest.md

@@ -5,26 +5,51 @@ pubDate: '04/03/2025'
 collection: nodejs
 ---
 
-Una **API REST** permite la comunicación entre cliente y servidor usando HTTP y siguiendo una serie de convenciones.
+Una **API REST** (Representational State Transfer) es una forma de diseñar servicios web que permite la comunicación entre un cliente (frontend, Postman, otra API…) y un servidor mediante HTTP.
+
+Es el tipo de API más utilizado en aplicaciones web modernas.
 
 ## Principios REST
-- Uso de métodos HTTP
-- URLs que representan recursos
-- Comunicación sin estado (stateless)
-- Respuestas en formato JSON
-
-## Métodos HTTP
-| Método | Acción |
-|------|-------|
+Una API REST bien diseñada cumple los siguientes principios:
+
+- **Uso de métodos HTTP** para definir acciones
+- **URLs que representan recursos**, no acciones
+- **Stateless**: el servidor no guarda estado entre peticiones
+- **Formato JSON** como estándar de intercambio de datos
+
+## Métodos HTTP más comunes
+| Método | Uso |
+|------|-----|
 | GET | Obtener datos |
-| POST | Crear |
-| PUT | Actualizar |
+| POST | Crear un recurso |
+| PUT | Actualizar un recurso completo |
+| PATCH | Actualizar parcialmente |
 | DELETE | Eliminar |
 
-## Ejemplo de endpoints
+## Ejemplo de recursos
+Un recurso representa una entidad del sistema:
+
+- `/users`
+- `/products`
+- `/orders`
+
+Incorrecto:
+
+```js
+/getUsers
+/createUser
+```
+
+Correcto:
+```js
+GET /users
+POST /users
+```
+
+## Ejemplo de endpoints REST
 | Método | Ruta | Acción |
 |------|-----|-------|
-| GET | /users | Obtener usuarios |
+| GET | /users | Obtener todos |
 | POST | /users | Crear usuario |
 | GET | /users/:id | Obtener uno |
 | PUT | /users/:id | Actualizar |
@@ -34,6 +59,16 @@ Una **API REST** permite la comunicación entre cliente y servidor usando HTTP y
 ```js
 exports.getUsers = async (req, res) => {
   const users = await User.find();
-  res.json(users);
+  res.status(200).json(users);
 };
 ```
+
+## Códigos de estado HTTP
+Usar correctamente los códigos de estado es parte de REST:
+
+- 200 OK
+- 201 Created
+- 400 Bad Request
+- 401 Unauthorized
+- 404 Not Found
+- 500 Internal Server Error

src/content/nodejs/auth0-jwt.md

@@ -0,0 +1,169 @@
+---
+title: Auth0 y JWT
+description: ""
+pubDate: '10/03/2024'
+collection: nodejs
+---
+La **autenticación** es el proceso mediante el cual una aplicación verifica la identidad de un usuario antes de permitirle acceder a determinados recursos.
+
+En aplicaciones backend con Node.js es muy habitual utilizar **JWT (JSON Web Token)**, ya sea de forma manual o apoyándose en servicios externos como **Auth0**.
+
+## ¿Qué es un JWT?
+
+Un **JWT** es un token cifrado que contiene información del usuario y permite identificarlo sin necesidad de guardar sesiones complejas en el servidor.
+
+Características principales:
+- Es **autocontenido** (lleva la información dentro)
+- Tiene **fecha de caducidad**
+- Se puede verificar usando un **secreto**
+- Se envía en cada petición autenticada
+
+
+## Flujo típico de autenticación con JWT
+
+1. El usuario hace login
+2. El servidor valida las credenciales
+3. Se genera un JWT
+4. El token se guarda en la sesión o en el cliente
+5. En cada petición protegida se verifica el token
+
+
+
+## Generación del token
+
+En este ejemplo se utiliza la librería `jsonwebtoken` y un secreto cifrado almacenado en un archivo de configuración.
+
+### Función `generateToken`
+
+Esta función genera un token que contiene el `id` del usuario y caduca en una hora.
+
+```js
+const jwt = require('jsonwebtoken');
+const hashedSecret = require('../crypto/config.js');
+
+const generateToken = (user) => {
+  return jwt.sign(
+    {
+      user: user.id,
+    },
+    hashedSecret,
+    { expiresIn: '1h' }
+  );
+};
+```
+
+### ¿Qué hace esta función?
+- Inserta el identificador del usuario en el payload
+- Firma el token con un secreto
+- Define un tiempo de expiración
+- Devuelve el JWT generado
+
+
+
+## Almacenamiento del token en sesión
+
+En este enfoque, el token se guarda en la **sesión del servidor**, normalmente tras el login:
+
+```js
+req.session.token = generateToken(user);
+```
+
+Esto permite que el backend controle el acceso sin exponer el token directamente al frontend.
+
+
+
+## Middleware `isAuthenticated`
+
+Este middleware comprueba si existe un token en la sesión.
+
+```js
+const isAuthenticated = (req, res, next) => {
+  if (req.session.token) next();
+  else next('route');
+};
+```
+
+### ¿Para qué sirve?
+- Verifica si el usuario está autenticado
+- Si hay token → continúa
+- Si no hay token → salta la ruta protegida
+
+Es útil para proteger rutas sin validar aún el contenido del token.
+
+
+
+## Verificación del token
+
+Antes de permitir el acceso a rutas protegidas, es necesario **verificar que el token es válido**.
+
+### Middleware `verifyToken`
+
+```js
+const verifyToken = (req, res, next) => {
+  const token = req.session.token;
+
+  if (!token) {
+    return res.status(401).json({ message: 'token no generado' });
+  }
+
+  jwt.verify(token, hashedSecret, (err, decoded) => {
+    if (err) {
+      return res.status(401).json({ message: 'token invalido' });
+    }
+
+    req.user = decoded.user;
+    next();
+  });
+};
+```
+
+### ¿Qué hace este middleware?
+- Comprueba que existe un token
+- Verifica la firma y la expiración
+- Extrae el usuario del token
+- Lo añade a `req.user`
+- Permite continuar si es válido
+
+
+## Uso en rutas protegidas
+
+Ejemplo de ruta protegida usando ambos middlewares:
+
+```
+app.get('/profile', isAuthenticated, verifyToken, (req, res) => {
+  res.json({
+    message: 'Acceso permitido',
+    userId: req.user
+  });
+});
+```
+
+Solo los usuarios autenticados con token válido podrán acceder.
+
+
+## Relación con Auth0
+
+**Auth0** actúa como proveedor externo de autenticación:
+
+- Gestiona login y registro
+- Devuelve un JWT
+- El backend solo debe verificar el token
+
+En lugar de generar el token manualmente, Auth0 lo proporciona y se valida con su clave pública.
+
+Ventajas:
+- No gestionas contraseñas
+- Seguridad profesional
+- Compatible con OAuth
+- Ideal para proyectos reales
+
+
+## Resumen
+
+- JWT permite autenticar usuarios sin sesiones complejas
+- El token contiene información del usuario
+- Se genera al hacer login
+- Se verifica en cada petición protegida
+- Auth0 automatiza todo este proceso
+
+Este enfoque es ampliamente utilizado en APIs REST modernas.

src/content/nodejs/scraping.md

@@ -0,0 +1,57 @@
+---
+title: Scraping
+description: ""
+pubDate: '09/03/2024'
+collection: nodejs
+---
+
+El **scraping** consiste en obtener información de páginas web de forma automatizada, simulando el comportamiento de un usuario o de un navegador.
+
+Se utiliza para recolectar datos públicos disponibles en la web.
+
+## Casos de uso habituales
+- Comparadores de precios
+- Listados de ofertas
+- Monitorización de cambios en una web
+- Extracción de información pública
+
+## Herramientas más comunes
+- **axios / fetch** → realizar peticiones HTTP
+- **cheerio** → analizar HTML (similar a jQuery)
+- **puppeteer** → navegador real (Chrome)
+
+## Scraping estático vs dinámico
+- **Estático**: HTML generado en servidor (axios + cheerio)
+- **Dinámico**: contenido generado por JavaScript (puppeteer)
+
+## Ejemplo con axios y cheerio
+```js
+const axios = require("axios");
+const cheerio = require("cheerio");
+
+const scrapeTitles = async () => {
+  const { data } = await axios.get("https://example.com");
+  const $ = cheerio.load(data);
+
+  const titles = [];
+  $("h1").each((i, el) => {
+    titles.push($(el).text());
+  });
+
+  return titles;
+};
+```
+
+## Ejemplo de uso en una API
+```js
+app.get("/scrape", async (req, res) => {
+  const data = await scrapeTitles();
+  res.json(data);
+});
+```
+
+## Consideraciones legales y éticas
+- Respetar `robots.txt`
+- No saturar servidores
+- Scraping solo de datos públicos
+- Revisar términos de uso

src/content/react/arquitectura-componentes.md

@@ -0,0 +1,45 @@
+---
+title: Arquitectura de componentes
+description: ""
+pubDate: '01/04/2025'
+collection: react
+---
+
+Una buena arquitectura de componentes facilita el mantenimiento y escalabilidad de una aplicación React.
+
+
+## Componentes presentacionales y contenedores
+
+- **Presentacionales**: solo UI
+- **Contenedores**: lógica y datos
+
+
+## Ejemplo
+
+```js
+function UserView({ user }) {
+  return <p>{user.name}</p>;
+}
+```
+
+```js
+function UserContainer() {
+  const user = { name: "Sori" };
+  return <UserView user={user} />;
+}
+```
+
+
+## Organización de carpetas
+
+```markdown
+components/
+├── User/
+│ ├── UserView.jsx
+│ └── UserContainer.jsx
+```
+
+## Reglas básicas
+- Un componente = una responsabilidad
+- Evitar componentes demasiado grandes
+- Reutilizar antes de duplicar