¿Qué es React?

Biblioteca de JavaScript para construir interfaces de usuario interactivas.

Desarrollado por Meta (anteriormente Facebook).

Permite crear aplicaciones rápidas, escalables y mantenibles.

¿Qué NO es React?

No es un framework, no influye en la arquitectura.

No gestiona directamente el backend.

No es un lenguaje de programación, sino una biblioteca.

Historia

Creado en 2013 por Jordan Walke en Meta.

Usado inicialmente en el news feed de Facebook.

Se volvió open source y su adopción creció rápidamente.

Usos

Creación de SPAs (Single Page Applications).

Usado por grandes empresas como Facebook, Instagram, Netflix.

Enfocado en la reutilización de componentes.

Componentes

Unidad de código reutilizable que provee una interfaz de usuario.

Permiten dividir la interfaz en pequeñas partes independientes.

Anidación de componentes.

Ventajas de Usar Componentes

• Reutilización de código.
• Modularidad y mantenibilidad.
• Facilitan la composición de interfaces complejas.

Tipos de Componentes

Componentes Funcionales

Definidos como funciones de JavaScript.

Sintaxis más simple y directa.

Utilizan Hooks para manejar el estado y el ciclo de vida.

Devuelven JSX para renderizar la interfaz.

Ejemplo:

function Saludo() {
    return <h1>¡Hola, Mundo!</h1>;
}

Reciben propiedades (props) como entrada y retornan los elementos que se van a mostrar.

El ecosistema de React está migrando hacia componentes funcionales debido a su eficiencia y simplicidad.

Ventajas

• Código más limpio y fácil de leer.
• Mejor rendimiento al no necesitar instancias de clase.
• Simplificación con Hooks (como useState y useEffect).

Componentes de Clase

Clases que extienden a la React.Component class utilizando la sintaxis de clases de ES6.

Para mostrar el contenido tienen una función render que retorna el elemento que se va a mostrar.

Ejemplo:

class Saludo extends React.Component {
    render() {
        return <h1>¡Hola, Mundo!</h1>;
    }
}

Desventajas

• Código más extenso y complejo.
• Dificultad para usar conceptos modernos como Hooks.
• Menor rendimiento en comparación con los funcionales.

Props

Las props (propiedades) son datos que los componentes padres pasan a los componentes hijos.

Características

• Permiten la comunicación entre componentes.
• Son inmutables: No pueden ser modificadas por el componente hijo.
• Se pasan como atributos en el componente padre.

Uso de Props

Se accede a ellas mediante el argumento de la función.

function Saludo(props) {
    return <h1>¡Hola, {props.nombre}!</h1>;
}

Uso en el Componente Padre

function App() {
    return <Saludo nombre="Juan" />;
}

Ejemplo en Clase

class Saludo extends React.Component {
    render() {
        return <h1>¡Hola, {this.props.nombre}!</h1>;
    }
}

Ejemplo en Uso

Si se llama el componente así:

<Saludo nombre="Juan" />

El resultado será:

¡Hola, Juan!

Buenas Prácticas

• Utilizar nombres claros y descriptivos.
• Validar las props usando librerías como PropTypes.
• Evitar el uso de props innecesarias para reducir el tamaño del componente.

Ventajas

• Facilitan la reutilización de componentes.
• Permiten que los componentes hijos reciban datos desde el padre.
• Hacen posible el desarrollo modular.

Limitaciones

• No pueden ser modificadas directamente por el componente hijo.
• Si se necesita modificar, es mejor usar estado (state).

JSX

JSX (JavaScript XML) es una extensión de la sintaxis de JavaScript que permite escribir estructuras similares a HTML dentro del código JS.

Es más legible que simplemente crear los elementos en el DOM.

¿Por qué usar JSX?

• Facilita la legibilidad del código.
• Permite combinar estructura y lógica en un solo archivo.
• Hace más intuitiva la creación de componentes en React.

Ventajas

• Integración directa con funciones y variables de JavaScript.
• Permite escribir componentes de manera declarativa.
• Código más cercano a la estructura visual deseada.

Ejemplo

function Saludo() {
    const nombre = "Juan";
    return <h1>Hola, {nombre}!</h1>;
}

El contenido dentro de las llaves {} se interpreta como JavaScript.

Transpilación de JSX

Trnaspilar: combinación de las palabras transformation y compiling. Es el proceso de convertir de un lenguaje de alto nivel (jsx) a otro lenguaje de alto nivel (javascript)

El navegador no entiende JSX directamente.

JSX se convierte a JavaScript puro mediante herramientas como Babel.

React.createElement('h1', null, 'Hola, Mundo!');

El código transpilado puede ser más extenso, pero garantiza compatibilidad.

JSX vs HTML

Aunque JSX se parece a HTML, tiene diferencias clave:

• Usa className en lugar de class.
• Los elementos deben estar correctamente anidados.
• Siempre debe haber un solo elemento raíz en el retorno.

Babel

Babel es un transpilador de JavaScript que permite usar características modernas del lenguaje en navegadores antiguos.

¿Por qué es esencial en React?

• Convierte JSX a JavaScript puro.
• Transforma código moderno a versiones anteriores.
• Permite el uso de nuevas características como async/await.

Babel toma el código JSX y lo convierte en llamadas a React.createElement().

// Código JSX
const elemento = <h1>¡Hola!</h1>;

// Código convertido por Babel
const elemento = React.createElement('h1', null, '¡Hola!');

Virtual DOM

El Virtual DOM es una representación ligera del DOM real en memoria.

Se utiliza en React para optimizar el proceso de actualizar la interfaz de usuario.

A diferencia del DOM, el VDOM trabaja desde la memoria por lo que es más rápido y menos pesado.

Es una “copia” en la que todos los cambios que se den primero se reflejan en este y luego se pasan al DOM.

Ventajas

• Actualiza solo las partes necesarias de la interfaz.
• Mejora el rendimiento al reducir operaciones costosas en el DOM real.
• Facilita el proceso de reconciliación y renderizado.

¿Cómo funciona el Virtual DOM?

Cuando el estado de un componente cambia:

React crea un nuevo Virtual DOM actualizado.
Compara el nuevo Virtual DOM con el anterior (Diffing).
Solo aplica los cambios necesarios al DOM real (Reconciliación).

Beneficios

• Actualizaciones más rápidas y eficientes.
• Minimiza manipulaciones directas en el DOM.
• Mejora la experiencia del usuario al evitar bloqueos de la interfaz.

className

Es la forma en la que se le pueden definir clases a los componentes usando JSX. Su funcionalidad es igual a la del atributo class de HTML.

function Saludo(props) {
    return <h1 className="textoRojo">Hola {props.nombre}</h1>;
}

Hooks

Los Hooks son funciones que permiten usar estado y otras características de React sin escribir componentes de clase.

El estado hace referencia a la data que un componente maneja dentro de si mismo.

Introducidos en React 16.8 para facilitar el manejo del estado y el ciclo de vida en componentes funcionales.

Gracias a los Hooks, los componentes funcionales ahora pueden ser tan poderosos como los de clase.

Hooks más comunes

• useState: Maneja el estado local del componente.
• useEffect: Ejecuta efectos secundarios (fetch, subscripciones, etc.).

useState

Permite declarar variables de estado en un componente funcional.

Sintaxis básica

const [contador, setContador] = useState(0);

• contador: valor del estado.
• setContador: función para actualizar ese estado.

En el ejemplo anterior se está modificando el estado de la variable contador utilizando el método setContador y su valor inicial es de 0 ya que lo definimos en nuestro useState(0)

Internamente

• React almacena el valor del estado internamente.
• Al llamar a setContador, actualiza el valor y vuelve a renderizar el componente.
• El cambio de estado es asíncrono y eficiente.

useEffect

Permite ejecutar efectos secundarios en componentes funcionales.

Se utiliza para tareas como peticiones a APIs, suscripciones, temporizadores, y manipulación del DOM.

Realizar tareas que se salen del alcance (scope) del componente en el que se está trabajando.

Sintaxis básica

useEffect(() => {
    // lógica del efecto
}, []);

• El primer argumento es una función que contiene el efecto.
• El segundo argumento es un array de dependencias.

Ejemplo: Ejecutar una vez

useEffect(() => {
    console.log('El componente se montó');
}, []);

El efecto se ejecuta solo una vez.

Ejemplo: Ejecutar cuando cambie el estado

useEffect(() => {
    console.log('El contador cambió');
}, [contador]);

El efecto se ejecuta cada vez que contador cambia.

Internamente

• Ejecuta el código del efecto después del renderizado.
• Repite el efecto si cambian las dependencias.
• Limpia efectos anteriores si el componente se desmonta o cambian dependencias.

Dependencias

• Variables que, si cambian, deben volver a ejecutar el efecto.
• Si pones un array vacío [], el efecto solo corre una vez.