Inicio rápido de React

Resumen

Esta guía describe cómo internacionalizar un proyecto existente de React.

Cubriremos 4 pasos simples:

Todo este proceso debería tomar menos de 5 minutos.

Configuración

1. Instalar bibliotecas

Instala las bibliotecas gt-react y gtx-cli.

npm i gt-react
npm i gtx-cli --save-dev

2. Seleccionar idiomas

<GTProvider> se utiliza para configurar el comportamiento de gt-react. Debe colocarse lo más alto posible en tu aplicación, idealmente en la raíz.

Simplemente pasa una lista de códigos de locales para agregarlos a tu aplicación.

import { GTProvider } from "gt-react";
import MyApp from "./MyApp";
 
export default function App() {
  return (
    // Soporte para francés y chino
    <GTProvider locales={['fr', 'zh']}> 
      <MyApp />
    </GTProvider> 
  );
}

Para una lista completa de las props de <GTProvider> y documentación extendida, consulta la referencia de API.

3. Agregar el componente <T>

Envuelve cualquier contenido JSX anidado en el componente <T> para hacerlo traducible. Para más información, consulta la guía sobre el uso de componentes <T>.

import { T } from "gt-react";
 
export default function Example() {
  return (
    <T>
      <p>
        Esto se traduce.
      </p>
    </T>  
  );
}

Usa el componente <Var> para designar contenido JSX que no debe traducirse.

import { T, Var } from "gt-react";
 
export default function Example() {
  return (
    <T>
      <p>
        Esto se traduce. <Var>Esto no.</Var>
      </p>
    </T>  
  );
}

npx gtx-cli setup

Para cadenas de texto, puedes usar useGT() para la traducción. Para más información, consulta esta guía.

import { useGT } from "gt-react";
 
export default function Example() {
  const t = useGT(); 
  return (
    <p>
      {t("Esto se traduce.")}
    </p>
  );
}

4. Agrega tus variables de entorno

Agrega tu clave de API y el ID del proyecto a tus variables de entorno.

VITE_GT_API_KEY="YOUR_GT_DEV_API_KEY"
VITE_GT_PROJECT_ID="YOUR_GT_PROJECT_ID"

¡Vamos a probarlo!

¡Felicidades! 🥳 ¡Tu aplicación ahora es multilingüe! Veámosla en acción.

Ver tu aplicación en otro idioma

npm run dev 

Solución de problemas

Envío a Producción

Sigue nuestra guía sobre envío a producción.

Próximos pasos

• Consulta nuestra referencia de API de React para obtener información detallada sobre el componente <T> y otros componentes disponibles.
• Crea una lista de idiomas aprobados para tu aplicación con el plugin de React.