Inicio Rápido de React

Visión general

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

Cubriremos 4 pasos simples:

1. Ejecutar el asistente de configuración

El asistente de configuración te guiará a través del proceso de internacionalización de tu proyecto.

npx gtx-cli@latest init

Para configurar tu proyecto manualmente, sigue la guía de configuración manual.

El asistente de configuración:

1. Instalará las bibliotecas necesarias.
2. Configurará los idiomas compatibles con tu proyecto.
3. Envolverá los componentes JSX de tu proyecto con el componente <T>.
4. Generará una clave API de producción y un ID de proyecto para tu proyecto.

Consulta la documentación del asistente de configuración para más información.

2. Añadir el GTProvider

Añade el componente <GTProvider> a tu aplicación. Distribuye el objeto JSON de configuración en el prop config.

import { GTProvider } from "gt-react";
import MyApp from "./MyApp";
import config from "./gt.config.json";
 
export default function App() {
  return (
    <GTProvider {...config}> 
      <MyApp />
    </GTProvider> 
  );
}

3. Añadir variables de entorno

El asistente de configuración creará un archivo .env.local para ti en la raíz de tu proyecto que contiene tu clave API de producción y el ID del proyecto.

Sin embargo, para usar gt-react en modo de desarrollo, necesitarás añadir una clave API de desarrollo en lugar de una de producción.

VITE_GT_API_KEY="YOUR_GT_DEV_API_KEY"
VITE_GT_PROJECT_ID="YOUR_GT_PROJECT_ID"

4. Limpieza de cadenas de texto

El asistente de configuración envolverá todos los componentes JSX de tu proyecto con el componente <T>. Sin embargo, es posible que notes que las cadenas de texto no se ven afectadas.

Por ejemplo, si tienes una constante de cadena como esta:

export default function Example() {
  const greeting = "Hello, world!";
  return <p>{greeting}</p>;
}

El asistente de configuración no modificará esta cadena.

Para solucionar esto, puedes usar el hook useGT() para traducir la cadena.

import { useGT } from "gt-react";
export default function Example() {
  const t = useGT();
  return <p>{t("Hello, world!")}</p>;
}

¡Vamos a probarlo!

¡Felicidades! 🥳 ¡Tu aplicación ahora es multilingüe! Veamos cómo funciona.

Ve tu aplicación en un idioma diferente

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 la API de React para obtener información detallada sobre el componente <T> y otros componentes disponibles.

Configuración manual

Si prefieres realizar la configuración manualmente, sigue los pasos a continuación.

1. Instala las librerías

Instala las librerías gt-react y gtx-cli.

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

2. Selecciona los 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 (
    // French and Chinese support 
    <GTProvider locales={['fr', 'zh']}> 
      <MyApp />
    </GTProvider> 
  );
}

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

3. Agrega el componente <T>

Envuelve cualquier contenido JSX anidado en el componente <T> para que sea traducible. Para más información, revisa 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>  
  );
}

Utiliza 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>  
  );
}

Para cadenas de texto, puedes usar useGT() para la traducción.

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

4. Agrega tus variables de entorno

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

VITE_GT_API_KEY="YOUR_GT_DEV_API_KEY"
VITE_GT_PROJECT_ID="YOUR_GT_PROJECT_ID"