• LOGIN
  • Nenhum produto no carrinho.

#002 Como deixar multi linguagem/i18n uma aplicação React? — Dicas de React

Esse é o segundo post de uma série chamada Dicas de React que eu venho fazendo, se você não viu o primeiro da uma olhada aqui e para ver tudo confere a listinha no meu site pessoal 1f642 - #002 Como deixar multi linguagem/i18n uma aplicação React? — Dicas de React

Esses dias estava fazendo uns testes com React em um freela que me apareceu pedindo um site multi linguagem (português e inglês pra ser mais específico). De início lembrei da época que trabalhava com o WPML para traduzir os projetos no WordPress e tentei replicar a ideia do que ele fazia lá e consegui um resultado bem satisfatório que gostaria de compartilhar com vocês 1f642 - #002 Como deixar multi linguagem/i18n uma aplicação React? — Dicas de React

react i18n - #002 Como deixar multi linguagem/i18n uma aplicação React? — Dicas de React
Site alternando entre português e inglês

O que eu preciso pra ler esse post?

  • Esse post exige um conhecimento bem introdutório sobre React (criação e uso de componentes e state). É legal você ter um conhecimento de JavaScript (objetos, arrays e como manipular esses tipos de dados).
  • É legal você também conhecer o React Router, caso não conheça fica a dica desse outro post

Problemas que precisamos resolver

Quando falamos de internacionalização (i18n é uma abreviação para “Internationalization” entre I e o N existem 18 letras) existem diversos tópicos para abordarmos como:

Entre alguns outros sub-tópicos, nesse post vamos focar em dois pontos.
1. Traduzir os textos de uma forma escalável
2. como resgatar o parâmetro via URL informando qual linguagem o usuário deseja visualizar.

Resgatando o parâmetro do idioma e setup inicial do React Router para i18n

Para não perdemos tempo configurando coisas, eu deixei tudo pré-pronto esse repositório

Nele já temos uma app react com um sistema de roteamento configurado, e também o código dessa parte da explicação que irei comentar agora.

O foco para começarmos a entender o projeto atual está no conteúdo do arquivo ./src/routes.js

image 4 - #002 Como deixar multi linguagem/i18n uma aplicação React? — Dicas de React
Estrutura do projeto

Dentro do arquivo ./src/routes.js eu deixei declaradas algumas rotas da nossa aplicação simulando um blog:

export const Routes = () => {
return (

)
}

Ao invés de chamar diretamente o componente do React Router eu criei esse componente como um middleware para gerenciar alguns problemas de fazer a i18n que peguei como:

  • Definir a linguagem padrão do sistema
  • Verificar se o parâmetro :lang foi informado na URL, do contrário o usuário é redirecionado para a linguagem padrão (o mesmo vale para caso a rota que tenha dado match seja a rota 404)
  • Caso não aconteça nenhum dos casos citados o usuário é levado para a rota acessada normalmente e o atributo com o idioma é disponibilizado.
const MultiLanguageRoute = (props) => {
const defaultLanguage = LANGUAGES.default
const hasLang = props.computedMatch.params.lang
const is404Page = props.path
const isBasePathWithoutLang = props.path === "/"
if(isBasePathWithoutLang)  return  
if(!hasLang && !is404Page) return 
return     
}

Conversei bastante com o Felipe Souto, e no meio da conversa a gente chegou no ponto que é ultra importante ressaltar que poderíamos pegar o atributo do idioma de várias formas diferentes.

Mais abaixo no post eu cito outras formas de pegar o atributo

Importante: Sempre que possível, planeje a internacionalização de um site desde o começo do projeto migrar essas coisas em um projeto que está rodando pode ser extremamente trabalhoso.

Um último arquivo que falta mostrar é o que vem por meio do import { LANGUAGES } from './_i18n/languages' que basicamente é um objeto com os idiomas que possuimos e um atributo com a linguagem default (para podermos acessar em diferentes locais do código)

export const LANGUAGES = {
pt: {
urlLang: 'pt',
code: 'pt-BR'
},
en: {
urlLang: 'en',
code: 'en-US'
},
default: 'pt'
}

Agora que vimos uma forma de resolver o lance do parâmetro do idioma, vamos ver como traduzir os textos da nossa app.

Traduzindo textos estáticos em uma app React

am3CiTEpVLz  RbMWQlKOYp0NDSPpO0dah3DP1BR0D6mh8vTshV4ui2u2E8cO089tD3TkWZ78bO492Acnl hBUrQe PAhFAmRoPRcER6J3sC Qq3mFbqsi wxrq9MQhxtd xO4gm - #002 Como deixar multi linguagem/i18n uma aplicação React? — Dicas de React
Componente da home do nosso projeto

A meta agora é fazer com que sempre que um conteúdo seja escrito em português que é nosso idioma padrão, tenhamos uma tradução para ele em inglês e vice-versa de acordo com o parâmetro do idioma passado na URL.

Eu pensei em diversas formas de criar minhas próprias soluções para isso, reinventar a roda pode ti ajudar bastante a resolver problemas no seu dia-a-dia e é bem divertido, mas reconheço que usar algo pronto por quem já passou por mais problemas seria uma escolha bem melhor principalmente para algo que vai pra produção, por isso agora vamos utilizar a biblioteca react-intl do Yahoo.

Ela nos permite usar um componente chamado que faz justamente o que queremos:

FVmmaS9H9D84H1oiBBIBQOTV w2U7N66 aorLNvgg8kUQOu0WNTuWAEvjrY6Ifqs838ycE6 OVs GsgqCM74BD8ViwD1QZTbgmJWMJySj4r J0Q2BiQDpwFEAB2oZ80AmiPwKtvn - #002 Como deixar multi linguagem/i18n uma aplicação React? — Dicas de React

Mas após chamar o componente e passar esse atributo id (que vou entrar em detalhes em breve) recebemos o seguinte erro:

gU6frLH6ezGh2Io8XGz3snfRDF9b2FWTDVhEQf1B6fu8zw3Ew5ol T0dj7Xm2i7Y9Bt1VURBFqPYz5LZtk2VE R4k8cpWwplhnpoTvmwulZZUXjV6qepGVegRKeIJuCro0atS x8 - #002 Como deixar multi linguagem/i18n uma aplicação React? — Dicas de React

Para usarmos de verdade a lib, precisamos fazer algumas configurações ainda:

  • O react-intl precisa que nós façamos a sua configuração passando um JSON com as mensagens que irão aparecer de acordo com o idioma.
  • Essa configuração é feita por meio de um provider para o react-intl que iremos ajustar e chama-lo em ./src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom'
import { Routes } from './routes';
import * as serviceWorker from './serviceWorker';
import IntlProviderConfigured from './_i18n/IntlProviderConfigured';
ReactDOM.render(

, document.getElementById('root'));

O código por trás do é o seguinte:

import React from 'react';
import { addLocaleData, IntlProvider } from 'react-intl'
import pt from 'react-intl/locale-data/pt'
import translations from './translations.json'
import { LANGUAGES } from './languages.js';
// Setup dados de localização por idioma
addLocaleData([...pt])
export default class IntlProviderConfigured extends React.Component {
state = {
loading: true,
locale: ''
}
componentDidMount() {
const currentUrlLang = window.location.pathname.split('/')[1]
const currentLanguage = LANGUAGES[currentUrlLang]
if(!currentLanguage) return window.location.href = `/${LANGUAGES.default}`
this.setState({ locale: currentLanguage.code, loading: false })
}
render() {
const locale = this.state.locale
const { children } = this.props
if(this.state.loading) return 
...
return ( {children} ) } }
  • O react-intl é feito para cobrir mais coisas além de só traduzir as strings (como o caso de ajuste de valor monetário), dado isso, precisamos carregar um pacote de configurações pra cada idioma que formos trabalhar (em nosso caso o pt de português), por padrão a lib só carrega as configs do idioma inglês. Dai vem a chamada da função addLocaleData()
  • O código dentro do componentDidMount() faz com que caso não seja passado um atributo de idioma válido o usuário seja redirecionado para a home com o idioma padrão (lembrando que em seu sistema você pode implementar essa lógica do jeito que achar melhor)
  • o é o provider da react-intrl que nós estamos configurando, ele recebe o objeto do JSON com as traduções do idioma (na prop messages), referente ao locale atual (que em nosso sistema varia de acordo com a URL)
  • O import translations from ‘./src/_i18n/translations.json’ nos traz um JSON com o seguinte formato:
{
"en-US": {
"Bem vindo!": "Welcome!",
"header.bemvindousuario": "Welcome {usuario}"
},
"pt-BR": {
"Bem vindo!": "Bem vindo!",
"header.bemvindousuario": "Bem vindo {usuario}!"
}
}
  • Aqui a chave do JSON é o idioma atual. Dentro do objeto de cada idioma a chave é a base para passarmos o id=”” quando chamamos o componente para traduzir as mensagens: . Muitas pessoas preferem ao invés de passar uma frase como “Bem Vindo!” passar algo como um id mesmo, algo como “header.bemvindousuario”, na prática tudo funciona da mesma forma (a diferença nesse exemplo é que colando as chaves {} é possivel passar um valor dinâmico)
{'Mario'}}}
/>

Agora ao abrirmos nosso projeto no navegador conseguimos alterar o idioma e ver tudo funcionando tranquilamente

react i18n - #002 Como deixar multi linguagem/i18n uma aplicação React? — Dicas de React
Troca de idiomas funcionando após a configuração que fizemos

Para gerar o JSON com as traduções eu acho meio ruim ficar escrevendo na mão, para facilitar a vida eu criei um gerador que você pode usar agora em seus projetos através desse do npm https://www.npmjs.com/package/intl-generator

Como pegar o parâmetro da linguagem da melhor forma possível?

Não existe uma solução bala de prata, no post eu apenas cito uma forma, existem diversas alternativas como:

Seja qual for a opção que você vá escolher, analise qual o melhor para o seu projeto e defina uma estratégia em cima.

E os dados dinâmicos como eu pego?

Para pegar os dados dinâmicos no backend, primeiro a API que você está se comunicando precisa ter suporte para diferentes retornos baseados em um idioma solicitado, caso suporte vc pode usar o header: Accept-Language

Minha sugestão é você criar um BFF (Back end For Front end), ele servirá como um meio de campo ente você e as API externas que você se comunica e via ele você pode configurar as traduções.

E se eu quiser carregar o JSON de traduções dinâmicamente?

Para isso você vai precisar mexer no `IntlProviderConfigured.js` e fazer um request que irá ti retornar as traduções. Um código com um exemplo melhor disso existe na documentação do react-intl

Conclusão

Trabalhar com SPAs i18n exige um certo esforço, e espero ter conseguido dar um norte para você conseguir resolver os problemas em seus projetos atuais/futuros.

Espero que tenha gostado do post, em breve trarei mais dicas, se curtiu e quiser saber em primeira mão quando vierem novos conteúdos, me segue no meu twittere pra acompanhar meus outros posts tá tudo centralizado em meu site pessoal https://mariosouto.com até mais o

The post #002 Como deixar multi linguagem/i18n uma aplicação React? — Dicas de React appeared first on Blog da Alura: desenvolvimento, design e muita tecnologia.

FONTE: https://blog.alura.com.br/002-como-i18n-multi-linguagem-em-uma-aplicacao-react-dicas-de-react/

Powered by WPeMatico

18 de abril de 2019

Sobre nós

A 4Java é especializada em treinamentos da área de T.I, dando cursos tanto presencialmente quanto online, também trabalhamos com desenvolvimento de sistemas.

Contato

Email: [email protected]
Endereço:
Rua Goes Calmon, Nº 136, Galeria São Bento, Sala 110b 1º Andar, Centro, Vitória da Conquista / BA
Horário de atendimento: Segunda a Sexta das 08:30 às 12:00 e das 14:00 às 17:30
Contato
top
4Java © Todos os Direitos Reservados
X