Desarrollo JavaScript y Formación - Carlos Azaustre

Carlos Azaustre

Cómo iniciar un proyecto React con Vite

22 julio, 2021

1 minutos de lectura

🧑🏻‍💻 DesarrolloReact

¿Ves alguna errata o quieres modificar algo? Haz una Pull Request

Vite

Vite es una herramienta de tooling para el Frontend. Lo puedes agrupar en la categoría donde se encuentrar 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 y aprovecha el sistema de módulos de ES6 (ESModules) por lo que puede ser servido dinamicamente según lo necesite el navegador.

Crear un proyecto React con Vite.

🔴 Suscríbete al Canal

Asegurate de tener instalado Node.js en tu equipo. Una vez lo tengas, corre los siguientes comandos:

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

Entre los diferentes frameworks que te sugiere, elige el que necesites, en nuestro caso react. Despues 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-element
    svelte

? Select a variant: › - Use arrow-keys. Return to submit.
❯   react
    react-ts
Scaffolding project in /Users/carlosazaustre/dev/vite-project...

Done. Now run:

  cd vite-project
  npm install
  npm run dev

Correr el proyecto.

Una vez creado, dirijete al directorio creado 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 v2.4.3 dev server running at:

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

  ready in 590ms.


aplicacion con react y vite corriendo en localhost