Compartir a través de

Instalación de React en el Subsistema de Windows para Linux

  • Artículo

Esta guía le guiará en la instalación de React en una distribución de Linux (por ejemplo, Ubuntu) que se ejecuta en el Subsistema de Windows para Linux (WSL) mediante la cadena de herramientas front-end vite.

Se recomienda seguir estas instrucciones si va a crear una aplicación de página única (SPA) con la que desea usar comandos o herramientas de Bash o planea la implementación en un servidor Linux o usar contenedores de Docker. Si no está familiarizado con React y solo está interesado en el aprendizaje, puede considerar la posibilidad de realizar la instalación con vite directamente en Windows.

Para obtener más información general sobre React, decidir entre React (aplicaciones web), React Native (aplicaciones móviles) y React Native for Desktop (aplicaciones de escritorio), consulte la introducción a React.

Requisitos previos

  • Instale la versión más reciente de Windows 10 (versión posterior a la 1903 y compilación posterior a la 18362) o Windows 11.
  • Instale el Subsistema de Windows para Linux (WSL), incluida una distribución de Linux (como Ubuntu), y asegúrese de que se ejecuta en modo WSL 2. Para comprobarlo, abre PowerShell y escribe: wsl -l -v.
  • Instale Node.js en WSL 2: en estas instrucciones se usa el administrador de versiones de Node (nvm) para la instalación; necesitará una versión reciente de NodeJS para ejecutar vite, así como una versión reciente del administrador de paquetes de Node (npm).

Importante

La instalación de una distribución de Linux con WSL creará un directorio para almacenar archivos: \\wsl\Ubuntu-20.04 (sustituya Ubuntu-20.04 por la distribución de Linux que vaya a usar). Para abrir este directorio en el Explorador de archivos de Windows, abra la línea de comandos de WSL, seleccione el directorio principal con cd ~ y, a continuación, escriba el comando explorer.exe .. Tenga cuidado de no instalar NodeJS ni almacenar archivos con los que vaya a trabajar en la unidad C montada (/mnt/c/Users/yourname$). Si lo hace, se ralentizarán considerablemente los tiempos de instalación y compilación.

Instalación de React

Para instalar la cadena de herramientas de React completa en WSL, se recomienda vite.

  1. Abra una línea de comandos de WSL (por ejemplo, Ubuntu).

  2. Crea la nueva carpeta de proyecto mkdir ReactProjects y accede al directorio cd ReactProjects.

  3. Instale React mediante vite:

    npm create vite@latest my-react-app -- --template react

  4. Una vez instalado, cambie los directorios a la nueva aplicación ("my-react-app" o como haya decidido llamarla): cd my-react-app, instale las dependencias: npm install y, a continuación, inicie el servidor de desarrollo local: npm run dev

    Este comando iniciará el servidor de Node.js e iniciará una nueva ventana del explorador que mostrará la aplicación. Puede usar Ctrl + c para dejar de ejecutar la aplicación de React en la línea de comandos.

Nota:

Vite incluye una canalización de compilación de front-end mediante Babel, esbuild y Rollup, pero no controla la lógica de back-end ni las bases de datos. Si busca crear un sitio web representado por el servidor con React que use un back-end de Node.js, se recomienda instalar Next.js en lugar de esta instalación de Vite, que está pensada más para aplicaciones de página única (SPA). También puede considerar la posibilidad de instalar Gatsby si desea crear un sitio web estático orientado a contenido.

  1. Cuando esté listo para implementar la aplicación web en producción, la ejecución de npm run build creará una compilación de la aplicación en la carpeta "dist". Puede obtener más información en Implementar un sitio estático.

Recursos adicionales