Conceptos básicos en React:
1. Elementos Fundamentales
Componente: Bloque de construcción de la UI (una función de JavaScript) que retorna HTML/JSX. Puede ser reutilizable.
JSX: Sintaxis que permite escribir HTML directamente dentro de JavaScript. Luego se compila a código JS nativo.
Props (Propiedades): Datos que se le pasan a un componente desde su padre (como los argumentos de una función). Son de solo lectura (inmutables).
2. Estado y Reactividad
Estado (State): La memoria interna de un componente. Datos que pueden cambiar con el tiempo y que, al actualizarse, hacen que el componente se vuelva a renderizar.
Hooks: Funciones especiales (empiezan con
use) que te permiten "enganchar" el estado y el ciclo de vida de React en componentes funcionales.
3. Hooks Principales (Los que debes saber sí o sí)
useState: El hook para crear y actualizar el estado interno de un componente. Retorna el valor actual y una función para modificarlo.useEffect: El hook para manejar "efectos secundarios" (peticiones a APIs, suscripciones, modificar el DOM manualmente). Se ejecuta después del renderizado.Array de Dependencias (en useEffect): El segundo argumento del
useEffect. Si está vacío[], el efecto se ejecuta solo una vez (al montar el componente). Si tiene variables[data], se ejecuta cada vez que esas variables cambien.
4. Manejo de Listas y Renderizado
Virtual DOM: Una copia ligera del DOM real en memoria. React la usa para calcular los cambios mínimos necesarios antes de actualizar la pantalla real, mejorando el rendimiento.
Keys (Llaves): Un atributo único obligatorio al renderizar listas (
map). Ayuda a React a identificar qué elementos han cambiado, se han agregado o se han eliminado.
Diferencia entre Props y State:
"Las Props vienen de afuera y no se pueden modificar, el State se maneja por dentro y sí cambia para actualizar la pantalla"
