Cómo usar React desde un CDN

Integrar React usando un CDN es una forma rápida y sencilla de comenzar sin configuraciones complicadas. En esta guía, aprenderás a importar React y React DOM desde un CDN (Content Delivery Network). También incluimos el script de Babel para poder escribir nuestro código JSX directamente en el HTML. configurar tu entorno y crear tus primeros componentes.

  React desde un CDN

La aplicación React se define en el bloque de script con type="text/babel". Allí creamos un componente funcional llamado HelloWorld que renderiza un encabezado h1 y un párrafo. Finalmente, usamos ReactDOM.render() para montar el componente en el elemento con id “root” en el HTML.

html 
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React CDN Example</title>
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>

<script type="text/babel">
  const HelloWorld = () => {
    return (
      <div>
        <h1>Hello, World!</h1>
        <p>This is a simple React component.</p>
      </div>
    );
  };

  ReactDOM.render(<HelloWorld />, document.getElementById('root'));
</script>
</body>
</html>

Crear un botón de encendido/apagado con el hook useState en React desde un CDN

  encendido/apagado con el hook useState

En este ejemplo, estamos usando el hook useState para mantener el estado de si el botón está encendido o apagado. El componente ToggleButton tiene un estado inicial de false, que representa que el botón está apagado.

Cuando se hace clic en el botón, se llama a la función toggleButton, que actualiza el estado mediante setIsOn(!isOn). Esto cambia el valor de isOn de false a true o de true a false, alternando el estado del botón. Finalmente, renderizamos el componente ToggleButton en el elemento con id “root” en el HTML.

html 
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React Toggle Example</title>
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>

<script type="text/babel">
  const ToggleButton = () => {
    const [isOn, setIsOn] = React.useState(false);

    const toggleButton = () => {
      setIsOn(!isOn);
    };

    return (
      <div>
        <button onClick={toggleButton}>
          {isOn ? 'Apagar' : 'Encender'}
        </button>
        <p>El botón está {isOn ? 'encendido' : 'apagado'}.</p>
      </div>
    );
  };

  ReactDOM.render(<ToggleButton />, document.getElementById('root'));
</script>
</body>
</html>

1. Recorriendo una lista con el método map()

html 
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React Toggle Example</title>
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>

<script type="text/babel">
  const FruitList = () => {
  const fruits = ['Manzana', 'Banana', 'Naranja', 'Pera'];

  return (
    <div>
      <h2>Lista de Frutas</h2>
      <ul>
        {fruits.map((fruit, index) => (
          <li key={index}>{fruit}</li>
        ))}
      </ul>
    </div>
  );
};

ReactDOM.render(<FruitList />, document.getElementById('root'));
</script>
</body>
</html>

2. Consumiendo una API con useEffect()

html 
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React Toggle Example</title>
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>

<script type="text/babel">
const GitHubUser = () => {
  const [user, setUser] = React.useState(null);

  React.useEffect(() => {
    fetch('https://api.github.com/users/octocat')
      .then(response => response.json())
      .then(data => setUser(data));
  }, []);

  if (!user) return <div>Cargando...</div>;

  return (
    <div>
      <h2>Información de GitHub</h2>
      <p>Nombre: {user.name}</p>
      <p>Usuario: {user.login}</p>
      <p>Ubicación: {user.location}</p>
    </div>
  );
};

ReactDOM.render(<GitHubUser />, document.getElementById('root'));
</script>
</body>
</html>

3. Usando el hook useState() para un contador

html 
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React Toggle Example</title>
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>

<script type="text/babel">
const Counter = () => {
  const [count, setCount] = React.useState(0);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return (
    <div>
      <h2>Contador</h2>
      <p>El valor actual es: {count}</p>
      <button onClick={increment}>Incrementar</button>
      <button onClick={decrement}>Decrementar</button>
    </div>
  );
};

ReactDOM.render(<Counter />, document.getElementById('root'));
</script>
</body>
</html>

4. Consumir datos de un archivo JSON y mostrarlos en una tabla de empleados

  Explicación

  • Usamos el hook `useState para almacenar la lista de empleados en el estado del componente.
  • Utilizamos el hook useEffect para hacer la petición a la API (en este caso, a un archivo JSON) cuando el componente se monta.
  • Una vez que tenemos los datos, los mostramos en una tabla HTML, iterando sobre el array de empleados con map().
  • Cada fila de la tabla se genera a partir de los datos de cada empleado.

Asegúrate de tener un archivo employees.json en el mismo directorio con datos de empleados en el siguiente formato:

json 
[
{
  "id": 1,
  "name": "John Doe",
  "age": 32,
  "position": "Developer",
  "salary": 65000
},
{
  "id": 2,
  "name": "Jane Smith",
  "age": 28,
  "position": "Designer",
  "salary": 55000
},
{
  "id": 3,
  "name": "Bob Johnson",
  "age": 45,
  "position": "Manager",
  "salary": 85000
}
]

Resultado Final

html 
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React Toggle Example</title>
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<style>
  *{
      margin: 0;
      padding: 0;
  }
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
  }
  header {
    background-color: #333;
    color: #fff;
    padding: 1rem;
  }
  header h1 {
    margin: 0;
  }
  .content {
    padding: 2rem;
  }
  footer {
    background-color: #f2f2f2;
    padding: 1rem;
    text-align: center;
  }
</style>
</head>
<body>
<div id="root"></div>

<script type="text/babel">
const EmployeeTable = () => {
  const [employees, setEmployees] = React.useState([]);

  React.useEffect(() => {
    fetch('employees.json')
      .then(response => response.json())
      .then(data => setEmployees(data));
  }, []);

  return (
    <div>
      <h2>Tabla de Empleados</h2>
      <table>
        <thead>
          <tr>
            <th>Nombre</th>
            <th>Edad</th>
            <th>Puesto</th>
            <th>Salario</th>
          </tr>
        </thead>
        <tbody>
          {employees.map(employee => (
            <tr key={employee.id}>
              <td>{employee.name}</td>
              <td>{employee.age}</td>
              <td>{employee.position}</td>
              <td>${employee.salary.toFixed(2)}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

ReactDOM.render(<EmployeeTable />, document.getElementById('root'));
</script>
</body>
</html>

Renderizar varios componentes a la vez en React usando el CDN

html 
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React Toggle Example</title>
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>

<script type="text/babel">
const PageTitle = () => {
  const [title, setTitle] = React.useState('Título de Página');

  React.useEffect(() => {
    document.title = title;
  }, [title]);

  const updateTitle = () => {
    setTitle(`Nuevo título: ${new Date().toLocaleString()}`);
  };

  return (
    <div>
      <h2>Actualizar Título de Página</h2>
      <p>El título actual es: {title}</p>
      <button onClick={updateTitle}>Actualizar Título</button>
    </div>
  );
};

ReactDOM.render(<PageTitle />, document.getElementById('root'));
</script>
</body>
</html>
  Resumen

En este ejemplo, tenemos tres componentes diferentes:

  • Header: Muestra el título de la aplicación.
  • Content: Muestra el contenido principal.
  • Footer: Muestra un pie de página.

Luego, creamos un componente App que renderiza los tres componentes anteriores.

Finalmente, llamamos a ReactDOM.render() para montar el componente App en el elemento con el ID ‘root’ en el HTML.

Cuando se carga la página, verás el encabezado, el contenido principal y el pie de página renderizados juntos. Recuerda que puedes agregar más componentes a la aplicación siguiendo el mismo patrón. Además, cada componente puede tener sus propias props y estado para hacerlos más dinámicos y reutilizables.