Compartir a través de

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

En esta guía se explica cómo configurar un entorno de desarrollo de React en WSL (Subsistema de Windows para Linux) mediante las herramientas de front-end de Vite .

Se recomienda WSL si planea implementar en un servidor Linux, usar contenedores de Docker o trabajar con herramientas basadas en Bash. Si no está familiarizado con React y solo quiere empezar a trabajar rápidamente, considere la posibilidad de instalar React directamente en Windows en su lugar.

Para obtener información general sobre React y los distintos escenarios( aplicaciones web, aplicaciones móviles (React Native) y aplicaciones de escritorio nativas (React Native for Desktop), consulte la introducción a React.

Requisitos previos

  • WSL 2: instale WSL con una distribución de Linux (Se recomienda Ubuntu) y confirme que se ejecuta en modo WSL 2: wsl -l -v. Requiere Windows 10, versión 2004 o posterior, o Windows 11.
  • Node.js en WSL 2: instale Node.js dentro de la distribución de WSL mediante nvm. No use la versión instalada por Windows de Node.js dentro de WSL.

Importante

Almacene los archivos del proyecto dentro del sistema de archivos WSL (por ejemplo, ~/projects), no en la unidad de Windows montada (/mnt/c/). Al trabajar en el límite del sistema de archivos, se ralentizan significativamente los tiempos de instalación y compilación.

Creación de una aplicación react

  1. Abra el terminal WSL (por ejemplo, Ubuntu).

  2. Cree una carpeta de proyecto y escríbala:

    mkdir ~/ReactProjects
cd ~/ReactProjects

  3. Cree una aplicación react con Vite:

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

    Vite creará la estructura de un nuevo proyecto de React en la carpeta my-react-app.

  4. Vaya a la nueva carpeta de la aplicación e instale las dependencias:

    cd my-react-app
npm install

  5. Inicie el servidor de desarrollo local:

    npm run dev

    La aplicación estará disponible en http://localhost:5173. Use Ctrl+C para detener el servidor.

  6. Cuando esté listo para realizar la implementación, cree un paquete de producción:

    npm run build

    La salida se coloca en la dist carpeta . Consulte Implementación de un sitio estático para obtener opciones de hospedaje.

Nota:

Vite es ideal para aplicaciones de página única (SPA). Si necesita representación del lado servidor o un back-end de Node.js, considere Next.js en su lugar. Para la generación de sitios estáticos, consulte Gatsby.

Recursos adicionales

  • Last updated on