Instalación

Esta guía te ayudará a instalar y configurar React Compiler en tu aplicación de React.

Requisitos previos

React Compiler está diseñado para funcionar mejor con React 19, pero también es compatible con React 17 y 18. Obtén más información sobre lacompatibilidad de versiones de React.

Instalación

Instala React Compiler como unadevDependency:

npm install -D babel-plugin-react-compiler@latest

O con Yarn:

yarn add -D babel-plugin-react-compiler@latest

O con pnpm:

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

Configuración básica

React Compiler está diseñado para funcionar por defecto sin ninguna configuración. Sin embargo, si necesitas configurarlo en circunstancias especiales (por ejemplo, para apuntar a versiones de React inferiores a 19), consulta lareferencia de opciones del compilador.

El proceso de configuración depende de tu herramienta de construcción. React Compiler incluye un plugin de Babel que se integra con tu pipeline de construcción.

Babel

Crea o actualiza tu archivobabel.config.js:

Vite

Si usas Vite, puedes agregar el plugin a vite-plugin-react:

Alternativamente, si prefieres un plugin de Babel separado para Vite:

npm install -D vite-plugin-babel

Next.js

Consulta ladocumentación de Next.jspara obtener más información.

React Router

Instalavite-plugin-babely agrega el plugin de Babel del compilador a él:

npm install vite-plugin-babel

Webpack

Un loader de webpack de la comunidad estádisponible aquí.

Expo

Consulta ladocumentación de Expopara habilitar y usar React Compiler en aplicaciones de Expo.

Metro (React Native)

React Native usa Babel a través de Metro, así que consulta la secciónUso con Babelpara las instrucciones de instalación.

Rspack

Consulta ladocumentación de Rspackpara habilitar y usar React Compiler en aplicaciones de Rspack.

Rsbuild

Consulta ladocumentación de Rsbuildpara habilitar y usar React Compiler en aplicaciones de Rsbuild.

Integración con ESLint

React Compiler incluye una regla de ESLint que ayuda a identificar código que no puede ser optimizado. Cuando la regla de ESLint reporta un error, significa que el compilador omitirá la optimización de ese componente o hook específico. Esto es seguro: el compilador continuará optimizando otras partes de tu base de código. No necesitas corregir todas las violaciones inmediatamente. Resuélvelas a tu propio ritmo para aumentar gradualmente el número de componentes optimizados.

Instala el plugin de ESLint:

npm install -D eslint-plugin-react-hooks@latest

Si aún no has configurado eslint-plugin-react-hooks, sigue lasinstrucciones de instalación en el readme. Las reglas del compilador están disponibles en el presetrecommended-latest.

La regla de ESLint:

• Identificar violaciones de lasReglas de React
• Mostrar qué componentes no se pueden optimizar
• Proporcionar mensajes de error útiles para solucionar problemas

Verifica tu configuración

Después de la instalación, verifica que React Compiler esté funcionando correctamente.

Comprueba React DevTools

Los componentes optimizados por React Compiler mostrarán una insignia "Memo ✨" en React DevTools:

1. Instala la extensión de navegadorReact Developer Tools
2. Abre tu aplicación en modo de desarrollo
3. Abre React DevTools
4. Busca el emoji ✨ junto a los nombres de los componentes

Si el compilador está funcionando:

• Los componentes mostrarán una insignia "Memo ✨" en React DevTools
• Los cálculos costosos se memorizarán automáticamente
• No se requiereuseMemomanual

Comprueba la salida de compilación

También puedes verificar que el compilador se está ejecutando revisando la salida de tu compilación. El código compilado incluirá la lógica de memorización automática que el compilador añade automáticamente.

Solución de problemas

Excluir componentes específicos

Si un componente está causando problemas después de la compilación, puedes excluirlo temporalmente usando la directiva"use no memo":

Esto le indica al compilador que omita la optimización para este componente específico. Debes solucionar el problema subyacente y eliminar la directiva una vez resuelto.

Para obtener más ayuda en la solución de problemas, consulta laguía de depuración.

Próximos pasos

Ahora que tienes React Compiler instalado, aprende más sobre:

• Compatibilidad de versiones de Reactpara React 17 y 18
• Opciones de configuraciónpara personalizar el compilador
• Estrategias de adopción incrementalpara bases de código existentes
• Técnicas de depuraciónpara solucionar problemas
• Guía de compilación de bibliotecaspara compilar tu biblioteca de React