diff --git a/README.es-ES.md b/README.es-ES.md new file mode 100644 index 0000000..dd057b2 --- /dev/null +++ b/README.es-ES.md @@ -0,0 +1,234 @@ + + +# Taller de React Hooks + +Un taller que profundiza en todos los hooks incorporados de React + +## Para comenzar + +### Requisitos previos + +- Node.js >= 20.0.0 +- npm o yarn como administrador de paquetes + +### Instalación + +1. Clona el repositorio: + + ```bash + git clone https://github.com/andrekovac/react-hooks-workshop.git + cd react-hooks-workshop + ``` + +2. Instala las dependencias: + + ```bash + npm install + ``` + +3. Inicia el servidor de desarrollo: + + ```bash + npm run dev + ``` + +4. Abre tu navegador y navega a la URL que se muestra en la terminal (típicamente `http://localhost:5173`) + +### Scripts disponibles + +- `npm run dev` - Inicia el servidor de desarrollo +- `npm run build` - Compila el proyecto para producción +- `npm run preview` - Vista previa de la compilación de producción localmente +- `npm run lint` - Ejecuta ESLint para verificar la calidad del código + +### Configuración de React Compiler + +Este proyecto incluye soporte para React Compiler. Puedes habilitarlo o deshabilitarlo en `vite.config.ts`: + +```typescript +const ReactCompilerConfig = { + sources: (_filename: string) => { + return true; // true = habilitado, false = deshabilitado + }, +}; +``` + +Consulta la [sección de React Compiler](./sections/react-compiler.md) para ejemplos interactivos y ejercicios de aprendizaje. + +## Estructura de este documento + +- El corazón de este documento son los enlaces "**CodeSandBox**". La mayoría están escritos en TypeScript, algunos en JavaScript (marcados con "**(JS)**") +- Una parte del documento es un recorrido que introduce gradualmente los hooks a través de escenarios ``. +- Además, hay otros ejemplos que cubren otros hooks o puntos interesantes relacionados con ellos. + +## Temas + +1. [Definición de hooks de React](./sections/definition.md) +2. [Conceptos básicos del estado en React](./sections/react-state-basics.md) +3. [Configuración y recuperación asíncrona](./sections/async-setting-and-retrieval.md) +4. [Hook `useRef`](./sections/useRef.md) +5. [Hook `useEffect`](./sections/useEffect.md) + + - matriz de dependencias + - cómo prevenir condiciones de carrera al obtener datos + +6. [Hook `useCallback`](./sections/useCallback.md) + + - Cubre la heurística "Eliminar dependencias: **funciones**" + +7. [hooks personalizados](./sections/custom-hook.md) +8. [Interacción entre `useEffect` y `useState`](./sections/use-effect-use-state-interplay.md) + + - Cubre la heurística "Eliminar dependencias: **valores**" + +9. [`useReducer`](./sections/useReducer.md) +10. [`useLayoutEffect`](./sections/useLayoutEffect.md) + + Temas cubiertos: + + - `useLayoutEffect` frente a `useEffect` + - uso atípico de la función setter de `useState` + - matriz de dependencias de `useEffect`/`useLayoutEffect` con **refs** + - **ciclo de vida** de los hooks de React + +11. [Componentes de clase frente a función](./sections/class-vs-function-component.md) +12. [Mejora de rendimiento del HOC `React.memo`](./sections/react-memo.md) + + Temas cubiertos: + + - cómo evitar renderizados innecesarios en React + - Interacción con el hook `useCallback` + - Cómo los cambios en las props desencadenan renderizados + - Discusión sobre la organización del código + +13. [React Compiler (React 19+)](./sections/react-compiler.md) + + Temas cubiertos: + + - Memorización automática frente a optimización manual + - Qué puede y no puede optimizar React Compiler + - Ejemplos interactivos con ejercicios de habilitar/deshabilitar + - Limitaciones de React Compiler y consideraciones del mundo real + - Cuándo seguir utilizando `React.memo`, `useCallback` y `useMemo` + - Estabilidad de referencias y comparación de props + +14. [Hook `useMemo`](./sections/useMemo.md) +15. [Hook `useImperativeHandle`](./sections/useImperativeHandle.md) +16. [Hook `useSyncExternalStore` (React 18)](./sections/useSyncExternalStore.md) +17. [Hook `useEffectEvent` (React 19.2+)](./sections/useEffectEvent/README.md) + + Temas cubiertos: + + - Leer las últimas props/estado en Effects sin re-ejecuciones + - Patrones de análisis y registro (logging) + - Reglas de Effect Event y aplicación con ESLint + - Comparación con `useCallback` + +18. [Contexto + hook `useContext`](./sections/useContext.md) +19. [Depuración (incl. hook `useDebugValue`)](./sections/debugging.md) +20. [Modo Concurrente](./sections/concurrentMode/index.md) + + Temas cubiertos: + + - Componente `Suspense` + - Componente `ErrorBoundary` + - Hook `useTransition` + - Hook `useDeferredValue` + - Interacción entre `useTransition` y `useDeferredValue` + - `useTransition` y `useDeferredValue` con `useEffect` + +## Extra + +- [Hook `usePrevious`](./sections/extra-usePrevious-hook.md) +- [Error de `useState`: `setState` en componente desmontado](./sections/setState-on-unmounted-component.md) +- [Llamadas agrupadas a `useState`](./sections/batched-useState-calls.md) +- [React StrictMode](./sections/StrictMode.md) +- [Composición](./sections/composition.md) + +--- + +## Comentarios adicionales + +- Los enlaces proporcionados a la biblioteca de React provienen de su implementación de `server`. Sin embargo, ejemplifican su funcionamiento mejor que las definiciones de hooks en otras partes de la base de código de React, ya que allí son más abstractas. +- Completar todos los ejemplos como parte de un taller tomará al menos un día, más realistamente 1.5 días. +- Este es un documento vivo y está lejos de ser perfecto. Lo iré mejorando gradualmente aquí y allá, y añadiré nuevas notas y ejemplos. + +## Agradecimientos + +Este curso es una colección de ejemplos de código inspirados en otros artículos de blog y fragmentos de código escritos por maravillosos desarrolladores. A veces simplemente los adapté de otros. Aprendí mucho de ellos mientras trabajaba con sus artículos y ejemplos. ¡Muchas gracias! Algunas secciones contienen enlaces a otros artículos útiles. + +Debo destacar un artículo en particular aquí: muchos ejemplos de este curso se basan en el artículo de blog de [Dan Abramov](https://github.com/gaearon) [A Complete Guide to useEffect](https://overreacted.io/a-complete-guide-to-useeffect/). ¡Gracias por esta lectura muy esclarecedora! + +Y un gran agradecimiento a todos mis alumnos con quienes trabajé los ejemplos. Sus preguntas y comentarios están mejorando continuamente este curso. ¡Gracias! + +## Enlaces de StackBlitz + +Abre cualquier ejemplo directamente en StackBlitz: + +**Conceptos básicos del estado en React:** + +- [Estado interno frente a externo](https://stackblitz.com/github/andrekovac/react-hooks-workshop?file=src/pages/reactStateBasics/InternalVsExternalStatePage.tsx) +- [Mutable frente a inmutable](https://stackblitz.com/github/andrekovac/react-hooks-workshop?file=src/pages/reactStateBasics/MutableVsImmutablePage.tsx) +- [Un cambio de estado, todo nuevo](https://stackblitz.com/github/andrekovac/react-hooks-workshop?file=src/pages/reactStateBasics/OneStateChangeAllNewPage.tsx) +- [El setter crea nuevos objetos](https://stackblitz.com/github/andrekovac/react-hooks-workshop?file=src/pages/reactStateBasics/SetterCreatesNewObjectsPage.tsx) +- [useState Básico](https://stackblitz.com/github/andrekovac/react-hooks-workshop?file=src/pages/reactStateBasics/UseStateBasicPage.tsx) + +**Configuración y recuperación asíncrona:** + +- [Configuración asíncrona](https://stackblitz.com/github/andrekovac/react-hooks-workshop?file=src/pages/asyncSettingAndRetrieval/AsyncSettingPage.tsx) +- [Recuperación asíncrona (Primitivo)](https://stackblitz.com/github/andrekovac/react-hooks-workshop?file=src/pages/asyncSettingAndRetrieval/AsyncRetrievalPage.tsx) +- [Recuperación asíncrona (Objeto)](https://stackblitz.com/github/andrekovac/react-hooks-workshop?file=src/pages/asyncSettingAndRetrieval/AsyncRetrievalObjectPage.tsx) + +**useRef:** + +- [Ref frente a estado frente a local](https://stackblitz.com/github/andrekovac/react-hooks-workshop?file=src/pages/useRef/RefVsStateVsLocal.tsx) +- [Ref frente a variable externa](https://stackblitz.com/github/andrekovac/react-hooks-workshop?file=src/pages/useRef/RefVsExternalVariable.tsx) +- [Ref de timeout de estado asíncrono](https://stackblitz.com/github/andrekovac/react-hooks-workshop?file=src/pages/useRef/AsyncStateTimeoutRef.tsx) + +**useEffect:** + +- [Obtener películas](https://stackblitz.com/github/andrekovac/react-hooks-workshop?file=src/pages/useEffect/FetchMoviesPage.tsx) +- [Condición de carrera](https://stackblitz.com/github/andrekovac/react-hooks-workshop?file=src/pages/useEffect/RaceConditionPage.tsx) +- [Interacción useEffect/useState](https://stackblitz.com/github/andrekovac/react-hooks-workshop?file=src/pages/useEffectUseStateInterplay/UseEffectUseStateInterplayPage.tsx) + +**useReducer:** + +- [Demo de useReducer](https://stackblitz.com/github/andrekovac/react-hooks-workshop?file=src/pages/useReducer/UseReducerPage.tsx) + +**Clase frente a función:** + +- [Clase frente a función](https://stackblitz.com/github/andrekovac/react-hooks-workshop?file=src/pages/classVsFunction/ClassVsFunctionPage.tsx) + +**Rendimiento:** + +- [Vista general del rendimiento](https://stackblitz.com/github/andrekovac/react-hooks-workshop?file=src/pages/performance/ReactMemoPage.tsx) +- [Parte 1: Prevención de renderizados](https://stackblitz.com/github/andrekovac/react-hooks-workshop?file=src/pages/performance/ReactMemoPage1.tsx) +- [Parte 2: Memorización con manejadores](https://stackblitz.com/github/andrekovac/react-hooks-workshop?file=src/pages/performance/ReactMemoPage2.tsx) + +**React Compiler:** + +- [React Compiler - Problema Página 1](https://stackblitz.com/github/andrekovac/react-hooks-workshop?file=src/pages/performance/page1/Problem.tsx) +- [React Compiler - Solución Página 1](https://stackblitz.com/github/andrekovac/react-hooks-workshop?file=src/pages/performance/page1/Solution2Memo.tsx) +- [React Compiler - Problema Página 2](https://stackblitz.com/github/andrekovac/react-hooks-workshop?file=src/pages/performance/page2/Problem.tsx) +- [React Compiler - Solución Página 2](https://stackblitz.com/github/andrekovac/react-hooks-workshop?file=src/pages/performance/page2/Solution2UseCallback.tsx) + +**Hook personalizado:** + +- [Demo de hook personalizado](https://stackblitz.com/github/andrekovac/react-hooks-workshop?file=src/pages/customHook/CustomHookPage.tsx) + +**useEffectEvent:** + +- [Demo de useEffectEvent](https://stackblitz.com/github/andrekovac/react-hooks-workshop?file=src/pages/useEffectEvent/UseEffectEventPage.tsx) + +**useLayoutEffect:** + +- [Demo de useLayoutEffect](https://stackblitz.com/github/andrekovac/react-hooks-workshop?file=src/pages/useLayoutEffect/UseLayoutEffectPage.tsx) + +**useCallback:** + +- [Demo de useCallback](https://stackblitz.com/github/andrekovac/react-hooks-workshop?file=src/pages/useCallback/UseCallbackPage.tsx) + +## Recursos destacados + +- [React eli5](https://github.com/reactwg/react-18/discussions/46) + Eli5 (explicado como a un niño de 5 años) son excelentes artículos para cada tema. Es genial que también haya uno para React.