12. Creando un proyecto React con Vite

 Pasos para crear un proyecto con Vite

1️⃣ Acceder a la documentación

Primero, visitamos la documentación oficial de Vite. Puedes buscarlo directamente como "Vite" en tu navegador y entrar a su sitio oficial.

2️⃣ Iniciar el proyecto

En nuestra consola (terminal), nos aseguramos de estar en la carpeta raíz donde queremos crear el proyecto y ejecutamos:

bash
npm create vite@latest

3️⃣ Configurar el proyecto

El asistente nos preguntará:

  • Nombre del proyecto: Por ejemplo, vite-project

  • Framework: Seleccionamos React (usando las flechas del teclado)

  • Variante: Elegimos JavaScript (también puedes elegir TypeScript si lo prefieres)

4️⃣ Instalar dependencias

Una vez creada la estructura del proyecto, debemos:

  1. Entrar a la carpeta del proyecto:

bash
cd vite-project

  1. Instalar los paquetes necesarios:

bash
npm install

Esto instalará los módulos de Node necesarios para que el proyecto funcione.

5️⃣ Ejecutar el proyecto

Para visualizar nuestro proyecto en tiempo real:

bash
npm run dev

¡Y listo! Vite abrirá un servidor local donde podrás ver tu aplicación React.

🔄 Comparación con Create React App

Inicialización:

  • Create React App: npm start

  • Vite: npm run dev

Estructura de archivos:

  • En Create React App, el archivo index.html está dentro de la carpeta public

  • En Vite, el archivo index.html está en la raíz del proyecto

Velocidad:

Vite es significativamente más rápido en la instalación inicial y en el hot-reload durante el desarrollo.

📁 package.json - Tu guía clave

Importante: Cuando descargues un proyecto existente, siempre revisa el package.json para saber:

  • Con qué herramienta fue creado

  • Qué comandos usar para ejecutarlo

  • Qué dependencias tiene

Ejemplos:

json
// Proyecto con Create React App
"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build"
}

// Proyecto con Vite
"scripts": {
  "dev": "vite",
  "build": "vite build"
}

💡 Ventajas de Vite

  • ⚡ Más rápido en desarrollo

  • 🎯 Configuración más sencilla

  • 🔧 Fácil de personalizar

  • 📦 Menor tamaño del proyecto inicial

🛑 Detener el servidor

Para detener el servidor en desarrollo, presiona Ctrl + C dos veces en la terminal.

Comentarios

Publicar un comentario

Entradas más populares de este blog

11. Creando un proyecto react con create-react-app

    ¡Vamos a crearnos ahora nuestros proyectos de realidad! Vamos a ver dos formas. La primera va a ser con el clásico  Create React App , que, por cierto, tiene una gran ventaja: encontrarás muchísimos proyectos inicializados con esta herramienta. Es decir, podrás acceder a bastantes códigos fuente que usan este tipo de creación. Esta es la forma que también  React nos recomienda  para arrancar. Podemos verlo en su documentación oficial, donde se explica paso a paso cómo crear un proyecto con esta herramienta. Paso a paso: Creamos una carpeta raíz  para almacenar todos nuestros proyectos. Yo la llamé "React intensivo". Abrimos  Visual Studio Code  (nueva ventana) y arrastramos la carpeta dentro. Así usamos la interfaz gráfica, aunque también se puede hacer directamente por consola. Una vez dentro de la carpeta, abrimos una  nueva terminal  en VS Code. Según la documentación de React, el comando es: bash npx create-react-app < nombre-...
Leer más

29. useEffect

  Tutorial: 29. useEffect en React Introducción a useEffect useEffect es uno de los Hooks más importantes en React que nos permite ejecutar efectos secundarios en nuestros componentes funcionales. Los efectos secundarios son operaciones que pueden incluir peticiones a APIs, suscripciones, manipulación del DOM, etc. 1. Sintaxis Básica La sintaxis básica de useEffect es: javascript useEffect (() => {    // Código a ejecutar }, []) // Array de dependencias Ejemplo visual de la sintaxis: text useEffect(()=>{},[]) 2. Ejemplo Práctico: Sistema de Likes Vamos a construir un componente de likes para entender cómo funciona useEffect : javascript import { useState , useEffect } from "react" ; export function Prueba () {    const [ likes , setLikes ] = useState ( 0 );       const darLike = () => {      setLikes ( likes + 1 );    };       // useEffect ejecutando darLike un...
Leer más

38. 4 Routers

  Tutorial 38.4: Implementando Router en nuestra App de Películas Introducción a React Router Ahora que tenemos nuestra aplicación mostrando películas, necesitamos implementar navegación entre diferentes vistas. Vamos a crear rutas para: Ver la lista de películas (página principal) Ver el detalle de cada película Otras vistas futuras (búsqueda, favoritos, etc.) Paso 1: Estructura de carpetas Primero, vamos a organizar nuestro proyecto con una estructura más profesional: text src/ ├── assets/ ├── components/ │   ├── ContextMovieCard.jsx │   └── MovieCard.jsx ├── data/ ├── pages/ │   └── LandingPage.jsx ├── routers/ │   └── routes.jsx ├── App.css ├── App.jsx ├── index.css └── main.jsx Paso 2: Instalar React Router DOM Abrimos una terminal en nuestro proyecto 1-peliculas y ejecutamos: bash cd 1 -peliculas yarn add react-router-dom O con npm: bash npm install react-router-dom Paso 3: Crear componentes básicos MovieCard.jsx (Componente individual de película) j...
Leer más