Instalar React: crea una app de React con Vite

Para instalar React, crea un proyecto nuevo con Vite: ejecuta npm create vite@latest my-app -- --template react, luego cd my-app, npm install y npm run dev. Primero necesitas tener Node.js instalado. Vite configura React, la compilación de JSX y un servidor de desarrollo que recarga la página cuando guardas.

No necesitas nada de eso para empezar a aprender. El editor de abajo ejecuta React en esta página; es una versión simplificada del archivo App.jsx que Vite genera por ti.

import { useState } from 'react';

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

    return (
        <div style={{ textAlign: 'center' }}>
            <h1>Get started</h1>
            <p>
                Edit <code>src/App.jsx</code> and save to test <code>HMR</code>
            </p>
            <button type="button" onClick={() => setCount((count) => count + 1)}>
                Count is {count}
            </button>
        </div>
    );
}

Haz clic en el botón y luego cambia el texto del título: la vista previa se actualiza mientras escribes, igual que el servidor de desarrollo de Vite aplica tus cambios sin recargar la página (eso es lo que significa "HMR", hot module replacement).

Requisitos: Node.js

Las herramientas que construyen una app de React se ejecutan en Node.js, y npm (su gestor de paquetes) viene incluido. Instala la versión LTS actual desde el sitio de Node.js o con un gestor de versiones como nvm, y luego compruébalo en una terminal:

node -v
npm -v

Ambos comandos deben imprimir un número de versión. Si node -v imprime una versión vieja, actualiza: Vite 8 necesita Node.js 20.19 o posterior (22.12 o posterior en la línea 22) y muestra una advertencia en versiones anteriores.

Crear una app de React con Vite

Ejecuta estos cuatro comandos en la carpeta donde guardas tus proyectos:

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

• npm create vite@latest descarga el generador de proyectos más reciente. my-app es el nombre de la carpeta, y --template react elige React puro con JavaScript. El -- extra pasa la opción de plantilla a través de npm hasta el generador.
• npm install descarga React, React DOM, Vite y las demás dependencias listadas en package.json dentro de node_modules.
• npm run dev inicia el servidor de desarrollo e imprime una dirección local, normalmente http://localhost:5173. Ábrela en un navegador.

Después el generador hace dos preguntas: qué linter configurar (Oxlint o ESLint) y si quieres instalar e iniciar la app ahora. Si respondes que sí a la segunda, ejecuta npm install y npm run dev por ti, así que puedes saltarte los dos últimos comandos. Para TypeScript, usa --template react-ts; consulta React con TypeScript.

Los archivos que crea Vite

my-app/
├── index.html
├── package.json
├── vite.config.js
├── README.md
├── public/
└── src/
    ├── main.jsx
    ├── App.jsx
    ├── App.css
    ├── index.css
    └── assets/

Tres de ellos son los más importantes:

index.html es la página que carga el navegador. Su body contiene un elemento vacío, <div id="root"></div>, y una etiqueta script que carga src/main.jsx. React dibuja toda la app dentro de ese div.

src/main.jsx es el punto de entrada. Conecta React con la página:

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App.jsx';

createRoot(document.getElementById('root')).render(
    <StrictMode>
        <App />
    </StrictMode>,
);

createRoot toma el elemento #root y hace a React responsable de todo lo que hay dentro. render(<App />) dibuja ahí tu componente principal. StrictMode es una ayuda de desarrollo que ejecuta algunas comprobaciones extra; no tiene efecto en el build de producción (consulta Strict Mode). Rara vez necesitas editar este archivo.

src/App.jsx es tu primer componente y el archivo que editas. La versión de Vite importa tres imágenes (una imagen principal y los logos de Vite y React) y App.css, y termina con export default App. Es lo mismo que escribir export default function App() arriba, que es la forma que usan los ejemplos de estas páginas.

Haz tu primera edición

Abre src/App.jsx, borra lo que hay y reemplázalo con tu propio componente. Guarda y el navegador se actualiza. Aquí tienes una pequeña primera app para escribir; pruébala aquí primero:

import { useState } from 'react';

function Greeting({ name }) {
    return <h2>Hello, {name}!</h2>;
}

export default function App() {
    const [name, setName] = useState('React');

    return (
        <div>
            <Greeting name={name} />
            <label>
                Your name:{' '}
                <input value={name} onChange={(e) => setName(e.target.value)} />
            </label>
        </div>
    );
}

Escribe en la caja y el título te sigue. Luego agrega un segundo <Greeting name="Vite" /> debajo del primero: los componentes son reutilizables y cada copia recibe su propio name.

Cuando App.jsx crezca, mueve los componentes a sus propios archivos, como src/Greeting.jsx, expórtalos e impórtalos donde los uses. La página de componentes muestra cómo.

Build para producción

El servidor de desarrollo sirve para trabajar en tu código. Cuando estés listo para publicar, genera el build de la app:

npm run build
npm run preview

npm run build compila JSX, empaqueta y minifica tu código, y escribe archivos estáticos en una carpeta dist/. npm run preview sirve esa carpeta en local para que revises el build real. Sube dist/ a cualquier hosting estático. En el build, React también pasa a su modo de producción, que es más rápido y omite las advertencias de desarrollo.

Create React App está obsoleto

Durante años, la forma estándar de empezar era npx create-react-app my-app. En febrero de 2025 el equipo de React declaró obsoleto Create React App, y ya no recibe mantenimiento. Muchos tutoriales antiguos todavía lo usan, así que verás en ellos react-scripts start y un archivo de entrada src/index.js; los componentes en sí funcionan igual en un proyecto de Vite.

Qué usar en su lugar:

• Vite para una app del lado del cliente, un proyecto de aprendizaje o un widget: la configuración de arriba.
• Un framework cuando necesites enrutamiento, renderizado en el servidor o carga de datos integrados. Next.js y el modo framework de React Router son las opciones habituales:

npx create-next-app@latest my-app
npx create-react-router@latest my-app

Para migrar un proyecto existente de Create React App a Vite, los pasos principales son: instalar vite y @vitejs/plugin-react y quitar react-scripts; agregar un vite.config.js que cargue el plugin de React; mover index.html de public/ a la raíz del proyecto, quitar los marcadores %PUBLIC_URL% y agregar una etiqueta <script type="module" src="/src/index.jsx"> para tu archivo de entrada; renombrar a .jsx los archivos que contienen JSX; renombrar las variables de entorno REACT_APP_ a VITE_ y leerlas desde import.meta.env; y reemplazar los comandos de react-scripts en package.json por vite, vite build y vite preview.

Agregar React a una página existente

React no tiene que controlar toda la página. Puedes renderizarlo dentro de un solo elemento de un sitio existente, como un widget de carrito en una tienda renderizada en el servidor. Igual necesitas un bundler como Vite para compilar JSX. Instala los dos paquetes:

npm install react react-dom

Luego crea una raíz en el elemento que quieres que React controle:

import { createRoot } from 'react-dom/client';
import Cart from './Cart.jsx';

const container = document.getElementById('cart');
createRoot(container).render(<Cart />);

Todo lo que está fuera de #cart se queda como estaba. Puedes crear varias raíces en una página, una por elemento, y cada una funciona de forma independiente.