A criação de um aplicativo React multilíngue simples envolve várias etapas. Vamos criar um exemplo básico usando react-intl , uma biblioteca popular para internacionalização.
Etapa 1: Configurando o Projeto
Primeiro, você precisa configurar um projeto React. Se ainda não o fez, você pode criar um novo usando Create React App:
npx create-react-app my-multilang-app
cd my-multilang-app
Etapa 2: instalação react-intl
Instalar react-intl no seu projecto:
npm install react-intl
Etapa 3: Criando Arquivos de Idioma
Crie arquivos JSON para cada idioma que você deseja oferecer suporte. Por exemplo, crie en.json e es.json dentro de uma pasta chamada locales :
// locales/en.json
{
"hello" : "Hello" ,
"welcome" : "Welcome to our application"
}
// locales/es.json
{
" Olá Olá " ,
"welcome" : "Bem-vindo à nossa aplicação"
}
Etapa 4: configuração IntlProvider
Na tua App.js , envolva seu aplicativo com IntlProvider de react-intl . Este provedor disponibilizará as traduções para seus componentes:
import React from 'react' ;
importar { IntlProvider } de 'react-intl' ;
importar en de './locales/en.json' ;
importar es de './locales/es.json' ;
função Aplicativo ( ) {
mensagens const = {
'en' : en ,
'é' : é
} ;
const [ locale , setLocale ] = Reagir . useState ( 'en' ) ;
retornar (
< IntlProvider locale = { locale } mensagens = { mensagens [ locale ] } >
{ /* Componentes do seu aplicativo aqui */ }
< / IntlProvider >
) ;
}
exportar aplicativo padrão ;
Etapa 5: usando mensagens traduzidas
Usar FormattedMessage de react-intl para exibir mensagens traduzidas:
import React from 'react' ;
import { FormattedMessage } from 'react-intl' ;
function MeuComponent ( ) {
retornar (
<div> _
< h1 > < FormattedMessage id = "olá" / > < / h1 >
< p > < FormattedMessage id = "bem-vindo" / > < / p >
< / div >
) ;
}
Etapa 6: troca de idiomas
Implemente um alternador de linguagem simples:
function LanguageSwitcher ( { setLocale } ) {
return (
<div> _
< button onClick = { ( ) => setLocale ( 'en' ) } > Inglês < / button >
< button onClick = { ( ) => setLocale ( 'es' ) } > Español < / button >
< / div >
) ;
}
Incluir isto LanguageSwitcher componente em seu App.js e passar setLocale como adereço.
Executando o aplicativo
Agora você pode executar seu aplicativo React:
npm start
Este exemplo demonstra uma implementação básica. Em um aplicativo do mundo real, você lidaria com cenários mais complexos, como pluralização, formatação de números, manipulação de idiomas da direita para a esquerda e muito mais. O react-intl a documentação fornece guias abrangentes e exemplos para esses casos de uso avançados.
