Inicio / Artículos / Vite + React desde cero, con el React Compiler activado desde el principio

reactvitereact-compilertypescriptfrontend

Vite + React desde cero, con el React Compiler activado desde el principio

Construye la estructura con Vite, lee el punto de entrada y activa React Compiler antes de implementar la primera funcionalidad.

1732 palabras

La propuesta original de React era una interfaz de usuario predecible sobre datos en constante cambio. La opción moderna por defecto es Vite para obtener retroalimentación local rápida, y —si lo optas— React Compiler para automatizar la memorización que antes se realizaba a mano.

Lo que utilizamos (y lo que omitimos)

Vite + React + TypeScript como base. Sin CRA. React Compiler se activa intencionadamente para que puedas ver su efecto desde los primeros componentes.

Requisito previo: Node.js

Instala una versión actual de Node LTS, verifica que node y npm (o pnpm) estén en PATH, y luego crea la estructura inicial:

// The old way — you manually keep the screen in sync every time the data changes
const badge = document.querySelector('#unread-badge');
badge.textContent = count;
if (count === 0) {
  badge.style.display = 'none';
} else {
  badge.style.display = 'block';
}

Lee la estructura de carpetas

Aprende dónde se encuentran index.html, src/main.tsx y App antes de cambiar las herramientas:

// The React way — you simply declare "for this state, the screen looks like this"
function UnreadBadge({ count }: { count: number }) {
  if (count === 0) return null;
  return <span className="badge">{count}</span>;
}

Análisis del punto de entrada

El punto de entrada monta la raíz y carga el CSS global. Manténlo simple; el código de funcionalidades debe estar en los componentes.

node -v

corepack enable

Activar el compilador de React

Agregue el complemento del compilador a la configuración de construcción para que la integración con Babel/SWC coincida con la documentación correspondiente a su versión de Vite:

npm install -g pnpm

pnpm create vite@latest restart-react --template react-ts

Confirmar que está activo

Utilice las verificaciones descritas en la documentación o un componente pequeño que de lo contrario necesitaría useMemo/memo, y verifique la salida del compilador o los indicadores de las herramientas:

cd restart-react
pnpm install
pnpm dev

restart-react/
├── index.html          ← the single HTML file the app mounts into
├── package.json        ← dependencies and scripts
├── tsconfig.json       ← TypeScript config
├── vite.config.ts      ← Vite config (we'll edit this shortly)
└── src/
    ├── main.tsx        ← the app's entry point
    ├── App.tsx         ← the top-level component
    ├── App.css
    └── index.css

Primera funcionalidad sin conflictos con la herramienta

// src/main.tsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'

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

pnpm install -D babel-plugin-react-compiler@latest @rolldown/plugin-babel

Resumen

// vite.config.ts (before)
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

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

// vite.config.ts (after)
import { defineConfig } from 'vite';
import react, { reactCompilerPreset } from '@vitejs/plugin-react';
import babel from '@rolldown/plugin-babel';

export default defineConfig({
  plugins: [
    react(),
    babel({
      presets: [reactCompilerPreset()],
    }),
  ],
});

Ahora cuenta con una aplicación Vite React que incluye soporte de compilador desde el inicio, lo cual es ideal para una serie que asume la memorización automática en lugar de añadirla posteriormente. Mantenga los casos de prueba funcionando, mida cada etapa por separado y evite lanzar el producto basándose únicamente en intuiciones, ya que la próxima versión podría reintroducir el mismo modo de fallo silencioso bajo un nombre diferente. Mantenga los casos de prueba funcionando, mida cada etapa por separado y evite lanzar el producto basándose únicamente en intuiciones, ya que la próxima versión podría reintroducir el mismo modo de fallo silencioso bajo un nombre diferente. Mantenga los casos de prueba funcionando, mida cada etapa por separado y evite lanzar el producto basándose únicamente en intuiciones, ya que la próxima versión podría reintroducir el mismo modo de fallo silencioso bajo un nombre diferente. Mantenga los casos de prueba funcionando, mida cada etapa por separado y evite lanzar el producto basándose únicamente en intuiciones, ya que la próxima versión podría reintroducir el mismo modo de fallo silencioso bajo un nombre diferente. Mantenga los casos de prueba funcionando, mida e

Mantenga los dispositivos en buen estado, mida cada etapa por separado, y se niegue a enviarlos basándose únicamente en sensaciones cuando la próxima versión pueda reintroducir el mismo modo de fallo silencioso bajo un nombre nuevo.Mantenga los dispositivos en buen estado, mida cada etapa por separado y se niegue a lanzar basándose únicamente en intuiciones, ya que la próxima versión podría reintroducir el mismo modo de fallo silencioso bajo un nombre diferente.Mantengan los dispositivos en buen estado, midan cada etapa por separado y se nieguen a lanzar algo basándose únicamente en intuiciones, cuando la próxima versión podría reintroducir el mismo modo de fallo silencioso bajo un nombre diferente.Mantenga los dispositivos en buen estado, mida cada etapa por separado y se niegue a lanzar algo basándose únicamente en la intuición, cuando el próximo lanzamiento podría reintroducir el mismo modo de fallo silencioso bajo un nombre diferente.Mantenga los dispositivos en buen estado, mida cada etapa por separado, y se niegue a enviarlos basándose únicamente en intuiciones cuando la próxima versión pueda reintroducir el mismo modo de fallo silencioso bajo un nombre diferente.Mantengan las pruebas en buen estado, midan cada etapa por separado y se nieguen a lanzar basándose únicamente en intuiciones, cuando la próxima versión pueda reintroducir el mismo modo de fallo silencioso bajo un nombre nuevo.Mantenga los dispositivos en buen estado, mida cada etapa por separado y se niegue a lanzar algo basándose únicamente en intuiciones, cuando la próxima versión podría reintroducir el mismo modo de fallo silencioso bajo un nombre diferente.

Lecturas relacionadas

Todos los artículosEnviar el brief