Cómo iniciar un proyecto con React y Vite

Si eres nuevo en React y has mirado la documentación oficial, habrás observado que la recomendación oficial para iniciarse con React es usar algún framework como Next.js o Gatsby.

Según la documentación oficial, esto se debe a que, con el tiempo, la mayoría de las aplicaciones y sitios web desarrollados con React necesitan soluciones para problemas comunes como la división de código, el enrutamiento y la obtención de datos.

Durante años la mejor opción para iniciar un nuevo proyecto de React fue Create React App, pero sorprendentemente, este método para iniciar un nuevo proyecto ya no aparecía como recomendado en la documentación oficial. Incluso hubo algo de controversia en las redes ya que su creador Theo estuvo bastante descontento con la decisión de no recomendarlo.

Personalmente creo que no siempre es bueno iniciarse con un framework para usar una librería como React, sobre todo si estás aprendiendo a usarlo.  Entonces, si no queremos usar Create React App ¿Cómo podemos iniciar un proyecto React sin framework?

La solución más sencilla es mediante Vite.

Vite es un bundler, creado por Evan You, el cerebro detrás de Vue.js (¿Curioso no?).
Lo que hace que Vite sea tan atractivo frente a competidores como webpack es su enfoque en la velocidad y la eficiencia.

Vayamos a la práctica con un ejemplo.

Creación de un  proyecto React con Vite

Lo primero que debes asegurarte es de tener nodeJs en tu equipo, ya que Vite lo usará para crear el proyecto. 

Para crear un proyecto llamado "mi-proyecto" ejecutaremos la siguiente línea

npx create-vite@latest mi-proyecto --template react

Este comando generará la estructura del proyecto, si todo ha ido bien tendrás un mensaje similar a este:

Done. Now run:

  cd mi-proyecto
  npm install
  npm run dev

En nuestro equipo se habrá creado una estructura similar a esta:

mi-proyecto
├── index.html
├── package.json
├── public
│   └── vite.svg
├── README.md
├── src
│   ├── App.css
│   ├── App.jsx
│   ├── assets
│   │   └── react.svg
│   ├── index.css
│   └── main.jsx
└── vite.config.js

Haremos lo que nos indicaba anteriormente la consola y accederemos al directorio (cd mi-proyecto), instalaremos las dependencias (npm install) y ejecutaremos el entorno en desarrollo (npm run dev) 

Si todo va bien, nuestra consola nos mostrará:

VITE v5.2.7  ready in 112 ms

➜  Local:   http://localhost:5173/
➜  Network: use --host to expose
➜  press h + enter to show help

Si accedemos al servidor que nos ha generado, veremos una aplicación de contador muy simple, pero totalmente funciona.

A partir de aquí, podremos crear nuestro proyecto modificando el punto de entrada App.jsx para crear nuestros propios componentes.