Configurando un entorno de desarrollo con Visual Studio Code para React

React es una de las librerías más populares actualmente para la gestión de proyectos front-end. Por ello, es ideal saber cómo configurar nuestro entorno para proyectos en React. Aunque la documentación oficial sugiere usar el comando:

npm create-react-app nombre-del-proyecto

En los últimos años, esta práctica ha sido cuestionada. Muchos desarrolladores están optando por Vite en lugar de Create React App (CRA) para iniciar proyectos en React, ya que Vite es más rápido y flexible. A diferencia de CRA, que utiliza Webpack y puede volverse lento en proyectos grandes, Vite emplea herramientas como ESBuild y Rollup, las cuales permiten que el servidor y las compilaciones del proyecto empiecen casi de inmediato. Es decir, que puedes ver los cambios en tu código al instante.

Pasos para Configurar un entorno de desarrollo con Visual Studio Code para React

1. Instalación de Node.js y npm

Antes de preparar nuestro entorno para React en Visual Studio Code, necesitamos tener instalados Node.js y npm. Puedes verificar si están instalados usando los siguientes comandos:

node -v 
npm -v

imagen de consola con los comandos para ver la versión de Node y npm

(Guía paso a paso para Instalar Git)

2. Ubicación del Proyecto

Ubícate en la carpeta de tu ordenador donde se guardará el proyecto. Abre la consola (Git Bash, CMD o PowerShell), navega hasta la carpeta deseada (por ejemplo, /codeinprogress), y ejecuta el siguiente comando para crear el proyecto React con Vite:

npm create vite@latest nombre-del-proyecto --template react

3. Confirmación de Instalación

Aparecerá el mensaje “OK to proceed (y)”. Escribe "y" (yes) para confirmar la instalación.

Confirmacion de la instalacion

4. Selección del Framework

Selecciona el framework o la librería que vamos a usar; en este caso, elige React.

Escoger el framework

5. Selección del Lenguaje

Escoge el lenguaje con el que deseas trabajar: TypeScript, TypeScript + SWC, JavaScript o JavaScript + SWC, de acuerdo a tus preferencias o necesidades del proyecto. En este ejemplo, seleccionamos TypeScript.

Escoger el lenguaje

6. Ingreso a la Carpeta del Proyecto

Una vez creado el proyecto, aparecerá el mensaje “Done”. Desde la consola, ingresa a la carpeta del proyecto creado con el siguiente comando:

cd react-prueba

7. Instalación de Dependencias

Instala las dependencias del proyecto con el comando:

npm install

8. Ejecución del Servidor

Abre el servidor con el siguiente comando:

npm run dev

Comando para el local host

Esto mostrará la dirección de localhost. Abre esa dirección en tu navegador para confirmar que el proyecto está en funcionamiento.

Pagina web con el servidor abierto

9. Apertura en Visual Studio Code

Abre Visual Studio Code y visualiza la estructura de carpetas, incluyendo el directorio src, que es la raíz de tu código. Al revisar los ficheros, deberías ver las exportaciones de React configuradas correctamente.

imagen de Visual Stude Code abierto con el proyecto de React creado

Configurar un entorno de desarrollo para React con Visual Studio Code y Vite puede ofrecer ventajas en términos de velocidad y flexibilidad en los proyectos. Con Vite, el flujo de trabajo resulta ágil, y los cambios se reflejan rápidamente, haciendo que el proceso de desarrollo sea eficiente.