Como adicionar internacionalização (i18n) no React
Um guia simples e prático de como deixar sua aplicação acessível para todos os públicos.
Resultado:
0. Estrutura do projeto (opcional)
Essa é a estrutura que usei para esse pequeno projeto, apesar de não ser relevante para a utilização de i18n, creio que facilitaria o entendimento e até mesmo sirva como sugestão:
1. Instalando as dependências
Usaremos apenas 3 dependências:
2. Configurando tudo
Precisaremos de apenas um arquivo de configurações.
i18n/index.js
Depois de configurado, basta chamar esse arquivo na raiz da aplicação (index.js)
3. Adicionando as traduções
As traduções são um objeto.
Teremos um arquivo para cada idioma traduzido (dentro da pasta locales).
Usaremos o . (ponto) para acessar propriedades aninhadas, exemplo:
“home.message”
i18n/locales/pt-br.js
i18n/locales/en-us.js
i18n/locales/index.js
4. Selecionando os idiomas
Criaremos um seletor de idiomas:
Apenas duas bandeiras (Brasil e Eua) que ao serem selecionadas trocam o idioma da aplicação inteira.
Primeiramente, vou mostrar o componente da bandeira e depois o componente que contém as bandeiras e as funcionalidades de trocar o idioma.
components/I18n/Flag.js
components/I18n/I18n.js
Depois é só jogar esse componente em algum lugar, nesse projeto eu coloquei diretamente no App.js, mas poderia ser dentro de um Header, etc.
5. Usando as traduções
Como visto anteriormente, o hook useTranslation retorna uma função que permite a tradução, porém, invés de usarmos esse hook e essa função em todo lugar, vamos abstrair isso em um componente chamado Translator.
components/I18n/Translator.js
Desse modo, poderemos traduzir tudo de uma maneira muito simples, por exemplo:
Pronto. Viram como é fácil?
Link para o repositório: https://github.com/lucaspinheirogit/react-i18n-tutorial
Espero que tenham gostado, qualquer dúvida estou à disposição para ajudar!
