Estudio de React.js

• Componentes reutilizables
• Flujo de datos unidireccional
• Virtual DOM para manipulación eficiente del DOM

• Aplicaciones de una sola página (SPA)
• Móviles a través de React Native
• Interfaces de usuario interactivas

Instalación: npm i react react-dom

import React from 'react';
import { createRoot } from 'react-dom/client';
createRoot(document.getElementById('root'))
  .render(<h1>Hola React</h1>);

1. Formulario controlado

Captura texto en un input controlado por estado y muestra el valor en vivo.

import React, { useState } from 'react';

function Formulario() {
  const [nombre, setNombre] = useState('');

  return (
    <form onSubmit={(e) => { e.preventDefault(); alert('Hola ' + nombre); }}>
      <input value={nombre} onChange={(e) => setNombre(e.target.value)} />
      <button>Enviar</button>
    </form>
  );
}

2. Lista de datos con fetch

Carga usuarios de una API y los muestra en una lista.

import React, { useState, useEffect } from 'react';

function Lista() {
  const [items, setItems] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then((r) => r.json())
      .then(setItems);
  }, []);

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