Instalación de Vite

Hasta ahora hemos estado trabajando con React directamente en un archivo HTML, cargando React desde un CDN y usando Babel en el navegador. Esto está bien para aprender, pero no es lo que se hace en proyectos reales.

En esta clase vamos a crear un proyecto React profesional usando Vite, la herramienta de desarrollo moderna que usan las empresas.

¿Qué son Node.js y npm?

Antes de instalar Vite, necesitamos entender dos conceptos fundamentales.

Node.js

Node.js es un entorno de ejecución de JavaScript que te permite ejecutar JavaScript fuera del navegador, directamente en tu computadora.

# Puedes ejecutar JavaScript en la terminal
node script.js

¿Por qué lo necesitamos?

🔧 Las herramientas de desarrollo (como Vite) están escritas en JavaScript
📦 Necesitamos ejecutar estas herramientas en nuestra computadora
⚡ Node.js permite que Vite compile y transforme tu código

npm (Node Package Manager)

npm es el gestor de paquetes de Node.js. Es como una “tienda de aplicaciones” para código JavaScript.

¿Para qué sirve?

📦 Instalar librerías - React, React Router, etc.
🔧 Instalar herramientas - Vite, ESLint, etc.
📝 Gestionar dependencias - Qué versión de cada librería usas
🚀 Ejecutar scripts - Comandos para desarrollo y producción

Instalando Node.js

Si no tienes Node.js instalado:

Ve a nodejs.org
Descarga la versión LTS (Long Term Support)
Instala siguiendo las instrucciones
Verifica la instalación:

node --version
# Debería mostrar algo como: v22.x.x

npm --version
# Debería mostrar algo como: 11.x.x

Creando un proyecto con Vite

Ahora sí, vamos a crear nuestro proyecto React con Vite.

Paso 1: Crear el proyecto

Abre tu terminal y ejecuta:

npm create vite@latest

Este comando:

Descarga la última versión de Vite
Te hace algunas preguntas
Crea un proyecto nuevo con la estructura necesaria

Paso 2: Responder las preguntas

Te preguntará:

1. Project name:

? Project name: › devjobs-react

Escribe el nombre de tu proyecto. Por ejemplo: devjobs-react

2. Select a framework:

? Select a framework: ›
  Vanilla
  Vue
❯ React
  Preact
  Lit
  Svelte
  Solid
  Qwik
  Others

Usa las flechas para seleccionar React y presiona Enter.

3. Select a variant:

? Select a variant: ›
  TypeScript
❯ TypeScript + SWC
  JavaScript
  JavaScript + SWC

Selecciona JavaScript + SWC y presiona Enter.

¿Por qué SWC?

SWC (Speedy Web Compiler) es un compilador ultra rápido escrito en Rust.

¿Qué hace SWC?

Transforma JSX a JavaScript
Transforma código moderno a código compatible
Es 20-70x más rápido que Babel

SWC vs Babel:

Babel:        ████████████████ (100s)
SWC:          █ (5s)

¿Por qué lo usamos?

⚡ Velocidad - Compilación casi instantánea
🎯 Mismo resultado - Hace lo mismo que Babel pero más rápido
🔥 Hot Reload más rápido - Los cambios se ven instantáneamente

Paso 3: Instalar dependencias

Una vez creado el proyecto, entra a la carpeta:

cd devjobs-react

E instala las dependencias:

npm install

Esto instala:

✅ React y React DOM
✅ Vite
✅ SWC
✅ Otras herramientas necesarias

¿Qué está pasando?

npm lee el archivo package.json que Vite creó, descarga todas las librerías listadas y las guarda en una carpeta llamada node_modules/.

Paso 4: Iniciar el servidor de desarrollo

npm run dev

Verás algo como:

  VITE v7.0.0  ready in 500 ms

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

Abre tu navegador en http://localhost:5173/ y verás tu aplicación React funcionando.

Estructura del proyecto

Vite crea esta estructura de carpetas:

devjobs-react/
├── node_modules/       # Dependencias instaladas (no tocar)
├── public/             # Archivos estáticos (imágenes, etc.)
│   └── vite.svg
├── src/                # Tu código fuente
│   ├── assets/         # Recursos (imágenes, CSS, etc.)
│   │   └── react.svg
│   ├── App.css         # Estilos del componente App
│   ├── App.jsx         # Componente principal
│   ├── index.css       # Estilos globales
│   └── main.jsx        # Punto de entrada de la aplicación
├── .gitignore          # Archivos que Git debe ignorar
├── index.html          # HTML principal
├── package.json        # Configuración del proyecto y dependencias
├── package-lock.json   # Versiones exactas de dependencias
└── vite.config.js      # Configuración de Vite

Archivos importantes

Veamos los archivos más importantes y qué hace cada uno.

1. `index.html` - El HTML principal

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

¿Qué hace?

Define el <div id="root"> donde React renderizará la aplicación
Carga el archivo main.jsx como módulo
Es el punto de entrada HTML de tu aplicación

Diferencias con lo que hacíamos antes:

<!-- Antes: cargábamos React desde CDN -->
<script src="https://esm.sh/react"></script>

<!-- Ahora: Vite lo gestiona por nosotros -->
<script type="module" src="/src/main.jsx"></script>

2. `main.jsx` - Punto de entrada de React

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

¿Qué hace?

Importa React - Desde node_modules/ (no desde CDN)
Importa ReactDOM - Para renderizar en el navegador
Importa App - Tu componente principal
Importa estilos - CSS global
Renderiza la aplicación - En el <div id="root">

React.StrictMode:

<React.StrictMode>
  <App />
</React.StrictMode>

Es un componente especial que:

Detecta problemas potenciales en tu código
Solo funciona en desarrollo (no afecta producción)
Hace que los componentes se rendericen dos veces para encontrar bugs

💡 Nota sobre los archivos .jsx: Los archivos con extensión .jsx le indican a Vite que contienen código JSX que necesita ser compilado. Vite detecta automáticamente estos archivos y los transforma usando SWC.

3. `App.jsx` - Componente principal

import { useState } from 'react'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <div className="App">
      <h1>Vite + React</h1>
      <button onClick={() => setCount((count) => count + 1)}>count is {count}</button>
    </div>
  )
}

export default App

¿Qué hace?

Define el componente principal de tu aplicación
Usa useState (ya no necesitas React.useState)
Exporta el componente para que main.jsx pueda importarlo

Diferencias importantes:

// Antes (en HTML)
const [count, setCount] = React.useState(0)

// Ahora (con módulos)
import { useState } from 'react'
const [count, setCount] = useState(0)

4. `package.json` - Configuración del proyecto

{
  "name": "devjobs-react",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^19.2.0",
    "react-dom": "^19.2.0"
  },
  "devDependencies": {
    "@vitejs/plugin-react-swc": "^4.1.0",
    "vite": "^7.0.0"
  }
}

Secciones importantes:

scripts - Comandos que puedes ejecutar:
- npm run dev - Inicia el servidor de desarrollo
- npm run build - Crea la versión de producción
- npm run preview - Vista previa de la build de producción
dependencies - Librerías que tu app necesita:
- react - La biblioteca de React
- react-dom - Para renderizar en el navegador
devDependencies - Herramientas de desarrollo:
- vite - El build tool
- @vitejs/plugin-react-swc - Plugin para usar SWC con React

5. `vite.config.js` - Configuración de Vite

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

export default defineConfig({
  plugins: [react()],
})

¿Qué hace?

Configura Vite para usar el plugin de React con SWC
Por ahora no necesitas modificar este archivo

Comandos útiles

Desarrollo

npm run dev

Inicia el servidor de desarrollo en http://localhost:5173/

Características:

🔥 Hot Module Replacement - Los cambios se ven al instante
⚡ Rápido - Inicia en menos de 1 segundo
🐛 Mensajes de error claros - En el navegador y consola

Build para producción

npm run build

Crea una versión optimizada en la carpeta dist/:

📦 Código minificado - Más pequeño y rápido
🗜️ CSS optimizado - Comprimido y sin duplicados
🎯 Assets optimizados - Imágenes, fuentes, etc.
🔢 Code splitting - Divide el código en chunks

Vista previa de producción

npm run preview

Sirve la build de producción localmente para probarla antes de desplegar.

Diferencias clave con el HTML directo

Antes (HTML + CDN)

<script src="https://esm.sh/react"></script>
<script src="https://unpkg.com/@babel/standalone"></script>
<script type="text/babel">
  const [count, setCount] = React.useState(0)
  // Todo en un solo archivo
</script>

Problemas:

❌ Babel en el navegador (lento)
❌ Un solo archivo (difícil de mantener)
❌ No hay Hot Reload
❌ No optimizado

Ahora (Vite + npm)

// src/App.jsx
import { useState } from 'react'

function App() {
  const [count, setCount] = useState(0)
  // ...
}

Ventajas:

✅ SWC compila antes (rápido)
✅ Múltiples archivos (organizado)
✅ Hot Reload instantáneo
✅ Optimizado para producción

Extensiones de archivos: .jsx

Una cosa importante a entender es por qué usamos la extensión .jsx en lugar de solo .js.

¿Qué significa .jsx?

Los archivos con extensión .jsx indican que contienen código JSX que necesita ser transformado:

// App.jsx - Vite sabe que tiene JSX
function App() {
  return <h1>Hola</h1> // ← Esto es JSX
}

¿Por qué es importante?

Vite detecta automáticamente qué archivos necesitan compilación
Mejor para editores - Tu IDE sabe que puede haber JSX
Convención clara - Otros desarrolladores saben qué esperar
Optimización - Vite puede optimizar mejor estos archivos

.js vs .jsx

App.js   ← JavaScript puro (sin JSX)
App.jsx  ← JavaScript con JSX

¿Puedes usar .js con JSX?

Técnicamente sí, Vite lo detectará, pero es mejor usar .jsx para ser explícito:

// ✅ Recomendado: .jsx para archivos con JSX
// src/App.jsx
export default function App() {
  return <h1>Hola</h1>
}

// ⚠️ Funciona pero no es convención: .js con JSX
// src/App.js
export default function App() {
  return <h1>Hola</h1>
}

Resumen de la clase

🎯 Node.js y npm - Qué son y por qué los necesitamos
⚡ Vite - Herramienta de desarrollo moderna y rápida
🚀 SWC - Compilador ultra rápido para JSX
📦 Crear proyecto - Con npm create vite@latest
📁 Estructura de carpetas - Qué hace cada archivo
🔑 Punto de entrada - index.html y main.jsx
📝 Extensión .jsx - Para indicar archivos con JSX
🛠️ Comandos útiles - dev, build, preview

En la próxima clase empezaremos a migrar nuestra aplicación DevJobs a este nuevo proyecto de Vite, creando componentes organizados en archivos separados.

💡 Recuerda: Vite + SWC es la combinación moderna para desarrollo React. Es rápido, simple y es lo que usan las empresas actualmente.

Instalación de Vite

¿Qué son Node.js y npm?

Node.js

npm (Node Package Manager)

Instalando Node.js

Creando un proyecto con Vite

Paso 1: Crear el proyecto

Paso 2: Responder las preguntas

¿Por qué SWC?

Paso 3: Instalar dependencias

Paso 4: Iniciar el servidor de desarrollo

Estructura del proyecto

Archivos importantes

1. index.html - El HTML principal

2. main.jsx - Punto de entrada de React

3. App.jsx - Componente principal

4. package.json - Configuración del proyecto

5. vite.config.js - Configuración de Vite

Comandos útiles

Desarrollo

Build para producción

Vista previa de producción

Diferencias clave con el HTML directo

Antes (HTML + CDN)

Ahora (Vite + npm)

Extensiones de archivos: .jsx

¿Qué significa .jsx?

¿Por qué es importante?

.js vs .jsx

Resumen de la clase

1. `index.html` - El HTML principal

2. `main.jsx` - Punto de entrada de React

3. `App.jsx` - Componente principal

4. `package.json` - Configuración del proyecto

5. `vite.config.js` - Configuración de Vite