Интернационализация с помощью React Hooks

Я профессионально занимаюсь Frontend-разработкой уже более двух лет, и мне очень нравится, что она продолжает стремительно развиваться. Вот почему я регулярно слежу за новостями и тем, что происходит с технологиями, которые я использую каждый день. Я наблюдал за выступлением Дэна Абрамова React Today and Tomorrow и 90% Cleaner React With Hooks на ReactConf 2018 в Лас-Вегасе, сидя в первом ряду, и был поражен направленностью этого выступления.

Хорошо, давайте будем честными. Я не был на конференции. Я также не смотрел выступление Дэна до 3 недель назад, утром я проснулся немного раньше и не мог найти что-нибудь посмотреть на Netflix, пока завтракал. На самом деле, я рад, что это произошло, потому что его доклад был очень интригующим, что заставило меня посмотреть дважды и опоздать на работу. Прежде чем идти дальше, я настоятельно рекомендую вам прекратить читать это и посмотреть доклад.

Так что разговор был отличным, и Hooks (а также Дэн) обещали гораздо более чистый синтаксис для использования состояния, использования контекста, использования редуктора и т. Д. (надеюсь, вы видите, что я там сделал). пораженный простотой синтаксиса, я не был готов убедиться, прежде чем сам с ним поиграться. К счастью, я нашел возможность протестировать хуки (а также Context API, который я тоже долгое время игнорировал) в добровольном проекте, который мне пришлось реализовать с i18n. Я был весьма удивлен тем, насколько легко было реализовать механизм перевода, не беспокоясь о HOC или renderProps. Тогда я сказал себе, что мне нужно поделиться этим удивительным открытием (!) Со всеми моими коллегами-разработчиками интерфейса. (и это также была хорошая возможность написать мою вторую статью о Medium. Не читайте первую, потому что она о блокчейне, а биткойн больше не 20k ☹️)

Так что именно здесь эта статья станет учебником, а не рассказом. Самый простой проект, который я могу придумать, - это добавить селектор языка на домашнюю страницу приложения create-react-app и перевести два предложения на этой странице. Я уверен, что код будет далек от совершенства с точки зрения абстракции, жестко заданных значений и т. Д. Но пожалуйста, дайте мне знать в комментариях, если я что-то делаю не так.

Все знают о первом шаге. Нам нужно создать наш шаблонный проект. Давайте запустим эти 3 строки в нашей консоли. Вы также можете клонировать мое репо и следовать за ним, если вы один из тех, кто говорит: Я не здесь, чтобы писать код.

npx create-react-app create-react-app-i18n
cd create-react-app-18n
yarn start

Это должно вызвать у хорошего друга в вашем браузере это знакомое лицо:

Прежде всего, нам нужны переводы этих предложений. Так как английские переводы уже есть, а я являюсь носителем турецкого языка, единственной проблемой, с которой я столкнулся, было найти испанские переводы. Излишне говорить, что огромное спасибо Google Translate за помощь в этом. (И огромные извинения носителям испанского, если Google дал мне глупый перевод). Давайте создадим папку с именем i18n в корневой папке и добавим в нее эти три файла JSON.

Теперь нам нужно приготовить основное блюдо. Давайте создадим файл с именем index.js в той же папке, чтобы реализовать нашу логику перевода. Это будет выглядеть так:

Как видите, в этом файле мы экспортируем две вещи: I18nContext и I18nContextProvider. Контекст будет использоваться с другим хуком везде, где нам нужны переводы, а Provider будет использоваться для переноса наше приложение.

Отказ от ответственности: вначале я не хотел делиться всем файлом сразу. Вместо этого я планировал идти пошагово и описывать каждый блок кода. Затем я решил позволить комментариям сделать всю работу, чтобы сделать ее немного проще и удобочитаемой. Пожалуйста, дайте мне знать в разделе комментариев, если у вас есть какие-либо вопросы.

Действуйте

Поскольку мы создали основное блюдо, механизм перевода, который будет питать компоненты пользовательского интерфейса, мы можем начать создавать и обновлять эти компоненты, чтобы увидеть его в действии.

Чтобы иметь возможность выбирать язык, нам понадобится <select /> компонент :) Вы можете создать папку components или просто добавить ее рядом с App.js, все зависит от вас. Вот необходимый нам LanguageSelect компонент:

Теперь мы можем добавить этот селектор на нашу домашнюю страницу, чтобы увидеть, насколько он прекрасен под вращающимся логотипом React:

Результат должен выглядеть так:

Иди смени язык. Выберите турецкий или испанский. Ой, подожди что? страница не работает. 😠 Там написано dispatch is not a function. Это потому, что мы забыли обернуть наше приложение поставщиком. (Я уже говорил вам об этом раньше, почему вы мне не напомнили) В любом случае, давайте зайдем в index.jsfile в корневой папке и внесем необходимые изменения, например:

Теперь поиграйте с селектором, он должен работать нормально. С помощью этого крошечного исправления мы приближаемся к последнему, но не менее важному разделу проекта, выполняя переводы на странице. Для этого нам нужно сделать две вещи:

Измените компонентApp на функциональный компонент. Нам нужно это, поскольку одно из самых важных правил React Hooks - никогда не использовать ловушку в компоненте класса. (Я даже не знаю, почему они изначально написали компонент theApp как компонент класса)
Обновите статические тексты с помощью нашего прекрасного translate метода, спящего в контексте.

Короче говоря, App.js в корневой папке преобразуется примерно в это:

Я не стал комментировать это, потому что он довольно простой. Мы импортировали I18nContext в useContext. Мы взяли translate метод из контекста, который используем, и заменили два предложения их переведенными версиями. Теперь вы должны увидеть эту страницу, когда выберете es в селекторе языка:

Окончательный вердикт

Хуки - это не что-то волшебное, это синтаксический сахар, который помогает нам меньше нуждаться в компонентах класса. В большинстве случаев лучше использовать хук useEffect вместо написания больших componentDidMount и componentDidUpdate методов. Или хук useContext хорош, чтобы заменить в нем ваш SomeContext.Consumer и renderProps. Я не говорю RIP для всех этих методов жизненного цикла, HOC или renderProps. Они по-прежнему поддерживаются, и в некоторых случаях они могут нам понадобиться. Однако, как утверждает Дэн в своем выступлении, хуки помогают нам писать намного более чистый код React, а чистый код всегда является нашим приоритетом, верно?

Оставайтесь на связи, ребята!

"Подпишись на меня в Твиттере!"

📝 Прочтите этот рассказ позже в Журнале.

🗞 Просыпайтесь каждое воскресное утро и слышите самые интересные истории, мнения и новости недели, ожидающие в вашем почтовом ящике: Получите примечательный информационный бюллетень›

Интернационализация с помощью React Hooks