React.js: Creando tu Primera Aplicación Web

¿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 <h1>¡Hola, {nombre}!</h1>;
}

// Uso del componente
function App() {
    return (
        <div>
            <Saludo nombre="Mundo" />
            <Saludo nombre="ConfiguroWeb" />
        </div>
    );
}

Estado con useState

import { useState } from "react";

function Contador() {
    const [count, setCount] = useState(0);
    
    return (
        <div>
            <p>Has hecho clic {count} veces</p>
            <button onClick={() => setCount(count + 1)}>
                Incrementar
            </button>
        </div>
    );
}

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 <p>Cargando...</p>;

    return (
        <ul>
            {usuarios.map(u => (
                <li key={u.id}>{u.name}</li>
            ))}
        </ul>
    );
}

Props: Comunicación entre Componentes

function Tarjeta({ titulo, descripcion, imagen }) {
    return (
        <div className="tarjeta">
            <img src={imagen} alt={titulo} />
            <h3>{titulo}</h3>
            <p>{descripcion}</p>
        </div>
    );
}

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.