Las Puertas de Escape

Paso 7: useEffect y useRef

La regla de oro de React, es que los componentes deben ser "puros" y por lo tanto, se debe renderizar la interfaz basándose solo en estados y props. Sin embargo, a veces es necesario usar hooks para salir del flujo de React y conectarnos con el mundo exterior (en nuestro caso, usaremos localStorage ). A esto se le conoce como Puertas de Escape (Escape Hatches).

📍Utilizaremos dos hooks para esto:

  1. useRef: Nos da acceso directo al nodo nativo del DOM para poner el foco en el input automáticamente al agregar una tarea.
  2. useEffect: Sincroniza el estado de React con una API externa del navegador (localStorage), haciendo que las tareas se guarden y no se borren al recargar la página.

En el contexto informático, hook (traducible como "gancho") es un punto de inserción en el flujo de ejecución de un programa donde puedes inyectar tu propio código para modificar o extender su comportamiento, sin alterar el código original.

La idea es que el sistema "te deja colgarte" (hook into) en momentos específicos: antes o después de una operación, cuando ocurre un evento, etc.
Código del Paso 7 (index.html)

Una vez listo el programa, llega el momento de modularizar: separar los componentes, en archivos .jsx

Estructura de archivos de la carpeta:

  /mi-proyecto
  ├── index.html
  ├── App.jsx
  └── components/
      ├── Header.jsx
      ├── TodoForm.jsx
      ├── TodoList.jsx
      └── TodoItem.jsx
1. components/Header.jsx
2. components/TodoForm.jsx
3. components/TodoList.jsx
4. components/TodoItem.jsx
5. components/App.jsx

Enlazado

📍Muy Importante: Para utilizar import y export en el navegador vía Babel CDN, se debe agregar el atributo data-type="module" junto a type="text/babel":

6. index.html