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

Aquí, 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 contexto, 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.