Cómo localizar una aplicación React: Guía paso a paso (2026)

Respuesta rápida

Para localizar una aplicación React:

1. Instala react-i18next: npm install react-i18next i18next
2. Crear archivos JSON de traducción para cada idioma
3. Configure i18next con sus traducciones
4. Utilizar el gancho useTranslation en los componentes
5. Añadir un conmutador de idiomas

Requisitos previos

• React 16.8+ (para hooks)
• Node.js 14+
• Conocimientos básicos de React

Paso 1: Instalar dependencias

TerminalCopy
npm install react-i18next i18next i18next-browser-languagedetector

Paso 2: Crear archivos de traducción

Cree una carpeta locales con archivos JSON para cada idioma:

src/
  locales/
    en/
      translation.json
    es/
      translation.json
    fr/
      translation.json

src/locales/es/translation.json:

JSONCopy
1{
2  "welcome": {
3    "title": "Welcome to Our App",
4    "subtitle": "The best solution for your needs"
5  },
6  "nav": {
7    "home": "Home",
8    "about": "About",
9    "contact": "Contact"
10  },
11  "auth": {
12    "login": "Log In",
13    "signup": "Sign Up",
14    "logout": "Log Out"
15  }
16}

src/locales/es/translation.json:

JSONCopy
1{
2  "welcome": {
3    "title": "Bienvenido a Nuestra App",
4    "subtitle": "La mejor solucion para tus necesidades"
5  },
6  "nav": {
7    "home": "Inicio",
8    "about": "Acerca de",
9    "contact": "Contacto"
10  },
11  "auth": {
12    "login": "Iniciar Sesion",
13    "signup": "Registrarse",
14    "logout": "Cerrar Sesion"
15  }
16}

Paso 3: Configurar i18next

Crear src/i18n.js:

JavaScriptCopy
1import i18n from 'i18next';
2import { initReactI18next } from 'react-i18next';
3import LanguageDetector from 'i18next-browser-languagedetector';
4
5import enTranslation from './locales/en/translation.json';
6import esTranslation from './locales/es/translation.json';
7import frTranslation from './locales/fr/translation.json';
8
9i18n
10  .use(LanguageDetector)
11  .use(initReactI18next)
12  .init({
13    resources: {
14      en: { translation: enTranslation },
15      es: { translation: esTranslation },
16      fr: { translation: frTranslation },
17    },
18    fallbackLng: 'en',
19    interpolation: {
20      escapeValue: false, // React already escapes
21    },
22  });
23
24export default i18n;

Paso 4: Importar en App Entry

src/index.js:

JavaScriptCopy
1import React from 'react';
2import ReactDOM from 'react-dom/client';
3import './i18n'; // Import i18n configuration
4import App from './App';
5
6const root = ReactDOM.createRoot(document.getElementById('root'));
7root.render(
8  <React.StrictMode>
9    <App />
10  </React.StrictMode>
11);

Paso 5: Usar Traducciones en Componentes

src/App.js:

JSXCopy
1import { useTranslation } from 'react-i18next';
2
3function App() {
4  const { t } = useTranslation();
5
6  return (
7    <div>
8      <nav>
9        <a href="/">{t('nav.home')}</a>
10        <a href="/about">{t('nav.about')}</a>
11        <a href="/contact">{t('nav.contact')}</a>
12      </nav>
13
14      <main>
15        <h1>{t('welcome.title')}</h1>
16        <p>{t('welcome.subtitle')}</p>
17      </main>
18
19      <button>{t('auth.login')}</button>
20    </div>
21  );
22}
23
24export default App;

Paso 6: Añadir cambiador de idioma

JSXCopy
1import { useTranslation } from 'react-i18next';
2
3function LanguageSwitcher() {
4  const { i18n } = useTranslation();
5
6  const changeLanguage = (lng) => {
7    i18n.changeLanguage(lng);
8  };
9
10  return (
11    <div>
12      <button onClick={() => changeLanguage('en')}>English</button>
13      <button onClick={() => changeLanguage('es')}>Espanol</button>
14      <button onClick={() => changeLanguage('fr')}>Francais</button>
15    </div>
16  );
17}
18
19export default LanguageSwitcher;

Características Avanzadas

Variables/Interpolación

Traducción:

JSONCopy
{
  "greeting": "Hello, {{name}}!"
}

Componente:

JSXCopy
t('greeting', { name: 'John' }) // "Hello, John!"

Pluralización

Traducción:

JSONCopy
1{
2  "items": "{{count}} item",
3  "items_plural": "{{count}} items"
4}

Componente:

JSXCopy
t('items', { count: 1 }) // "1 item"
t('items', { count: 5 }) // "5 items"

Nested Keys

JSXCopy
// Access nested keys with dot notation
t('welcome.title')
t('nav.home')

Trans Component (JSX en traducciones)

Traducción:

JSONCopy
{
  "terms": "I agree to the <link>Terms of Service</link>"
}

Componente:

JSXCopy
1import { Trans } from 'react-i18next';
2
3<Trans i18nKey="terms" components={{ link: <a href="/terms" /> }}>
4  I agree to the <a href="/terms">Terms of Service</a>
5</Trans>

Gestión de traducciones a escala

A medida que su aplicación crece, la gestión de archivos JSON se vuelve difícil:

• Múltiples desarrolladores editando los mismos archivos
• Sin memoria de traducción
• Es difícil hacer un seguimiento de las traducciones que faltan
• Exportación/importación manual con traductores

Solución: Utilizar un sistema de gestión de traducciones

IntlPull automatiza la localización de React:

TerminalCopy
1# Pull latest translations
2npx @intlpullhq/cli download --output ./src/locales
3
4# Push new strings
5npx @intlpullhq/cli upload
6
7# Check translation status
8npx @intlpullhq/cli status

Beneficios:

• Traducción asistida por IA
• Colaboración con traductores
• Memoria de traducción
• Sincronización automática con su repositorio

Problemas comunes y soluciones

Problema: Las traducciones no se actualizan

Solución: Asegúrese de haber importado i18n antes de la App:

JavaScriptCopy
import './i18n';
import App from './App';

Problema: Contenido en blanco en la primera carga

Solución: Añadir Suspense fallback:

JSXCopy
1import { Suspense } from 'react';
2
3<Suspense fallback="Loading...">
4  <App />
5</Suspense>

Problema: Errores TypeScript

Solución: Instalar tipos y configurar:

TerminalCopy
npm install --save-dev @types/react-i18next

Mejores prácticas

1. Utilizar namespaces en aplicaciones grandes para organizar las traducciones
2. Mantenga las claves semánticas (por ejemplo, auth.login no button1)
3. No concatenar cadenas - usar interpolación
4. Probar con pseudolocalización antes de las traducciones reales
5. Utilizar un TMS como IntlPull para la colaboración

Preguntas frecuentes

¿Cómo añado un nuevo idioma?

1. Cree un nuevo archivo JSON (por ejemplo, locales/de/translation.json)
2. Añádalo a los recursos de configuración i18n
3. Añadir botón al conmutador de idiomas

¿Cómo manejo los idiomas RTL?

Añadir atributo dir basado en el idioma:

JSXCopy
<html dir={i18n.language === 'ar' ? 'rtl' : 'ltr'}>

How do I lazy-load translations?

Utilice i18next-http-backend:

JavaScriptCopy
1import Backend from 'i18next-http-backend';
2
3i18n.use(Backend).init({
4  backend: {
5    loadPath: '/locales/{{lng}}/{{ns}}.json',
6  },
7});

Resumen

Para localizar una aplicación React:

1. Instala react-i18next e i18next
2. Crear archivos JSON de traducción
3. Configurar i18next
4. Usar useTranslation hook
5. Añadir cambiador de idioma
6. Utilizar un TMS para la escala

¿Listo para escalar tu localización? IntlPull automatiza React i18n con traducción AI e integración CLI sin fisuras.