¿Cómo crear una WebApp en varios idiomas con react translate?


Si queremos que nuestra aplicación en React esté en varios idiomas, la mejor solución es usar react translate. Puedes descargar el repositorio en https://github.com/herel/react-translate-example

Para empezar, debemos tener previamente instalado el generador de React, en el cual utilizaremos el siguiente comando:

create-react-app react-translate-example

Una vez que se creó nuestra aplicación, instalamos React-Translate con el siguiente comando:

npm install react-translate --save

Como siguiente paso, eliminamos los archivos que se encuentran en la carpeta src. Por el momento no son necesarios ya que solo vamos a usar Index.js y App.js

Nuestro archivo Index debe contener el siguiente código:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

En el archivo App.js debemos importar TranslatorProvider del módulo React-Translate. Existen varias formas para utilizar correctamente este módulo y cargar el lenguaje correspondiente que deseamos mostrar al usuario. El método que hemos elegido para este ejemplo es detectar si dentro del URL se contienen los paths “/es”, “/en”, “/pt”, etc. Una vez que hemos detectado el idioma, cargamos el JSON con las traducciones correspondientes.

import React, { Component } from 'react';
import { TranslatorProvider } from "react-translate";
import Button from './components/Button';
class App extends Component{


    _getLayout(lang){
        return (<TranslatorProvider translations={require('./assets/i18n/'+lang+'.json')}>
            <div>
                <Button name="login"/>
                <Button name="create_account"/>
            </div>
        </TranslatorProvider>)
    }

    render(){
        let url  = window.location.href;
        if(url.search('/en') !== -1){
            return this._getLayout('en')
        }else{
            return this._getLayout('es');
        }
    }
}

export default App;

Como podemos observar, en la función render hemos creado una variable “URL” que se encarga de recibir el URL del navegador. Debemos buscar si se encuentra el path “/en” o por cargamos por default el idioma en español. En el componente <TranslatorProvider> pasamos el párametro Translations a donde se encuentra el archivo JSON con las traducciones correspondientes.

Para determinar qué elementos debe contener nuestro archivo es.json o en.json, primeramente debemos analizar nuestra aplicación e imaginar los posibles componentes que podríamos utilizar. Esto con el propósito de no replicar las traducciones en nuestro JSON. Por ejemplo, si en nuestra aplicación tenemos botones que contienen algún texto, lo ideal es crear un key “buttons” con todos los botones posibles en diferentes idiomas. Tal como en inglés:

{
    "locale"     : "en-us",
    "buttons"     : {
        "login" : "Log in",
        "create_account" : "Create Account"
    }

}

O en español:

{
    "locale"     : "en-mx",
    "buttons"     : {
        "login" : "Iniciar Sesión",
        "create_account" : "Registrate"
    }

}

Ahora vamos a crear un componente Button.js. Gracias a su función render este mostrará un elemento tipo botón (<button>). Obtendremos de los props la variable t, que fue previamente definida cuando importamos de la librería ‘react-translate’. A esta variable pasar el valor name que es parte del componente.

<button>{t(this.props.name)}</button>

import React, { Component } from 'react';
import { translate } from "react-translate";

class Button extends Component{
    render(){
        let { t } = this.props;
        return (<button>{t(this.props.name)}</button>);
    }
}    

export default translate('buttons')(Button);

En el archivo App.js importamos el componente Button que acabamos de crear.

import React, { Component } from 'react';
import { TranslatorProvider } from "react-translate";
import Button from './components/Button';
class App extends Component{


    _getLayout(lang){
        return (<TranslatorProvider translations={require('./assets/i18n/'+lang+'.json')}>
            <div>
                <Button name="login"/>
                <Button name="create_account"/>
            </div>
        </TranslatorProvider>)
    }

    render(){
        let url  = window.location.href;
        if(url.search('/en') !== -1){
            return this._getLayout('en')
        }else{
            return this._getLayout('es');
        }
    }
}

export default App;

Dando como resultado nuestro navegador en español:

O en inglés:

Gracias por leer y compartir este tutorial. Si deseas puedes hacer un donativo de 1 dolar para seguir manteniendo y subir más contenido en este sitio.