Интернационализация или локализация важны для транснациональной компании, у которой есть веб-сайт, доступный для людей, понимающих разные языки. С точки зрения разработчика, некоторые разработчики все еще считают, что интернализация - это сложная задача. Но в современных интерфейсных технологиях это легко реализовать. React - самый популярный интерфейсный фреймворк для создания веб-сайтов. i18next и react i18next делает локализацию проще, чем когда-либо. В этой статье я покажу вам, как локализовать веб-сайт с помощью React JS, i18next и реагировать на пакеты i18next.
Предварительное условие
1. Node JS (10 or Higher) 2. create-react-app (npm package)
Пакет, необходимый для локализации
1. i18next(ver: 19.1.0) 2. i18next-browser-languagedetector (ver: 4.0.1) 3. react-i18next (ver: 11.3.1) 4. i18next-xhr-backend (ver: 3.2.2)
Использование npx с create-react-app пакетом шаблона react npm для создания проекта из терминала:
> npx create-react-app react-localization-example
Пошаговая настройка пакетов
Установите i18next и react-i18next пакет npm как dependency из терминала
> npm install --save i18next react-i18next
i18next - это платформа интернационализации для JavaScript. i18next предоставляет такие функции, как (множественное число, контекст, интерполяция, формат). Он предоставляет вам полное решение для локализации вашего продукта с Интернета на мобильные устройства и настольные компьютеры.
react-i18next - это мощный инструмент интернационализации для React / React Native, основанный на i18next.
Затем установите детектор языка браузера для пакетов npm
> npm install --save i18next-browser-languagedetector
Это i18next подключаемый модуль определения языка, который используется для определения языка пользовательского агента (веб-браузера) с помощью файлов cookie, localStorage, навигатора, queryString, HTML-тега, пути и поддомена.
cookie (set cookie i18next=LANGUAGE)
localStoare (set key i18nextLng=LANGUAGE)
queryString(append ?lng=LANGUAGE to URL)
htmlTag(<html lang=”LANGUAGE” …)
path(http://example.site/LANGUAGE/...)
Затем установите Backend XHR для пакетов реакции i18next
> npm install --save i18next-xhr-backend
Добавив ленивую загрузку для переводов, нам нужно использовать этот пакет npm. Он будет загружать ресурсы с внутреннего сервера с помощью XHR API.
Этапы внедрения Локализация в образец проекта
Создайте папку с именем locate в каталоге src, затем создайте папку с языковыми настройками в папке locate. Я создал две папки с именами en -> for english language и jp -> for japanese language.. Затем добавьте json файлов с именами translate в эти папки. Эти файлы будут действовать как Ресурсы для пакета react-i18next.
react-localization-example └── src │ ├── locate │ │ ├── en │ │ │ ├── translate.json │ │ ├── jp │ │ │ ├── translate.json
.../en/translate.json содержит объект JSON english сопоставления языков.
.../jp/translate.json файл содержит объект JSON japanese сопоставления языков.
Добавьте i18n.js файл в src папку в приложении (react-localization-example/src/i18n.js.
Line 1…6 Import all dependency and separated language JSON file in i18n.js file. Line 9, using the XHR so language file could be loaded with using Lazy technique Line 10, Using the Language Detector, so When the site load in the browser it can detect the language Line 11, Hand over thei18nconfiguration toreact-i18nextnpm package Line 13...16, add the `json` formated language `resource` to configuration. Resource are using for get the data and data file to translate process. In our application i load two json file as resource for traslation. Line 18,(lng) Select the default language as English Line 20, (fallbackLng) is the i18next react not finding any language to load, it will load the english Line 23 (ns), 24 (defaultNS), Add the Namespace and Default Namespace, Namespaces are a feature in which allows you to separate translations that get loaded into multiple files. we can select the namespace for starting point for translation, where to get the key and value for traslate. In our json file we use `traslate` as namespace to seperate and start point for traslate. Line 25, keySeparator is used for extract value by key for nested object. Line 26...29, Interpolation is one of the most used functionalities in I18N. It enables you to integrate dynamic values into your translations. react 30...35, Handle rendering while translations are not yet loaded, We can globally configure the wait option by add `react: {wait:true}`
Добавьте поставщика i18next в index.js файл, чтобы все приложение могло получить доступ к локализации. i18nextProvider принимает i18next экземпляр через props i18n и передает его вниз с помощью контекстного API.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { I18nextProvider } from 'react-i18next';
import i18n from './i18n'
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<I18nextProvider i18n={i18n}>
<App />
</I18nextProvider>,
document.getElementById('root'));
serviceWorker.unregister();
В строке 5 я импортирую всю конфигурацию thei18n из файла i18n.js. В функции ReactDOM.render() оберните главный компонент App в I18nextProvider.
Четыре способа реализации локализации с i18next-react
Использование HOC (компонент высшего порядка)
Чтобы расширить компонент с помощью пакета react-i18next, мы можем использовать withTranslation как HOC, передав дополнительную react-i18next функцию t в качестве свойств компонента React.
import React from 'react';
import { withTranslation } from 'react-i18next';
export class App extends React.Component {
render() {
const {t} = this.props
return (<h1>{t('Welcome to React')}</h1>)
}
}
export default withTranslation()(App);
Использование свойств рендеринга
Свойство рендеринга позволяет разработчику использовать функцию t внутри компонента реакции, Translate - это render props для react-i18next, чтобы включить эту функцию.
import React from 'react';
import { Translation } from 'react-i18next';
export default class App extends React.Component {
render() {
return (
<Translation>
{t => <h1>{t('Welcome to React')}</h1>}
</Translation>
)
}
}
Использование хуков
Если разработчик хочет использовать react-i18next для функционального компонента, ему или ей необходимо использовать react-i18next функцию-перехватчик с именем useTranslation. Затем используйте функцию t для перевода содержимого.
import React from 'react';
import { useTranslation } from 'react-i18next';
function App () {
const { t, i18n } = useTranslation();
return <h1>{t('Welcome to React')}</h1>
}
Использование Trans Component
Компонент Trans - лучший способ перевести дерево JSX за один перевод. Это позволяет легко переводить текст, содержащий компонент ссылки или форматирование, подобное <strong>.
import React from 'react';
import { Trans } from 'react-i18next';
export default App extends React.Component {
render() {
return (<Trans><H1>Welcome to React</H1></Trans>)
}
}
Я использую Trans и HOC для локализации примера Samp.
Выполните локализацию в App.js файл
Во-первых, мне нужно изменить функциональный компонент App на компонент класса или контейнера, реализовать функцию react-i18next HOC, чтобы сделать функцию t доступной в компоненте app.
import React from 'react';
import './App.css';
import { withTranslation, Trans } from 'react-i18next'
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
value: "en"
}
}
render () {
return (
<div className="App">This is Localization</div>
);
}
}
export default withTranslation()(App);
В строке 3 импортируйте withTranslation и Trans из react-i18next. Добавьте constructor и добавьте имя состояния value в en, чтобы при изменении языка с помощью радиоуправления мы могли установить value state, чтобы мы могли передавать и сохранять значение, связанное с Language, перемещаться по другому subcomponent из App компонента.
Реализуйте функцию с именем onLanguageHandle, которая принимает значение radio group переключателя, а затем измените языкapp содержимого компонента на i18n's changeLanguage(new language name which is resource i18n configuration file).
onLanguageHandle = (event) => {
let newLang = event.target.value;
this.setState({value: newLang})
this.props.i18n.changeLanguage(newLang)
}
Внедрите элемент управления группы переключателей (для изменения функциональных возможностей языка) в renderRadioButtonфункцию в app компоненте в App.js файле, чтобы пользователь мог легко переключать язык с помощью этих переключателей.
renderRadioButtons = () => {
return (<div>
<input
checked={this.state.value === 'en'}
name="language"
onChange={(e) => this.onLanguageHandle(e)}
value="en"
type="radio" />English
<input
name="language"
value="jp"
checked={this.state.value === 'jp'}
type="radio"
onChange={(e) => this.onLanguageHandle(e)}
/>Japanese
</div>)
}
Чтобы активировать onLanguageChange() //event, мы должны добавить его в функцию Radio button onChange. Если мы хотим, чтобы кнопка Radio была отмечена, мы проверяем значение state в атрибуте checked переключателя.
Реализуйте функцию локализации в функции render () компонента aApp
render () {
const {t} = this.props
return (
<div className="App">
{this.renderRadioButtons()}
<h1><Trans>Paragraph</Trans></h1>
<table>
<tbody>
<tr>
<td style={{width: '20%'}}>
{t('author.title')}
</td>
<td style={{width: '5%'}}>:</td>
<td style={{width: '75%'}}>
{t('author.value')}
</td>
</tr>
<tr>
<td style={{width: '20%'}}>
{t('description.title')}
</td>
<td style={{width: '5%'}}>:</td>
<td style={{width: '75%'}}>
{t('description.value')}
</td>
</tr>
</tbody>
</table>
</div>
);
}
Добавьте функцию renderRadioButton() в синтаксис response jsx, чтобы группы кнопок Radio отображались в поле зрения. Затем добавьте функции <Trans> и t в response js jsx, чтобы реализовать локализацию и интернализацию компонента React JS.
Полный код находится ниже
Вывод браузера на порт localhost:3000
Если вы хотите увидеть версию сборки или производственную версию, это нормально для локализации в среде разработки. Установите пакет ниже
> npm install --global serve
Serve - это легкий веб-сервер, поэтому мы можем запустить нашу производственную сборку с помощью этого serve пакета npm. Затем создайте готовое к производству приложение для реагирования, выполнив следующую команду
> npm run build
С помощью этой команды он создает build папку в корне проекта с необходимыми файлами html, js, assets, css с минимизированной версией. Затем выполните следующую команду, чтобы локально запустить приложение для реагирования на производственную версию.
> serve -s buildСсылка на Github
