Cómo iniciar un proyecto React con Vite

Vite es una herramienta de tooling para el Frontend. Lo puedes agrupar en la categoría donde se encuentran otros como Webpack, Parcel y Snowpack. Es muy útil para crear una estructura de proyecto que se pueda utilizar con React y de una forma muy rápida, ya que no necesitas tener que configurar nada. Aprovecha el sistema de módulos de ES6 (ESModules) por lo que puede ser servido dinámicamente según lo necesite el navegador.

Crear un proyecto React con Vite.

Asegúrate de tener instalado Node.js en tu equipo.

Puedes comprobarlo ejecutando en la terminal:

$ node -v

Una vez lo tengas, ejecuta los siguientes comandos:

$ npm create vite@latest <nombre-de-mi-proyecto>

Entre los diferentes frameworks que te sugiere, elige el que necesites, en nuestro caso react. Después te pregunta si quieres utilizar TypeScript o no. Elige lo que prefieras.

✔ Project name: … vite-project
? Select a framework: › - Use arrow-keys. Return to submit.
    Vanilla
    Vue
❯   React
    Preact
    Lit
    Svelte

? Select a variant: › - Use arrow-keys. Return to submit.
❯   JavaScript
    TypeScript

Scaffolding project in /Users/carlosazaustre/dev/vite-project...

Done. Now run:

  cd vite-project
  npm install
  npm run dev

Ejecutar el proyecto.

Una vez creado, dirígete al directorio creado y ejecuta el comando de instalación:

$ cd <nombre-de-mi-proyecto>
$ npm install

Una vez instaladas las dependencias, ejecuta el comando de desarrollo y ya puedes empezar a trabajar.

$ npm run dev

  VITE v3.1.8 ready in 396 ms

  > Local: http://localhost:5173/
  > Network: use `--host` to expose