Configuración de React y Primera Aplicación

Introducción

¡Bienvenido a tu primer laboratorio de React! React es una potente biblioteca de JavaScript para construir interfaces de usuario dinámicas e interactivas. Para comenzar con el desarrollo en React, primero necesitas configurar un entorno de desarrollo adecuado.

En este laboratorio, utilizarás la moderna herramienta de compilación Vite para iniciar un nuevo proyecto. Te guiaremos a través del proceso de exploración de la estructura del proyecto, instalación de dependencias, inicio de un servidor de desarrollo, modificación de un componente existente y creación de uno nuevo. Al final de este laboratorio, tendrás una comprensión fundamental de la configuración del proyecto React y estarás listo para construir tus propios componentes.

Explorar Proyecto e Instalar Dependencias

El proceso de configuración ya ha creado un nuevo proyecto de React para ti en un directorio llamado my-app usando Vite. Primero, verifiquemos que tu entorno de desarrollo tenga las herramientas necesarias, Node.js y npm.

Abre la terminal y ejecuta los siguientes comandos para verificar sus versiones:

node -v

Deberías ver una salida que indica la versión de Node.js, por ejemplo:

v22.19.0

A continuación, verifica la versión de npm:

npm -v

Deberías ver una salida similar para la versión de npm:

10.9.3

Ahora, navega al directorio del proyecto. Todos los comandos subsiguientes deben ejecutarse desde dentro de este directorio.

cd my-app

Tu aplicación React necesita varios paquetes para funcionar, los cuales están listados en el archivo package.json. Necesitas instalar estas dependencias usando npm.

Ejecuta el siguiente comando:

Importante: Por razones de seguridad, los usuarios gratuitos no pueden conectarse a internet, por lo que los paquetes npm no se pueden instalar. Puedes continuar leyendo la documentación, experimentar otros Web Development Labs, o considerar actualizar a un usuario Pro.

npm install

Este comando lee el archivo package.json y descarga todas las bibliotecas requeridas en una carpeta node_modules dentro de tu proyecto. Verás una barra de progreso y algunos mensajes a medida que se instalan los paquetes.

Iniciar el Servidor de Desarrollo

Para ver tu aplicación React en funcionamiento, necesitas iniciar el servidor de desarrollo. Dado que ya te encuentras dentro del directorio my-app, puedes usar el script proporcionado por Vite.

Ejecuta el siguiente comando para iniciar el servidor en el puerto 8080:

npm run dev -- --host 0.0.0.0 --port 8080

Este comando inicia el servidor y ocupará tu terminal, mostrando la URL local donde se está ejecutando la aplicación. Deja esta terminal en ejecución. Después de un momento, verás un mensaje indicando que el servidor está listo.

Para ver tu aplicación, haz clic en la pestaña Web 8080 en la parte superior de la interfaz. Deberías ver la página de bienvenida predeterminada de Vite y React.

Nota: Si no ves la aplicación, intenta hacer clic en el botón de recargar ubicado a la izquierda de la barra de direcciones en la pestaña Web 8080.

Modificar tu Primer Componente

El servidor de desarrollo de Vite cuenta con Hot Module Replacement (HMR), que actualiza instantáneamente la aplicación en tu navegador cuando guardas cambios en un archivo. Veamos esto en acción.

En el explorador de archivos de la izquierda, navega a my-app -> src y haz clic en el archivo App.jsx para abrirlo en el editor. Este archivo define el componente principal App.

Dentro de la declaración return, verás un bloque de código que parece HTML. Esto es JSX, una extensión de sintaxis para JavaScript que te permite escribir estructuras de UI de una manera familiar.

Reemplaza todo el contenido dentro de return (...) con un encabezado simple. Tu archivo App.jsx debería verse así:

import "./App.css";

function App() {
  return (
    <>
      <h1>Hello, LabEx!</h1>
    </>
  );
}

export default App;

Guarda el archivo presionando Ctrl+S (o Cmd+S en Mac). Ahora, vuelve a la pestaña Web 8080. Verás que la página se ha actualizado instantáneamente para mostrar tu nuevo encabezado "Hello, LabEx!".

Crear un Nuevo Componente

Un principio fundamental de React es construir UIs a partir de piezas pequeñas y reutilizables llamadas componentes. Vamos a crear un nuevo componente.

1. En el explorador de archivos de la izquierda, haz clic derecho en el directorio src dentro de my-app.
2. Selecciona "New File" (Nuevo Archivo) y nómbralo Welcome.jsx.
3. Abre el archivo Welcome.jsx recién creado y añade el siguiente código:

import React from "react";

function Welcome() {
  return <h2>Welcome to my first React App!</h2>;
}

export default Welcome;

Analicemos este código:

• import React from 'react';: Esta línea es necesaria para cualquier archivo que utilice JSX.
• function Welcome() { ... }: Esto define un componente funcional simple llamado Welcome.
• return <h2>...</h2>;: El componente devuelve un elemento JSX que se renderizará en la pantalla.
• export default Welcome;: Esto hace que el componente Welcome esté disponible para su uso en otros archivos.

Guarda el archivo (Ctrl+S). Aún no habrá ningún cambio en el navegador, ya que no hemos utilizado este nuevo componente.

Usar tu Nuevo Componente

Ahora que has creado el componente Welcome, vamos a usarlo dentro de nuestro componente principal App. Esto se conoce como composición de componentes.

1. Abre de nuevo el archivo my-app/src/App.jsx.
2. En la parte superior del archivo, añade una declaración import para incluir tu nuevo componente:

import Welcome from "./Welcome.jsx";

3. A continuación, coloca tu nuevo componente dentro de la declaración return del componente App. Añade <Welcome /> debajo de la etiqueta <h1> para renderizar el componente. El código final para App.jsx debería verse así:

import "./App.css";
import Welcome from "./Welcome.jsx";

function App() {
  return (
    <>
      <h1>Hello, LabEx!</h1>
      <Welcome />
    </>
  );
}

export default App;

4. Guarda el archivo App.jsx (Ctrl+S).

Cambia a la pestaña Web 8080 una última vez. Ahora verás el mensaje "Welcome to my first React App!" renderizado debajo de tu encabezado principal. ¡Has creado y compuesto componentes de React con éxito!

Resumen

En este laboratorio, has dado los primeros pasos esenciales en el mundo del desarrollo con React utilizando la moderna cadena de herramientas Vite.

Aprendiste a:

• Verificar un entorno de desarrollo de Node.js y npm.
• Crear un nuevo proyecto de React usando Vite.
• Instalar las dependencias del proyecto con npm install.
• Iniciar el servidor de desarrollo de React usando npm run dev.
• Modificar un componente existente y ver actualizaciones en vivo con Hot Module Replacement.
• Crear un nuevo componente funcional desde cero en un archivo .jsx.
• Importar y componer componentes para construir una UI más compleja.

Has configurado con éxito un proyecto de React, experimentado el flujo de trabajo de desarrollo moderno y practicado los fundamentos de la arquitectura basada en componentes. Ahora estás bien preparado para abordar conceptos más avanzados de React.