Deja de usar create-react-app | ¿cómo hacer una app de React con Vite?

Si llevas un tiempo en el desarrollo web, habrás visto que una de las formas para comenzar rápidamente un proyecto de React, al ejecutar este comando create react app podemos tener un entorno listo para probar y hacer un proyecto en React. Por supuesto, era una de las opciones más rápidas para comenzar, pero si querías tener mucho más control sobre el empaquetamiento y las dependencias podíamos comenzar un proyecto desde 0 y así hacer todas las configuraciones manualmente con un empaquetador como lo es Webpack, que también podemos hablar sobre este empaquetador, pero esa es historia de otro post.

En estos días esto ha cambiado y tenemos nuevas opciones, pero antes de pasar a eso, vamos a hablar un poco sobre cómo lo hacíamos y ver así las diferencias sobre usar otras tecnologías.

Como se hace una aplicación con create-react-app

El comando es sumamente sencillo y es el siguiente:

npx create-react-app 

Con este comando se te generarán los archivos iniciales así como una pequeña aplicación demo, con la que puedes comenzar a trabajar, esta se verá así:

Y visualmente, la aplicación creada se verá así:

¿Qué nos dice React?

En la documentación oficial de React, sobre la instalación nos hacían mención al comando create-react-app, pero en la última actualización lo han dejado fuera, lo bueno es que nos han dado opciones para poder tener un entorno de React listo.

Las opciones que nos presenta la documentación oficial de React son con:

• Next JS, el framework de React con server side rendering,
• Remix,
• Gatsby, y
• Expo

Puedes probar cada opción y ver cuál se adapta a las necesidades de tu proyecto. Te dejo en link a la documentación de React para comenzar un nuevo proyecto.

En mi experiencia hacer una aplicación con create-react-app tenia ciertas desventajas, era más lenta para poder probarla en el entorno de desarrollo y si tu computadora no es tan potente puede hasta llegar a trabarla si tienes un proyecto un tanto grande. Yo usaba un entorno personalizado utilizando Webpack y este si que era mas rapido que un entorno generado con el comando, igualmente he utilizado Next JS y su comando npx create-next-app, es muy rápido y confiable para poder trabajar con Next JS, y con la última actualización y la tecnología turbopack, si quieres saber un poco más de esto te dejamos un post sobre la última actualización de Next JS y su versión 13

Al día de hoy contamos con opciones más rápidas de empaquetamiento y muchos frameworks que podemos probar, un empaquetador que no es mencionado en la documentación, pero que es popular, hablamos de Vite, y la cual es una opción que te recomendaría para poder llevar tus inicios para un proyecto de React

¿cómo se hace un proyecto de React con Vite?

Con el gestor de paquetes NPM, podemos usar el siguiente comando para comenzar, yo me he creado una carpeta en mis archivos, llamada «pruebas» y ubicándome en esta carpeta en mi terminal de comandos he usado el comando:

npm create vite@latest

Obtendremos lo siguiente en la terminal:

Y le escribiremos y y despues enter para permitirle instalar.

Después de eso comenzará a preguntarnos sobre algunos datos para nuestro proyecto, aquí escribiremos lo que necesitemos, pero si te gusta la opción predeterminada de byte puedes solo dar un enter

Esta opción predeterminada es lo qué nos aparece en un color gris, en mi caso le colocaré como nombre react-app, lo siguiente que nos preguntará es qué tipo de proyecto es el que inicializaremos, e iremos a la opción React y daremos enter

Después nos preguntará sobre si queremos usar TypeScript y qué compilador o transpilador usará si Babel en la opción predeterminada o + SWC. Y según la documentación: SWC ahora es un reemplazo maduro para Babel, especialmente en el contexto de los proyectos React. La implementación de React Fast Refresh de SWC es mucho más rápida que Babel y, para algunos proyectos, ahora es una mejor alternativa.

Si no sabes que es un transpilador como Babel , este nos permite convertir nuestro código JS moderno para que pueda ser compatible con todos los navegadores más antiguos. Y como no lo hemos probado, vamos a darle la oportunidad a SWC.

Esperaremos a que se inicie el proyecto. Y ahora que estamos listos, podemos comenzar a probar nuestro proyecto:

Ahora seguimos las instrucciones que nos da Vite, entrar a nuestra carpeta que contiene el proyecto, si recuerdas yo le coloqué el nombre react-app, y con este ,entramos a la carpeta con el comando:

cd react-app

Posteriormente, instalamos las dependencias con el comando

npm install

Y una vez que finalice, procedemos a ejecutar con npm run dev:

¡¡¡Nuestra aplicación está viva!!! Y veremos lo siguiente:

Y esta es la estructura de carpetas que nos da el proyecto inicial de Vite:

Ahora podremos comenzar a modificar nuestra app:

Esta por supuesto no es la única forma de crear un proyecto con vite, te dejaremos el link a la documentación por si quieres experimentar un poco más con esta tecnología.

Create-react-app vs Vite

Ahora vamos a ver un pequeño video, en este, use los comandos para correr los servidores de desarrollo, ambos son de la aplicación base que nos generan los comandos, a la izquierda tenemos a la creada con create-react-app y del lado derecho la creada con Vite, esto solo es para comparar el tiempo que tarda en iniciarse nuestras aplicaciones:

Como puedes observar Vite es prácticamente inmediata, la carga del servidor de desarrollo, tarda aproximadamente 1 segundo en estar listo, mientras que el de create react app ha tardado aproximadamente 15 segundos en completarse la misma tarea.

¿Donde aprender React?

Ahora ya sabes cómo comenzar un proyecto con React, pero si quieres aprender cómo usar esta poderosa tecnología, te recomendamos el curso React – Guía definitiva: hooks, router, redux, next + Proyectos, en que además de tomar algunos conceptos fundamentales de JS, aprenderás cómo usar a React, Redux, construcción de proyectos con diferentes bibliotecas y el uso de Next JS.

React es una tecnología que usamos para construir nuestras aplicaciones web del lado frontend, y si quieres conocer más acerca de este camino te dejaremos el post: Ruta para ser desarrollador frontend con Hola Mundo.

Adicionalmente, si quieres más información acerca de React, te dejaremos el post: 7 razones para programar en React.

Igualmente, te dejaremos el enlace a todos nuestros cursos de programación, los cuales los encontrarás disponibles en la academia Hola Mundo, y puedes optar por adquirir los cursos de manera individual en el siguiente link: todos los cursos de Hola Mundo, si prefieres acceso a todo, también puedes elegir un plan de suscripción mensual o anual, o tambien puedes optar por cada curso de manera individual en Udemy.

Y esto ha sido todo de este post, si te ha encantado, ¡golpea al botón de me gusta!, dejanos un comentario, y para no perderte nada, no olvides suscribirte a este blog, seguirnos en todas las redes como Youtube, Twitter e Instagram, y por último, te invitamos a escuchar nuestra música «Hola Beats«, diseñada para ayudarte a concentrarte y acompañarte en tu aprendizaje o trabajo, la puedes encontrar en Spotify, Apple Music, Amazon Music, Youtube Music y Deezer.

¡Hasta la próxima!, y chao mundo