Живя в самом большом плавильном котле в мире, я привык слышать и видеть языки мира каждый день. Хотя большинство людей в Нью-Йорке говорят по-английски, это не основной язык для всех, и многие люди предпочитают свой родной язык. Как разработчики, мы, как правило, забываем, что не все говорят и читают по-английски, так как мы можем решить эту проблему? Вот где сияет i18next и облегчает задачу любому разработчику, использующему фреймворк React.

Настраивать

Если вы новичок в использовании React, не волнуйтесь, это краткое руководство обязательно объяснит все, что вам нужно знать! Для начала нам нужно создать наше приложение, мы можем сделать это, войдя в наш терминал и набрав npx create-react-app my-app-name, когда это закончится, мы хотим cd my-app-name и, наконец, открыть его с помощью нашего редактора кода, в моем случае я использую VsCode, поэтому я ввел code . my-app-name. .

Теперь, когда мы находимся в нашем редакторе кода, нам нужно снова войти в наш терминал и вставить каждый код.

(Сначала установить) npm install response-i18next i18next - сохранить

(установить второй) npm install i18next-http-backend i18next-browser-languagedetector - сохранить

i18n файл

Это должно установить все необходимые файлы, необходимые для работы i18next в нашем приложении реакции. Вы также можете использовать документацию для i18next по любым вопросам, которые могут возникнуть! Теперь нам нужно создать новый файл под нашим src folder, и мы собираемся называть его i18n.js, и внутри этого файла мы вставим следующий код:

Теперь, когда у нас есть этот код в нашем i18n.js файле, нам нужно добавить код, который немного упростит нам работу. В строке 9 мы создаем массив, сохраняемый в переменной: const languages = ['en', 'spa' , 'ita'] Это простые сокращения для языков, которые мы собираемся использовать (в нашем случае мы используем английский, испанский и итальянский). Теперь в строке 24 мы просто помещаем whitelist: languages,, это обеспечит загрузку только языков в нашей переменной, и это все для этого файла, если вы не хотите добавить больше языков, которые должны быть настроены для перехода к следующему шагу.

Index.js

Теперь нам нужно зайти в наш index.js файл и внести пару изменений, чтобы i18next работал в нашем приложении. Сначала нам нужно импортировать наш недавно созданный файл i18n в строке 6. Мы также внесли изменения в строки 1 и 9–12. Отличный источник, чтобы узнать больше о приостановке работы React, можно найти здесь.

App.js

У нас есть раздражающие части, поэтому теперь мы можем перейти к последнему шагу. Нам нужно сначала зайти в наш app.js файл и скопировать пару пунктов из документации i18next. Самое первое, что нам нужно сделать, это импортировать наш обработчик перевода из i18next, поэтому скопируйте следующий текст в свой импорт.

импортировать {useTranslation} из «response-i18next»;

Как видите, я добавил пару строк кода для работы i18next, но не волнуйтесь, мы рассмотрим каждую из них. На данный момент все, что нам нужно сделать, это убедиться, что мы правильно импортировали строку 2, прежде чем мы сможем перейти к следующему шагу. Для нашего следующего шага нам нужно зайти в нашу папку public внутри нашего редактора кода и создать в ней новую папку с именем locales. Здесь имеет значение наименование, потому что, как вы помните, в начале нашего небольшого учебника мы сокращали каждый из наших языков, теперь нам нужно убедиться, что мы сохраняем то же сокращение, иначе реакция запутается и ничего не переведет. Внутри каждой из этих новых папок мы хотим создать новый файл с именем translation.json. Именно сюда мы будем помещать наши переводы, и здесь в полной мере проявятся возможности 18next!

Когда дело доходит до функциональности ваших переводов, есть несколько вариантов. В этом конкретном примере я создал кнопки и дал каждой отдельной кнопке возможность изменять язык после нажатия, для этого я вернусь к app.js file фотографии, сделанной ранее. Глядя на это, нам нечего делать, кроме двух очень важных деталей, в строке 2 мы видим:

const {t, i18n} = useTranslation ();

с этим мы теперь используем хук useTranslation, предоставленный нам i18next. Это позволит нам вызывать наши переводы внутри наших translation.json файлов. Помните, что в этом примере я создал простую handleClick функцию. Вот где проявляется сила i18next, обычно нам нужно создать небольшую троицу, чтобы наши переводы работали, но поскольку мы используем i18next, он выполняет всю сложную работу за нас, просто добавляя changeLanguage в нашу функцию.

Переводы

Каждый из наших translation.json файлов будет выглядеть одинаково, с той лишь разницей, что язык будет выбран вами. Сохраняйте структуру в каждом из файлов одинаковой, потому что это будет важно, когда мы дойдем до нашего последнего шага и, вероятно, самой легкой части всего этого руководства.

Финал

Самый последний шаг во всем этом прост: нам нужно использовать t, с мощью i18next, и соглашения об именах, этот последний шаг довольно понятен.

В наших файлах перевода мы создали общую переменную, сохраняемую внутри каждого файла, в этом случае «Hello.1» относится к нашему тексту по умолчанию, который сохраняется как «Hello World!» а «Текст.1» означает «Ух ты, это так круто!». По сути, именно так мы переводим текст на странице и теперь можем видеть все вместе!

Если вы еще не успели похвалить себя, потому что теперь вы знаете, как использовать 18next, и можете начать внедрять его в свои приложения. Я оставлю ссылку на мой репозиторий GitHub, где вы сможете повозиться с ним. До следующего раза, удачного кодирования!