Saltar al contenido principal

React

Vamos a comenzar con la creación de un proyecto basico de React, si ya cuentas con un proyecto, avanzamos.

Creando un proyecto usando Vite​

Terminal
npm create vite@latest my-react-app --template react

Configurar Translate Projects​

Instalamos los paquetes base para configurar nuestras traducciones con i18n

Terminal
npm i i18next react-i18next i18next-http-backend

Debemos de instalar el paquete de translate-projects-react en nuestro proyecto.

npm i translate-projects-react

Configurar i18n​

Comenzamos con la configuracion de i18n, para ello crearemos un archivo i18n.ts o i18n.js en la carpeta src de nuestro proyecto.

  • TypeScript

    Terminal
    touch src/i18n.ts

  • JavaScript

    Terminal
    touch src/i18n.js

Despues de tener nuestro archivo creado, debemos de añadir la siguiente configuración en nuestro archivo i18n.ts o i18n.js.

i18n.ts
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import HttpBackend from "i18next-http-backend";

i18n
  .use(HttpBackend)
  .use(initReactI18next)
  .init({
    interpolation: {
      escapeValue: false,
    },
    ns: ["translation"],
    defaultNS: "translation",
    lng: "es",
    fallbackLng: ["es", "en"],
    debug: true,
    backend: {
      loadPath: "/locales/lng/ns.json", 
    },
  });

export default i18n;

Ahora solo debemos de importar este archivo en nuestro archivo principal del proyecto.

En este caso vamos a añadirlo dentro de nuestro archivo main.tsx de la siguiente manera.

src/main.tsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'
import "./i18n"; // Importamos el archivo i18n

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

Automatizar traducciones​

Vamos a crear un archivo translate.js en la carpeta utils y añadir el siguiente código:

utils/translate.js
import { translateProject } from 'translate-projects-react';

translateProject({
    sourceLang: 'es', // Idioma por defecto
    targetLangs: ['en'], // Idiomas a traducir
    apiKey: '#' //Tu API key
});
Crear cuenta

🚀 Automatiza y optimiza tus traducciones​

Para aprovechar al máximo Translate Projects, necesitas una API Key. Regístrate sin compromiso.

  • No pedimos tarjeta de crédito para probar Translate Projects

Beneficios al obtener tu API Key​

  • Administración Inteligente: Sincroniza y gestiona automáticamente las traducciones de tus proyectos.
  • Panel Administrativo Exclusivo: Personaliza y supervisa todas tus traducciones desde una interfaz centralizada.
  • Soporte Prioritario: Recibe asistencia técnica rápida y especializada cuando la necesites.
  • Traducciones Precisas: Nuestra tecnología entiende el contexto de tu código para ofrecer traducciones exactas.
  • 30.000 Eniacs de Bienvenida: Prueba todas las funciones sin compromiso con tokens internos que potencian tus traducciones.

¡Regístrate ahora y obtén tu API Key para desbloquear todo el potencial de Translate Projects!​

Crear cuenta ahora→

Configurar comando para npm​

Añadir el siguiente comando en tu archivo package.json:

package.json
"scripts": {
  "translate": "node ./utils/translate.js"
}

Primeras traducciones​

Podemos realizarlo de multiples formas, pero vamos a ver las siguientes tres maneras.

Usando la etiqueta Trans con Scanner​

  • Simplemente habilitas el scanner y este se encargará de extraer todas las traducciones de tu proyecto.

Vamos a crear un archivo translate.js en la carpeta utils y añadir el siguiente código:

utils/translate.js
import { translateProject } from 'translate-projects-react';

translateProject({
    sourceLang: 'es', // Idioma por defecto
    targetLangs: ['en'], // Idiomas a traducir
    apiKey: '#', //Tu API key
    scanner: true // Habilitamos el scanner
});

Utilizamos la etiqueta Trans para mostrar nuestra traducción.

src/App.tsx
import { Trans } from 'react-i18next';

function App() {
  return (
    <div>
      <header>
        <Trans>Hola Este es un ejemplo de traduccion</Trans>
      </header>
    </div>
  );
}
  • Ahora ejecutamos el comando que realizará las traducciones:
Terminal
npm run translate

Importar archivo i18n

  • Esto te creará una carpeta con el código de idioma y dentro tendrá un translate.json en la carpeta public/locales, así como se ve en la siguiente imagen.

Importar archivo i18n

Tendrán el siguiente contenido:

public/locales/es/translate.json
{
  "Hola Este es un ejemplo de traduccion base": "Hola Este es un ejemplo de traduccion base"
}
public/locales/en/translate.json
{
  "Hola Este es un ejemplo de traduccion base": "Hello This is a base translation example"
}

Usando nuestro hook de traducciones​

Creamos nuestro hook de traducciones básico.

src/useTranslation.tsx
import { useTypedTranslation } from 'translate-projects-react/hooks';

export const useTranslation = () => {
    return useTypedTranslation()
}

Vamos a usar nuestro hook de traducciones en nuestro componente en el que queramos traducir.

src/App.tsx
import { useTranslation } from './useTranslation'; Importamos nuestro hook

function App() {
  const { t } = useTranslation();
  return (
    <div>
      <header>
        {t('Hola Este es un ejemplo de traduccion base')}
      </header>
    </div>
  );
}

export default App;

Ahora ejecutamos nuestros comandos para que nuestras traducciones se ejecuten

Terminal
npm run translate

Habilitar autocompletado de traducciones​

Importar archivo i18n

Vamos a crear nuestro custom hook para poder usar autocompletado de traducciones

  • TypeScript
    src/hooks/useTranslation.tsx
    import { useTypedTranslation } from 'translate-projects-react/hooks';
    import translation from '../public/locales/es/translation.json';

    type Tylelang = typeof translation

    export const useTranslation = (ns: string = 'translation') => {
        return useTypedTranslation<Tylelang>(ns)
    }

Añadiendo traducciones manualmente​

Si necesitas añadir traducciones manualmente, puedes hacerlo de la siguiente manera.
Creamos un archivo translate.json en la carpeta public/locales/es y añadiremos nuestras traducciones.

Terminal
touch public/locales/es/translate.json
  • Esto creará un archivo translate.json en la carpeta public/locales/es con el siguiente contenido:
public/locales/es/translate.json
{
  "Hola Este es un ejemplo de traduccion base": "Hola Este es un ejemplo de traduccion base"
}

Si deseas, puedes añadir keys a tus traducciones manualmente.

{
    "hello": "Hola este es un ejemplo de traduccion base"
}

Lo usarías de la siguiente manera en tu componente.

src/App.tsx
import { useTranslation } from './useTranslation'; Importamos nuestro hook

function App() {
  const { t } = useTranslation();
  return (
    <div>
      <header>
        {t('hello')}
      </header>
    </div>
  );
}

export default App;
Soporte

Estamos aquí para ayudarte​

Si tienes alguna pregunta, necesitas ayuda o quieres contribuir, no dudes en contactarme. Estoy a tu disposición para apoyarte en lo que necesites.

Apoya el Proyecto​

Si este proyecto te ha sido útil, te invito a invitarme un café. Tu apoyo me ayuda a seguir mejorando y creando contenido de valor. ¡Gracias por estar aquí! ☕

Buy me a coffee