Conceptos Básicos en React

 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"