¿Qué es React.js?

React es una biblioteca de JavaScript creada por Meta para construir interfaces de usuario. Se basa en componentes reutilizables y un DOM virtual para un renderizado eficiente.

Creando tu Primer Proyecto

# Con Vite (recomendado)
npm create vite@latest mi-app -- --template react
cd mi-app
npm install
npm run dev

Componentes y JSX

// Componente funcional
function Saludo({ nombre }) {
    return 
¡Hola, {nombre}!
;
}

// Uso del componente
function App() {
    return (
        

            
            
        
    );
}

Estado con useState

import { useState } from "react";

function Contador() {
    const [count, setCount] = useState(0);
    
    return (
        

            
Has hecho clic {count} veces
             setCount(count + 1)}>
                Incrementar
            
        
    );
}

Efectos con useEffect

import { useState, useEffect } from "react";

function ListaUsuarios() {
    const [usuarios, setUsuarios] = useState([]);
    const [cargando, setCargando] = useState(true);

    useEffect(() => {
        fetch("https://jsonplaceholder.typicode.com/users")
            .then(res => res.json())
            .then(data => {
                setUsuarios(data);
                setCargando(false);
            });
    }, []);

    if (cargando) return 
Cargando...
;

    return (
        

            {usuarios.map(u => (
                
{u.name}
            ))}
        
    );
}

Props: Comunicación entre Componentes

function Tarjeta({ titulo, descripcion, imagen }) {
    return (
        

            
            
{titulo}
            
{descripcion}
        
    );
}

Conclusión

React.js es una de las herramientas más demandadas en el mercado laboral. Dominar sus fundamentos te abrirá muchas puertas en el desarrollo web frontend.