Inicio rápido

Descripción general

Esta guía de inicio rápido te guiará a través del proceso de internacionalización de tu aplicación React con gt-react.

Al final de esta guía, tendrás una aplicación React completamente internacionalizada.

En esta guía, cubriremos lo siguiente:

Requisitos previos

• Un proyecto React que utilice un framework compatible (Next.js, Vite, etc.)
• Conocimientos básicos de React y JavaScript

Instalación

Instala los paquetes gt-react y gtx-cli:

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

yarn add gt-react
yarn add --dev gtx-cli

bun add gt-react
bun add --dev gtx-cli

pnpm add gt-react
pnpm add --save-dev gtx-cli

Configuración

GTProvider

El núcleo de gt-react es el componente GTProvider.

Es responsable de:

• Gestionar la configuración regional actual del usuario
• Proporcionar las traducciones relevantes a tu aplicación
• Proporcionar contexto a los hooks para acceder a las traducciones
• Proporcionar contexto a los hooks para cambiar la configuración regional del usuario

import { GTProvider } from 'gt-react';

export default function App() {
  return (
    <GTProvider>
      <App />
    </GTProvider>
  );
}

{
  "defaultLocale": "en",
  "locales": ["fr", "es"]
}

import gtConfig from './gt.config.json';

<GTProvider {...gtConfig}>
  <App />
</GTProvider>

<GTProvider
  defaultLocale="en"
  locales={["fr", "es"]}
>

Variables de entorno

Configura las siguientes variables de entorno:

VITE_GT_API_KEY="" # Tu clave de API de desarrollador de General Translation
VITE_GT_PROJECT_ID="" # Tu ID de proyecto de General Translation

GATSBY_GT_API_KEY="" # Tu clave de API de desarrollador de General Translation
GATSBY_GT_PROJECT_ID="" # Tu ID de proyecto de General Translation

REDWOOD_ENV_GT_API_KEY="" # Tu clave de API de desarrollador de General Translation
REDWOOD_ENV_PROJECT_ID="" # Tu ID de proyecto de General Translation

NEXT_PUBLIC_GT_API_KEY="" # Tu clave de API de desarrollador de General Translation
NEXT_PUBLIC_GT_PROJECT_ID="" # Tu ID de proyecto de General Translation

REACT_APP_GT_API_KEY="" # Tu clave de API de desarrollador de General Translation
REACT_APP_GT_PROJECT_ID="" # Tu ID de proyecto de General Translation

Puedes obtener una clave de API gratuita y un ID de proyecto creando una cuenta de General Translation.

Después de crear una cuenta, navega a la página de Development API Keys para obtener tu clave de API de desarrollo y el ID de tu proyecto.

Alternativamente, también puedes usar el comando de la herramienta CLI npx gtx-cli auth para generar una clave de API y un ID de proyecto para tu proyecto, guardados en tu archivo .env.local.

Uso

¡Genial! Si has seguido los pasos anteriores, tu proyecto de React ya está configurado para usar gt-react.

El siguiente paso es internacionalizar tu contenido. Aquí, daremos una breve descripción de las diferentes formas de traducir contenido en tu aplicación.

Componente <T>

El componente <T> es el componente principal para traducir contenido JSX en tu aplicación.

Para usarlo, simplemente envuelve el JSX que deseas traducir dentro del componente <T>.

import { T } from 'gt-react';
<T>
  <div>Your content</div>
</T>

Si tienes contenido dinámico, necesitarás usar componentes de variable para pasar los valores dinámicos.

import { T, Var } from 'gt-react';

<T>
  <div>Hello, <Var>{name}</Var>!</div>
</T>

Consulta la guía Traduciendo JSX para más información.

Hook useGT

El hook useGT es un hook de React que devuelve una función que puede usarse para traducir cadenas de texto.

import { useGT } from 'gt-react';

const translate = useGT();
translate('Hello, world!');

Consulta la guía Traduciendo cadenas para más información.

Probando tu aplicación

¡Felicidades! 🥳 Si has seguido los pasos anteriores, ¡tu aplicación ahora es multilingüe! Veámosla en acción.

Ver tu aplicación en otro idioma

npm run dev 

yarn run dev 

bun run dev 

pnpm run dev 

Solución de problemas

Despliegue

¡Genial! Si estás satisfecho con tus traducciones y la funcionalidad de tu aplicación, ahora puedes desplegar tu aplicación.

El comportamiento de gt-react en producción es ligeramente diferente al de desarrollo. Específicamente, no se realizarán traducciones en tiempo de ejecución.

Esto significa que deberás traducir tu contenido antes de desplegar tu aplicación, durante el proceso de compilación.

Por suerte, la herramienta gtx-cli tiene un comando translate que puede usarse para traducir tu contenido automáticamente.

GT_PROJECT_ID=<your-project-id>
GT_API_KEY=<your-production-api-key>

npx gtx-cli translate

{
  "scripts": {
    "build": "npx gtx-cli translate && <...YOUR_BUILD_COMMAND...>"
  }
}

Resumen

• En esta guía, cubrimos cómo configurar tu proyecto de React con gt-react
• Hablamos brevemente sobre las diferentes formas de traducir contenido en tu aplicación.
• También explicamos cómo desplegar tu aplicación después de haber internacionalizado tu contenido.

Próximos pasos

• Aprende cómo traducir contenido JSX con el componente <T>: Traducir JSX
• Aprende cómo traducir cadenas con el hook useGT: Traducir cadenas
• Aprende cómo usar traducciones locales: Traducciones locales