React en otro vistazo (una sencilla aplicación)

En esta ocasión veremos cómo crear una sencilla aplicación con React. Es importante hacer notar que la herramienta https://create-react-app.dev/ ha sido deprecada (declarada obsoleta). Así que usaremos Vite para crear la aplicación.

En una entrega anterior como instalarlo y usarlo. Recordemos un poco.

Debemos contar con estas herramientas instaladas:

• Node y Npm. 
• Vite.

En caso de no tenerlo instalado, procedemos a teclear esto en una terminal de comandos:

$ npm install -g vite

Verificamos la instalación con cualquiera de estos comandos:

$ vite -- version
$ npm list -g vite

Crear una aplicación React con Vite nos lleva tan solo unos segundos (aproximadamente):

$ mkdir holamundo
$ cd holamundo
$ npm create vite@latest holamundo-react -- --template react
$ npm install
$ npm run dev

Se abrirá el navegador en la URL: http://localhost:5173/

Creando una aplicación con React (y Vite)

Podemos usar como base el proyecto anteriormente creado o crear uno nuevo:

$ npm create vite@latest pulsaciones -- --template react
$ cd pulsaciones

¿De qué tratará la aplicación?

• Se tratará de una aplicación que calcule el número de pulsaciones de una persona no deportista.
• Los datos de entrada serán la edad y género de la persona.
• Al final se mostrará el número de pulsaciones por segundo de acuerdo a su género y edad.

Fórmulas:

pulsaciones hombre = 220 - edad
pulsaciones mujer = 226 - edad

Nuestro algoritmo será el siguiente:

var edad,genero, pulsaciones
edad = 44
genero ='masculino'
pulsaciones = 0
IF edad == 0 THEN 

   IF genero == 'masculino' THEN 
      pulsaciones = 220 - edad 
   ELSE 
      pulsaciones = 226 - edad;
   END IF;
   
END IF; 

El bosquejo de nuestra aplicación luce así:

El usuario introducirá su edad y género. Dará clic al botón Calcular y obtendrá el número de pulsaciones de acuerdo a su género y edad.

Abrimos el directorio del proyecto creado.

Editamos el archivo ``src/App.jsx``.

import { useState } from 'react';

function App() {
  const [edad, setEdad] = useState('');
  const [genero, setGenero] = useState('masculino');
  const [resultado, setResultado] = useState(null);

  const calcularPulsaciones = () => {
    const edadNum = parseInt(edad);
    if (isNaN(edadNum) || edadNum <= 0) {
      setResultado('Por favor ingresa una edad válida.');
      return;
    }

    const pulsaciones =
      genero === 'masculino' ? 220 - edadNum : 226 - edadNum;

    setResultado(`${pulsaciones} pulsaciones`);
  };

  return (
    <div style={{ padding: '2rem', fontFamily: 'Arial' }}>
      <h2>Calculadora de Pulsaciones</h2>

      <label>
        Introduce edad:{' '}
        <input
          type="number"
          value={edad}
          onChange={(e) => setEdad(e.target.value)}
          style={{ marginLeft: '1rem' }}
        />
      </label>

      <div style={{ marginTop: '1rem' }}>
        Género:{' '}
        <label>
          <input
            type="radio"
            value="masculino"
            checked={genero === 'masculino'}
            onChange={(e) => setGenero(e.target.value)}
          />
          Masculino
        </label>
        <label style={{ marginLeft: '1rem' }}>
          <input
            type="radio"
            value="femenino"
            checked={genero === 'femenino'}
            onChange={(e) => setGenero(e.target.value)}
          />
          Femenino
        </label>
      </div>

      <button
        onClick={calcularPulsaciones}
        style={{ marginTop: '1rem', padding: '0.5rem 1rem' }}
      >
        Calcular
      </button>

      {resultado && (
        <div style={{ marginTop: '2rem', fontWeight: 'bold' }}>
          No. de pulsaciones de acuerdo a tu edad y género es: {resultado}
        </div>
      )}
    </div>
  );
}

export default App;

¿Qué podemos notar en el código?

• Usamos ``useState`` para manejar edad, género y resultado. 
• Se trata de un "hook" (gancho) de React que permite a los componentes funcionales tener un estado local, es decir, datos que pueden cambiar con el tiempo.
• Al llamar a la función de actualización con un nuevo valor, React re-renderizará automáticamente el componente para mostrar los cambios.
• El estado puede ser de cualquier tipo de dato, como un número, una cadena, un booleano, un objeto o un array.

Lo importamos de esta forma:

import { useState } from 'react';

Este "hook" es muy importante ya que permite a los componentes funcionales manejar su propio estado interno, que son datos que pueden cambiar con el tiempo e influir en el renderizado de la interfaz de usuario. Se usa para declarar una variable de estado y una función para actualizarla, devolviendo un par de valores: el estado actual y la función que lo modifica.

Para quienes vienen del "humilde" Javascript entenderán tal importancia, ya que esto nos llevaría bastante tiempo hacerlo a la "manera clásica". React nos provee de funciones que ahorran ese tiempo.

Ejecutamos la aplicación y abrimos el navegador:

$ npm run dev

La aplicación lucirá así:

Hasta aquí tenemos una aplicación usable. Pero, ¿le podemos agregar un estilo visual más llamativo? La respuesta es sí. Pero lo haremos en otra ocasión.

Por el momento, ¡Hemos creado una aplicación con React (y Vite)!

Más sobre React en próximas entregas.

Enlaces:

https://es.react.dev
https://alquimistadecodigo.blogspot.com/2021/10/react-js-en-un-vistazo.html
https://alquimistadecodigo.blogspot.com/2025/09/react-js-con-vite.html