35. 1 Creando el proyecto con vite.

 

Tutorial 35.1: Creando el proyecto con Vite

Vamos a crearnos nuestro primer proyecto

Aquí vamos a aprender muchísimo y vamos a estar aplicando todo lo que ya hemos estado recorriendo en la parte teórica. En este tutorial lo vamos a concretar en nuestro primer proyecto práctico.

¿Por qué Vite?

Vamos a crear nuestro proyecto con Vite, que es un poquito más rápido que lo que hemos estado creando tradicionalmente con Create React App. Vite es más moderno y eficiente, ofreciendo tiempos de desarrollo significativamente más rápidos.

Paso 1: Acceder a la documentación de Vite

Primero, vamos a entrar a la documentación oficial de Vite en vitejs.dev. Allí encontraremos la guía completa de cómo crear proyectos.

Paso 2: Elegir el gestor de paquetes

Vamos a utilizar Yarn en lugar de npm, ya que es un poco más rápido y completo. Algunas librerías específicas podrían requerir npm, pero para nuestro proyecto inicial, Yarn funcionará perfectamente.

Nota: Recuerda que al inicio del curso instalamos Yarn de forma global en nuestro sistema.

Paso 3: Preparar nuestro entorno

Nosotros tenemos una carpeta raíz llamada react-intensivo donde hemos estado trabajando. Dentro de esta carpeta, vamos a crear nuestro nuevo proyecto con Vite.

Si aún no has creado esta carpeta o la perdiste:

  1. Crea una nueva carpeta llamada react-intensivo

  2. Ábrela en tu editor de código favorito

Paso 4: Crear el proyecto

Abre una nueva terminal y asegúrate de estar en la carpeta raíz react-intensivo.

Ejecuta el siguiente comando:

bash

yarn create vite

Este proceso es súper rápido. Cuando te pregunte el nombre del proyecto, vamos a usar un nombre significativo para nuestro primer proyecto práctico. Vamos a crear una aplicación de películas, así que llamémosla:

text

01-peliculas

Presiona Enter y sigue las instrucciones:

  1. Framework: Selecciona React

  2. Variante: Elige JavaScript

¡Y listo! Ya tenemos nuestro proyecto creado.

Paso 5: Acceder al proyecto y configurarlo

Vite nos da instrucciones sobre qué hacer a continuación. Como estamos en la carpeta raíz react-intensivo, primero debemos acceder a nuestro nuevo proyecto:

bash

cd 01-peliculas

Paso 6: Instalar dependencias

Una vez dentro de la carpeta del proyecto, ejecuta:

bash

yarn

Esto instalará todos los paquetes de Node que necesita nuestro proyecto. Nota importante: Observa que en este momento no existen los paquetes en la carpeta node_modules - Yarn los descargará ahora.

Consejo sobre gestión de proyectos

Cuando compartas proyectos con otros desarrolladores o los subas a GitHub:

  • No incluyas la carpeta node_modules (puede ser pesada)

  • Solo incluye package.json y package-lock.json o yarn.lock

  • Cuando alguien clone tu proyecto, simplemente ejecutará yarn y se instalarán todas las dependencias automáticamente

Paso 7: Ejecutar el proyecto

Una vez finalizada la instalación, ejecuta:

bash

yarn dev

Esto iniciará el servidor de desarrollo de Vite. Verás que es extremadamente rápido. Podrás acceder a tu proyecto en:

¡Listo!

Ahora tienes tu primer proyecto React con Vite funcionando. En los próximos tutoriales comenzaremos a desarrollar nuestra aplicación de películas aplicando todos los conceptos que hemos aprendido.

Ventajas que notarás con Vite:

  • Tiempos de recarga casi instantáneos

  • Configuración mínima

  • Optimizaciones automáticas

  • Soporte nativo para ES modules

¡Felicitaciones por crear tu primer proyecto con Vite!

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