Crea un proyecto React.js con Vite.js desde cero

Hoy te enseñaré a hacer una pequeña aplicación web con los frameworks React.js y Vite.js para desplegarlos en la web, de modo que cualquiera acceda a ella en menos de 5 minutos. Parece mentira, pero es así de fácil ya que Vite.js nos ayuda a generar la estructura de trabajo de forma rápida y ordenada.

Este artículo será de gran ayuda para quienes desean automatizar sus proyectos y avanzar  con sus clientes con el menor esfuerzo. Igualmente es ideal para quienes tienen varios clientes y deben presentar proyectos que requieren actualizarse constantemente.

Para tal efecto, utilizaremos una plataforma de repositorios GitHub para administrar nuestros proyectos de forma ordenada y escalable.

A continuación, compartiré las partes en las que se divide este artículo, así como las herramientas que necesitarás para desarrollar el proyecto:

Partes

1) Creación de una app React.js con Vite.js.

2) Modificación de la app.

3) Despliegue en un servidor web.

Herramientas

1) Visual Studio Code (editor de código fuente).

2) Vite.js (herramienta Frontend que genera la estructura del proyecto (React, Vue, Vanilla, etc.).

3) React.js (librería Frontend con JavaScript)

4) NPM (Node Package Manager o manejador de paquetes).

5) Netlify (plataforma web en la nube).

NPM

Es una herramienta de gestión de paquetes (Node Package Manager) para librerías JavaScript vinculada a Node.js. NPM nos ayuda a instalar paquetes de librerías de JavaScript de manera dinámica y fácil de mantener.

Puedes encontrar más información aquí.

Para utilizar esta librería, debemos tener instalado Node.js que ya trae consigo el NPM. Dejo aquí el link para descargar y luego proceder con los demás instaladores.

React.js

Es una librería JavaScript de código abierto diseñada para crear aplicaciones frontend que faciliten el desarrollo de aplicaciones en una sola página (SPA). Mantenida por Facebook y por la comunidad de software libre, esta librería es muy nutrida y llena de plugins para agregarlos en tu aplicación.

Con este framework JavaScript avanzaremos en nuestro proyecto, ya que tiene una comunidad muy grande y una gran variedad de librerías que, para mí, poseen todas las bondades que necesitas para iniciar un proyecto JavaScript.

¿Necesitas más información sobre React.js? Ingresa aquí.

Vite.js

Es una herramienta para el frontend JavaScript con la que se puede generar estructura de códigos de varios frameworks como React, Vanilla, Vue, Svelte y otros. Además de ser un generador muy rápido, Vite.js nos ahorra mucho tiempo en configuraciones de otras librerías.

Aquí puedes encontrar más detalles sobre Vite.js.

Netlify

Esta plataforma de desarrollo incluye servicios de back-end y aplicaciones web estáticas y dinámicas. Asimismo, ofrece paquetes gratuitos para utilizar y probar sus servicios en la nube.

Existen otras plataformas que también incluyen servicios gratuitos, tales como:

• Cloudflare CDN
• Amazon CloudFront
• Pantheon
• Webflow
• Fastly
• HubSpot CMS Hub
• Platform.sh
• Cloudways
  

En nuestro caso, utilizaremos Netlify el cual, según mi experiencia, es supersencillo, fácil de configurar y para lanzar nuestros aplicativos. De hecho, cada plataforma incluye diferentes servicios.

¿Necesitas saber más sobre Netlify? Ingresa aquí.

Iniciemos el proyecto

Antes de trabajar con las librerías, debemos tener instalado NPM (arriba compartí el link de descarga). Una vez instalado en el equipo, abrimos la terminal de comandos y escribimos el siguiente script: npm.

Debería aparecer un instructivo de cómo utilizar el comando npm como en la imagen anterior. Si tenemos ese resultado ya podemos empezar a descargar las librerías que vamos a utilizar en nuestro proyecto.

Ahora abrimos la terminal de comandos y ejecutamos el comando  npm create vite@latest my-react-app --template react  (create vite@latest comando de vite  | my-react-app nombre del proyecto  |  template es la opción para elegir el framework que se instalará -en este caso React-). Esto instalará algunos paquetes de Vite (si es que aún no lo tenemos).

Ahora elegimos la opción React de la lista. Nos aparecerán otras opciones.

Luego ejecutamos el comando cd my-react-app.  Esto hace que ingresemos en el directorio del proyecto para actualizar las librerías necesarias para que funcione nuestro proyecto.

Como siguiente paso, ejecutamos el comando npm install, el cual instalará todos los paquetes necesarios para iniciar el proyecto.

En este punto, es momento de ejecutar el comando npm run dev que inicia el proyecto.

¡Y listo! Tenemos la aplicación en funcionamiento. Si presenta algún error, debemos verificar que estén instaladas todas nuestras librerías de React, Vite y NPM.

Cumplido todo lo anterior, desplegamos nuestra aplicación en la plataforma Netlify, algo que se logrará con estos pasos:

1) Crear una cuenta en la plataforma Netlify.

2) Compilar nuestro aplicativo con el comando npm run build. Con ello se generará una carpeta dist  (la que vamos a levantar en la plataforma).

Esta es la carpeta dist que debemos copiar en la plataforma.

3) Copiar en la plataforma la carpeta dist. Si todo salió bien, ya está lista nuestra aplicación en la plataforma. Entonces entramos en la plataforma de Netlify, elegimos la opción Add new site y seleccionamos la opción Deploy manually.

Esto nos llevará a esta sección, donde debemos arrastrar nuestra carpeta dist.

Aquí arrastramos nuestra carpeta de dist donde se encuentra nuestro aplicativo compilado.

Voilà! Ya está en la plataforma nuestra aplicación en la nube.

En la flecha indica el link en el cual deben entrar para ver la aplicación o compartir con cualquier persona.

Con esto ya tenemos terminado el proceso de crear una app en React con Vite y publicarlo en la web.

Ah, pueden ver el resultado de nuestro proceso aquí.

En la siguiente entrega hablaremos sobre cómo conectar nuestro proyecto con GitHub y que esto automáticamente se publique en nuestra web, a fin de que  los demás sigan los avances de nuestros proyectos. También agregaremos estilos y alguna que otras librería para que tome forma nuestro proyecto React.

Saludos.