Cómo crear una aplicación React con Vite: guía paso a paso

Crear una aplicación React se ha vuelto aún más fácil y rápido gracias a Vite, una herramienta de compilación front-end moderna presentada por el creador de Vue.js, Evan You, en 2020. Vite es reconocida por su velocidad y eficiencia, lo que la convierte en una excelente alternativa a Create React App (CRA) al reducir significativamente el tiempo necesario para iniciar servidores de desarrollo y aplicar actualizaciones de código. En esta guía, repasaremos cada paso para ayudarte a configurar una aplicación React con Vite, desde la preparación de tu entorno hasta el lanzamiento de tu primer proyecto.

 

¿Por qué utilizar Vite para el desarrollo de React?

Vite se ha convertido en una opción popular para los proyectos React porque mejora significativamente la velocidad de compilación y la recarga en vivo, lo que hace que el proceso de desarrollo sea más rápido y fluido. A diferencia de Create React App (CRA), que a menudo experimenta demoras en la actualización del servidor después de las actualizaciones de archivos, Vite reduce los tiempos de compilación, lo que proporciona un flujo de trabajo fluido y eficiente. Su diseño modular también beneficia a los desarrolladores de React al ofrecer comentarios más rápidos sobre los cambios, ideal para aquellos que necesitan una respuesta inmediata del entorno de desarrollo.

¿Qué es Vite?

Vite, desarrollado por Evan You (el creador de Vue.js), es una herramienta de compilación moderna diseñada para optimizar el desarrollo front-end. El nombre “Vite” se deriva de la palabra francesa que significa “rápido”, lo que se alinea con su objetivo principal de acelerar el proceso de desarrollo y compilación. Vite aprovecha los módulos ES nativos en el navegador durante el desarrollo, lo que permite compilaciones más rápidas y tiempos de actualización más rápidos en comparación con los empaquetadores tradicionales. Esta eficiencia hace que Vite sea una excelente opción para los desarrolladores que buscan optimizar la experiencia de desarrollo en marcos de JavaScript como React.

 

Requisitos previos para configurar Vite

Antes de instalar Vite, asegúrese de que su sistema cumpla con los siguientes requisitos. Estos requisitos previos son esenciales para que el proceso de instalación y desarrollo se realice sin inconvenientes.

 

Node.js y npm

Vite depende de Node.js y npm (Node Package Manager) para instalar paquetes y ejecutar scripts de desarrollo. Para usar Vite, necesitas la versión 18.x o posterior de Node.js y una versión de npm compatible. A continuación, te indicamos cómo comprobar si tienes instaladas las versiones correctas:

Comprobar la versión de Node.js

Abra su terminal y escriba el siguiente comando:
intento
nodo -v

Este comando devuelve la versión instalada de Node.js, que debe ser 18.x o superior.

Comprobar la versión de npm

A continuación, verifique la versión de npm ejecutando:
intento
npm-v

Este comando muestra la versión de npm instalada. Si sus versiones están desactualizadas, puede descargar las versiones más recientes de Node.js y npm desde el sitio web oficial de Node.js.

Si Node.js y npm no están instalados, o si necesita actualizarlos, puede instalarlos o actualizarlos a través del repositorio NodeSource (para Linux) o descargando el instalador directamente desde el sitio web oficial.

 

Conocimientos básicos de la línea de comandos

Para utilizar Vite es necesario estar familiarizado con las operaciones básicas de la línea de comandos. Durante el proceso de configuración, ejecutará una serie de comandos en la terminal para crear, instalar y ejecutar su proyecto Vite. Esto es lo que debería hacer:

• Navegando por directorios: Comandos como cd para cambiar directorios y es para listar archivos.
• Comandos de ejecuciónNecesitarás ejecutar comandos npm como Instalación de npm y npm ejecuta dev.

Si no está familiarizado con la línea de comandos, puede ser útil revisar algunos comandos básicos de terminal antes de continuar.

 

Editor de código

Se recomienda encarecidamente utilizar un editor de código, como Visual Studio Code (VS Code), para administrar y editar los archivos de proyecto. VS Code ofrece varias funciones útiles:

• Resaltado de sintaxis:Ayuda a que tu código sea más legible.
• Terminal integrado:Le permite ejecutar comandos de terminal directamente dentro del editor.
• Extensiones:VS Code tiene extensiones para JavaScript, React y Vite que brindan sugerencias de código, verificación de errores y herramientas adicionales.

Otros editores populares son Sublime Text, Atom y WebStorm, pero VS Code es especialmente adecuado para proyectos de JavaScript y React. Puedes descargarlo desde el sitio web de VS Code.

 

Configuración de Vite para su proyecto React: requisitos previos y preparación

Antes de comenzar a crear tu primera aplicación React con Vite, es fundamental asegurarte de que tu entorno de desarrollo esté configurado correctamente. Vite es una herramienta de desarrollo rápida y moderna diseñada para optimizar el desarrollo front-end, pero depende de versiones de software y herramientas específicas para funcionar sin problemas. En esta guía, cubriremos los requisitos previos, incluida la instalación de las versiones necesarias de Node.js y npm, conocimientos básicos de línea de comandos y la configuración de un editor de código adecuado. Una vez que estos componentes estén en su lugar, estarás listo para comenzar a crear aplicaciones React eficientes y de carga rápida con Vite.

 

Paso 1: Instalar Node.js y npm (si no están instalados)

Para usar Vite, necesitas la versión 18.x o posterior de Node.js junto con npm. Si ya tienes Node.js instalado pero está desactualizado, sigue estos pasos para eliminar la versión anterior e instalar la más reciente.

Eliminar versiones existentes de Node.js (opcional)

Si ya está instalada una versión desactualizada de Node.js o npm, elimínela para evitar problemas de compatibilidad.
intento
sudo apt eliminar nodejs npm

sudo apt autoremove

Este paso borra cualquier instalación antigua de Node.js o npm, lo que garantiza una configuración limpia para Vite.

Agregar el repositorio NodeSource

Este repositorio proporciona las últimas versiones de Node.js y npm para su instalación.
intento
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash –

Instalar Node.js y npm

intento
sudo apt install -y nodejs npm

Esto instala la versión actual de Node.js (18.x) y npm, lo que garantiza la compatibilidad con Vite.

Verificar la instalación

Después de la instalación, verifique que tanto Node.js como npm estén instalados correctamente ejecutando:
intento
nodo -v

npm-v

Debería ver números de versión que confirmen que Node.js y npm están listos para usar.

 

Paso 2: Instalar Vite globalmente

Ahora que Node.js y npm están configurados, puedes instalar Vite de forma global. Esto te permite crear fácilmente nuevos proyectos de Vite desde cualquier directorio.

Ejecute el comando de instalación global

intento
sudo npm install -g create-vite

Este comando instala Vite globalmente, lo que proporciona un único comando para inicializar proyectos de Vite rápidamente. Tener Vite instalado globalmente simplifica la creación y configuración de proyectos.

 

Paso 3: Crea un nuevo proyecto React con Vite

Una vez instalado Vite, puedes crear un nuevo proyecto de React con él. Abre tu terminal, navega hasta el directorio que prefieras y usa el siguiente comando para iniciar la configuración.

Ejecutar el comando Vite Create

intento
npm crea vite@latest mi-aplicación

Reemplazar mi-aplicacion con el nombre de proyecto que desee. Este comando inicializa un proyecto de Vite y Vite lo guiará a través de algunas instrucciones de configuración.

Siga las instrucciones de configuración:

• Nombre del proyecto: Elija un nombre para el directorio de su proyecto (por ejemplo, “mi-aplicación”).
• Selección del marco:Seleccione “React” de la lista de marcos.
• Variante:Elija entre JavaScript y TypeScript según sus preferencias.

Una vez completado, Vite creará una carpeta de proyecto con todos los archivos necesarios y una estructura estándar.

 

Paso 4: Navega hasta la carpeta de tu proyecto

Después de configurar el proyecto, navegue hasta el directorio del proyecto recién creado para comenzar a trabajar con él.

Cambiar al directorio del proyecto

intento
cd mi-aplicacion

Este comando cambia su directorio de trabajo a mi-aplicacion, lo que facilita la gestión y el trabajo dentro de los archivos del proyecto Vite.

 

Paso 5: Instalar las dependencias del proyecto

Antes de ejecutar el proyecto, instale todas las dependencias necesarias, incluidas las bibliotecas y los paquetes necesarios para ejecutar el proyecto.

Ejecutar el comando de instalación

intento
Instalación de npm

Este comando descarga e instala todas las dependencias especificadas en el paquete.json archivo. Estas dependencias alimentan los componentes de React, la funcionalidad de Vite y cualquier herramienta o biblioteca adicional utilizada en su proyecto.

 

Paso 6: Iniciar el servidor de desarrollo

Ahora que la configuración está completa y las dependencias están instaladas, inicie el servidor de desarrollo de Vite. Este servidor le permite ver su aplicación en vivo y aplicar cambios de código al instante.

Ejecutar el servidor de desarrollo

intento
npm ejecuta dev

Este comando inicia el servidor de desarrollo y Vite mostrará una URL local donde se puede acceder a tu aplicación. De manera predeterminada, esta URL es:
Arduino
http://localhost:5173/

También podrá ver opciones de red e información adicional, dependiendo de su versión de Vite.

 

Paso 7: Visualiza tu aplicación React en el navegador

Con el servidor de desarrollo en ejecución, ahora puedes ver tu aplicación React en un navegador web.

Abra la URL local en su navegador:

• Abra su navegador web preferido.
• Navegue hasta la URL que se muestra en la terminal, normalmente http://localhost:5173/.

Tu nueva aplicación React debería cargarse en el navegador. Cualquier cambio que realices en tu editor de código se actualizará automáticamente en el navegador, gracias a la función de reemplazo de módulo activo (HMR) de Vite, que permite actualizaciones rápidas sin necesidad de recargar toda la página.

 

Descripción general de la estructura del proyecto Vite

Después de configurar el proyecto Vite, verá una estructura estándar de carpetas y archivos que organiza los componentes esenciales de su aplicación React. Esta estructura mantiene el proyecto ordenado y modular, lo que le permite concentrarse en el desarrollo sin atascarse en los detalles de configuración. A continuación, se muestra un desglose de los archivos y directorios principales en una aplicación React típica impulsada por Vite:

 

índice.html

• Este archivo es el archivo HTML principal de tu aplicación. Sirve como punto de entrada para que el navegador cargue la aplicación React.
• Vite inyecta los módulos de JavaScript aquí, por lo que su aplicación tiene acceso a los scripts y activos necesarios.
• A diferencia de las configuraciones tradicionales, Vite índice.html se encuentra en la raíz del proyecto, lo que simplifica la carga de módulos y mantiene limpia su configuración.

 

fuente/main.jsx

• Este es el punto de entrada para su aplicación React, donde la aplicación se inicializa.
• Dentro de este archivo, encontrará el código que representa el árbol de componentes de React en el DOM, generalmente vinculando su aplicación a una raíz. división en índice.html.
• Este es el primer archivo JavaScript que Vite procesa y agrupa, lo que lo hace esencial para la estructura y la secuencia de carga de su aplicación.

 

fuente/App.jsx

• Este archivo representa el componente principal de su aplicación React y generalmente contiene la estructura o el diseño principal de su aplicación.
• De Aplicación.jsx, puede importar y administrar otros componentes, definir rutas o crear cualquier otra configuración a nivel de aplicación.
• Modificando Aplicación.jsx A menudo proporciona los cambios principales que ves en tu aplicación, ya que normalmente es el corazón de la interfaz de usuario de tu proyecto.

 

vite.config.js

• El archivo de configuración de Vite, ubicado en la raíz del proyecto.
• Este archivo le permite personalizar el comportamiento y la configuración de Vite, como definir opciones de compilación, agregar complementos o configurar configuraciones de proxy.
• Si bien Vite está diseñado para funcionar sin una configuración pesada, vite.config.js Le brinda flexibilidad para ajustar la configuración a medida que su proyecto crece.

 

Archivos y directorios adicionales

Si bien estos archivos principales son esenciales, es posible que encuentre directorios y archivos adicionales a medida que expanda su proyecto, incluidos:

• público/: Carpeta para almacenar recursos estáticos como imágenes, fuentes o íconos. Estos archivos se entregan directamente sin necesidad de importaciones especiales.
• origen/: La carpeta principal para todo el código fuente de la aplicación. Junto con principal.jsx y Aplicación.jsx, esta carpeta contiene otros componentes de React, funciones auxiliares o proveedores de contexto a medida que su aplicación escala.

Esta estructura organizada mantiene los archivos de tu proyecto accesibles y manejables, para que puedas concentrarte en crear los componentes y las características de tu aplicación sin preocuparte por configuraciones extensas.

 

Ventajas de usar Vite en lugar de crear una aplicación con React

Pasar de Create React App (CRA) a Vite puede traer varios beneficios de rendimiento y productividad. Vite está diseñado para la velocidad y la eficiencia, lo que brinda a los desarrolladores una experiencia de desarrollo más receptiva. A continuación, se ofrece una descripción más detallada de las ventajas de usar Vite en lugar de CRA:

 

Construcciones más rápidas

Vite reduce significativamente los tiempos de compilación al manejar los módulos de manera diferente a CRA. A continuación, le indicamos cómo:

• Pre-agrupación de módulos:Vite preagrupa las dependencias usando construir, un empaquetador rápido optimizado para JavaScript. Este empaquetamiento previo acelera el tiempo de carga inicial al organizar y agrupar las dependencias de manera más efectiva.
• Sintaxis del módulo ES:Vite utiliza importaciones de módulos ES en el navegador durante el desarrollo, por lo que solo se cargan los archivos necesarios para la vista actual. Esta configuración evita la necesidad de agrupar toda la aplicación en cada cambio, lo que da como resultado tiempos de inicio más rápidos.
• Carga diferida para el desarrollo:Vite carga módulos solo cuando son necesarios, lo que minimiza la carga de trabajo en el servidor de desarrollo y permite recargas más rápidas. A diferencia de CRA, Vite no vuelve a compilar todo el código base después de cada cambio, lo que reduce el tiempo de espera.

Estas optimizaciones hacen de Vite una excelente opción para proyectos donde los ciclos de retroalimentación rápidos y las velocidades de construcción son esenciales.

 

Reemplazo eficiente de módulos en caliente (HMR)

El reemplazo de módulo en caliente (HMR) es una función que actualiza los módulos en tiempo real a medida que los edita, sin necesidad de recargar toda la página. El sistema HMR de Vite es más eficiente que el de CRA, lo que aporta varios beneficios:

• Recarga selectiva:El sistema HMR de Vite solo actualiza los módulos que cambian, en lugar de volver a cargar toda la aplicación. Por ejemplo, si edita un archivo CSS o un componente, Vite vuelve a cargar solo ese archivo o módulo específico.
• Comentarios más rápidos sobre los cambios:Esta recarga selectiva permite a los desarrolladores ver los cambios casi instantáneamente, lo que mejora la productividad y ahorra tiempo.
• Preservación del estado de la aplicación:Dado que solo se reemplazan los módulos necesarios, el HMR de Vite conserva el estado de su aplicación durante el desarrollo. Esto significa que puede continuar con las pruebas sin necesidad de restablecer ningún dato o configuración.

Con HMR de Vite, el desarrollo es más eficiente porque los cambios se reflejan inmediatamente, mejorando la experiencia de codificación.

 

Experiencia de desarrollo ligero

Vite está diseñado para proporcionar una configuración mínima y optimizada que elimina la complejidad innecesaria, lo que hace que sea más fácil y rápido comenzar un proyecto. A continuación, se explica por qué Vite ofrece una experiencia más liviana que CRA:

• Configuración mínima:Vite requiere poca o ninguna configuración para comenzar, y la mayoría de las configuraciones comunes se manejan automáticamente. CRA a menudo requiere configuraciones personalizadas o dependencias adicionales para funciones como división de código o agrupación avanzada, pero Vite agiliza este proceso.
• Tamaños de paquetes más pequeños:La agrupación optimizada de Vite da como resultado tamaños de paquetes más pequeños en producción, lo que mejora el rendimiento al implementar su aplicación.
• Configuración rápida:Configurar un proyecto Vite es simple y rápido. Con solo unos pocos comandos, estará listo para comenzar a codificar sin los archivos y scripts adicionales que CRA a veces incluye.
• Sistema de complementos flexible:El sistema de complementos de Vite es potente y fácil de usar, lo que le permite agregar funciones sin sobrecargar la configuración. Los complementos de Vite también son compatibles con Rollup, un popular paquete de complementos que amplía las opciones para personalizar su compilación sin comprometer la velocidad.

Este enfoque liviano permite a los desarrolladores concentrarse más en la codificación y menos en la gestión de la configuración, lo que da como resultado un entorno de desarrollo más rápido y limpio.

 

Asociese con Mobian para crear su solución de aplicación móvil personalizada

Si estás pensando en crear una aplicación móvil, Mobian Puede brindar soporte experto durante todo el proceso de desarrollo. Ya sea que desee optimizar la interacción con el cliente, aumentar la lealtad o crear una experiencia perfecta para los usuarios, una aplicación móvil bien diseñada puede lograr estos objetivos. Mobian se especializa en crear aplicaciones personalizadas y listas para usar adaptadas a las necesidades específicas de su negocio.

A través de nuestras aplicaciones, los clientes pueden acceder a noticias, promociones y solicitar servicios directamente, mientras que usted puede disfrutar de funciones como comentarios, reseñas y un sistema de pedidos sencillo. Nuestra experiencia abarca una amplia gama de industrias, desde tecnología médica hasta tecnología financiera, por lo que, sin importar la complejidad o la visión de su aplicación, estamos listos para darle vida.

Póngase en contacto con Mobian para hablar sobre tu proyecto y explorar cómo podemos hacer realidad tu idea de aplicación. Juntos, podemos crear una aplicación que prepare a tu empresa para el futuro.

Crea el futuro junto con Mobian: tu desarrollador de aplicaciones móviles de confianza.

 

Conclusión

Si sigue esta guía, habrá configurado un entorno Vite para su proyecto React. El proceso de compilación ligero y rápido de Vite y el reemplazo de módulo activo (HMR) lo convierten en una excelente opción para el desarrollo moderno de React, ya que ofrece una experiencia más eficiente en comparación con herramientas tradicionales como Create React App. Con la arquitectura optimizada de Vite, ahora está preparado para crear aplicaciones dinámicas y con capacidad de respuesta y concentrarse en la creación de funciones en lugar de esperar los tiempos de compilación. Siga explorando las opciones de configuración y los complementos adicionales de Vite para personalizar aún más su entorno de desarrollo. ¡Que disfrute de la codificación!