Instalación de React (Vite)

Vite es una herramienta de compilación frontend moderna que tiene como objetivo proporcionar una experiencia de desarrollo rápida mediante el uso del soporte nativo de módulos ES de los navegadores modernos.

Vite es actualmente la herramienta preferida recomendada oficialmente por React; es más rápida, más ligera y ofrece una mejor experiencia de desarrollo que la tradicional Create React App.

Vite se basa en módulos ES nativos y admite actualización en caliente (HMR) en segundos; el tiempo de arranque suele ser de solo unos cientos de milisegundos.

Para más detalles sobre Vite, consulta:Tutorial de Vite。

¿Por qué elegir Vite + React?

  • Arranque ultrarrápido: El servidor de desarrollo se abre al instante y la actualización en caliente es casi en tiempo real.
  • Características modernas: Soporte integrado para JSX, TypeScript, CSS Modules, PostCSS, etc.
  • Ligero y flexible: Archivo de configuración simple, fácil de personalizar.
  • Optimización de producción: Compilación integrada con Rollup: salida de tamaño reducido y alto rendimiento.
  • Respaldo oficial: La documentación oficial de React recomienda Vite por defecto.

Crea tu primer proyecto Vite + React

Abre la terminal (Windows: PowerShell/Command Prompt; macOS/Linux: Terminal).

Instala con npm:

npm create vite@latest my-first-react-app -- --template react

Comando recomendado (usa pnpm, el más rápido y el que menos espacio de disco ocupa)：

pnpm create vite@latest my-first-react-app -- --template react

Comandos con otros gestores de paquetes:

Instala con yarn:

yarn create vite my-first-react-app --template react

Explicación del comando:

  • create vite@latest: usa la versión más reciente de la herramienta de creación de Vite.
  • my-first-react-app: es el nombre de tu proyecto (se recomiendan minúsculas + guiones).
  • -- --template react: especifica la plantilla de React.

Proceso interactivo(te pedirá que elijas):

  • Nombre del proyecto: pulsa Enter para confirmar o modifícalo.
  • Selecciona el framework: eligeReact。
  • Selecciona la variante:
    • JavaScript(recomendado para empezar, usa primero JS puro).
    • TypeScript(recomendado para nivel avanzado, mejor seguridad de tipos, se puede cambiar más adelante).

Aquí elegimosJavaScript。

Espera unos segundos y el esqueleto del proyecto estará creado.

Instala las dependencias y ejecuta el proyecto

Entra en el directorio del proyectocd my-first-react-app, e instala las dependencias:

npm install

Inicia el servidor de desarrollo:

npm run dev

El navegador abrirá automáticamente http://localhost:5173 (puerto predeterminado de Vite).

Verás una página de bienvenida con el logo de Vite + React y un ejemplo de contador. ¡Esta es tu primera aplicación React en funcionamiento!

Experiencia de reemplazo de módulos en caliente (HMR): modifica cualquier código (te enseñaremos más adelante), guarda y la página se actualizará automáticamente, ¡sin necesidad de recargar! Esa es la magia de Vite.

Explicación detallada de la estructura del proyecto

Abre la carpeta del proyecto (recomendado con VS Code:code .comando para abrirla directamente).

cd my-first-react-app
code .

La estructura típica es la siguiente:

my-first-react-app/
├── public/              # 静态资源（直接复制到构建输出）
│   └── vite.svg         # Vite Logo
├── src/                 # 源码主目录（重点！）
│   ├── assets/          # 图片等资源
│   │   └── react.svg
│   ├── App.jsx          # 主组件（应用入口）
│   ├── main.jsx         # 入口文件（挂载根组件）
│   ├── index.css        # 全局样式
│   └── vite-env.d.ts    # TypeScript 声明（JS 项目可忽略）
├── .gitignore
├── index.html           # HTML 入口模板
├── package.json         # 依赖和脚本
├── vite.config.js       # Vite 配置文件（目前为空，可自定义）
└── README.md

Explicación de los archivos clave:

  • index.html: archivo de entrada de la página,<div></div>es el punto de montaje de React.
  • src/main.jsx: archivo de arranque de React, utiliza la nueva API de React 18 para crear el nodo raíz.
  • src/App.jsx: tu componente principal, incluye un ejemplo de contador por defecto.

Modifica el código: tu primer componente de React

Abresrc/App.jsx, y reemplaza todo el contenido con el siguiente código (empezamos con un saludo simple):

Ejemplo

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

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

  return (
    <div className="App">
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Hola, React+ Vite！</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
Contador actual:{count}
        </button>
      </div>
      <p>
Edita<code>src/App.jsx</code>y guarda para experimentar la actualización en caliente.
      </p>
    </div>
  )
}

export default App

Después de guardar, ¡la página se actualiza automáticamente! Has escrito un componente de función completo:

  • import { useState } from 'react': importa el Hook.
  • useState(0): declara la variable de estadocount, con valor inicial 0.
  • onClickEvento: al hacer clic en el botón se actualiza el estado y se activa el re-renderizado.
  • Sintaxis JSX: parece HTML, pero en realidad es JavaScript.

Pequeño ejercicio：

  1. Cambia el título por tu nombre:<h1>你好，[你的名字]！</h1>
  2. Añade un nuevo botón: muestra el contador de resta.
    <button onClick={() => setCount(count - 1)}>
  减一
</button>

Entiende el archivo de entrada: src/main.jsx

Abresrc/main.jsx：

Ejemplo

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>
)

Explicación:

  • ReactDOM.createRoot: nueva API de React 18, habilita las características concurrentes.
  • <App />: renderiza tu componente principal.
  • <React.StrictMode>: verificación estricta en modo de desarrollo, ayuda a detectar problemas.

Añade un nuevo componente (práctica de componentes)

Ensrc/crea un nuevo archivo encomponents/HelloWorld.jsx(primero crea la carpeta manualmente):

// src/components/HelloWorld.jsx
function HelloWorld({ name }) {
  return <h2>欢迎，{name || '陌生人'}！</h2>
}

export default HelloWorld

EnApp.jsxImpórtalo y úsalo en:

import HelloWorld from './components/HelloWorld.jsx'

// 在 return 中添加：
<HelloWorld name="Ejemplo" />

Guarda y actualiza, verás el nuevo componente renderizado. Este es el encanto de lacomponentización: reutilizable, componible.

Manejo de estilos y recursos

  • CSS: importa directamente./App.css, soporta CSS normal.
  • Imágenes: úsalas como variables después de importarlas (Vite las optimiza automáticamente).
  • Avanzado: soporta CSS Modules (con archivos.module.css), Tailwind CSS (configurable más adelante).

Compila la versión de producción

Cuando termines el desarrollo, compila los archivos estáticos para el despliegue:

npm run build

La salida se genera endist/carpeta: HTML/CSS/JS puro, se puede subir a Vercel, Netlify, etc.

Otras extensiones