Tu primer laboratorio de React

Introducción

Hola, bienvenido a LabEx. En este primer laboratorio, aprenderás el clásico programa "Hello, World!" en React.

Haz clic en el botón Continuar a continuación para comenzar el laboratorio.

Hola React

Requisitos previos

Antes de comenzar, debemos asegurarnos de que Node.js y npm estén instalados en la máquina virtual (VM) de LabEx.

Abre la terminal o el símbolo del sistema y ejecuta los siguientes comandos:

cd ~/project
curl -sL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get update
sudo apt-get install -y nodejs

Inicialización de React

Intentemos lanzar una demostración de "Hola Mundo" en React.

Abre tu terminal o el símbolo del sistema y ejecuta el siguiente comando para crear un nuevo proyecto de React:

cd ~/project
npx create-react-app hello-world-demo

Por favor, espera a que se complete la instalación.

Actualizar la aplicación de React

A continuación, actualicemos la aplicación de React predeterminada para mostrar un mensaje de "Hola, Mundo!".

Abre el archivo src/App.js en tu editor de código preferido y reemplaza el contenido con el siguiente código:

import React from "react";

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

export default App;

Por defecto, el servidor de desarrollo de React utiliza el puerto 3000. Para cambiarlo al puerto 8080, abre el archivo package.json en tu editor de código.

Ubica la sección scripts y actualiza el script start para incluir la variable de entorno PORT:

"scripts": {
  "start": "BROWSER=none PORT=8080 react-scripts start",
 ...
}

Finalmente, ejecuta el siguiente comando para iniciar el servidor de desarrollo de React:

cd hello-world-demo
npm start

¡Eso es todo! Has lanzado con éxito una demostración de "Hola Mundo" en React en tu servidor local utilizando el puerto 8080.

Ahora, puedes cambiar a la pestaña Web 8080 y hacer clic en el botón de actualizar para ver la página web.

Resumen

¡Felicidades! Has completado tu primer laboratorio en LabEx.

Si quieres aprender más sobre LabEx y cómo usarlo, puedes visitar nuestro Centro de Soporte. O puedes ver el vídeo para conocer más sobre LabEx.

La programación es un largo camino, pero el Siguiente Laboratorio está a solo un clic de distancia. ¡Empecemos!