Inicio Rápido

Descripción general

Esta guía de inicio rápido te guiará a través de la 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:

Prerrequisitos

• Un proyecto React usando un framework compatible (Next.js, Vite, etc.)
• Conocimiento básico 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 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

Establece las siguientes variables de entorno:

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

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

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

NEXT_PUBLIC_GT_API_KEY="" # Tu clave 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 API de desarrollador de General Translation
REACT_APP_GT_PROJECT_ID="" # Tu ID de proyecto de General Translation

Puedes obtener una clave 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 Claves API de Desarrollo para obtener tu clave API de desarrollo y el ID del proyecto.

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

Uso

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

El siguiente paso es internacionalizar tu contenido. Aquí, daremos una breve descripción general 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 quieres traducir en el componente <T>.

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

Si tienes contenido dinámico, necesitarás usar componentes de variables 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 ser usada para traducir cadenas de texto.

import { useGT } from 'gt-react';

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

Consulta la guía Traduciendo Cadenas de Texto para más información.

Probando Tu Aplicación

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

Ve Tu Aplicación en un Idioma Diferente

npm run dev 

yarn run dev 

bun run dev 

pnpm run dev 

Solución de Problemas

Despliegue

¡Excelente! 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 desarrollo. Específicamente, no se realizarán traducciones en tiempo de ejecución.

Esto significa que necesitarás traducir tu contenido antes de desplegar tu aplicación, en el proceso de construcción.

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

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 React con gt-react
• Cubrimos brevemente las diferentes formas de traducir contenido en tu aplicación.
• También cubrimos 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>: Traduciendo JSX
• Aprende cómo traducir cadenas de texto con el hook useGT: Traduciendo Cadenas de Texto
• Aprende cómo usar traducciones locales: Traducciones Locales