Интернационализация React.js фронтенда с Django бэкендом?

Question

[Vic Shóstak]

Доброго времени года!

Подскажите, пожалуйста, способ или библиотеку, с помощью которой можно добавить переводы на разные языки (английский, немецкий, русский) фронтэнда на React.js (16.2.x) с Django бэкендом (1.11.х)? То есть, все строки уже переведены через Django (в .PO файлах) и нужно прикидывать их на фронт в React.

Как это вообще можно сделать? За что хвататься в первую очередь?

Очень буду рад полезным советам и юзкейсам!
Спасибо.

Comments

[sim3x]

У меня только вариант в лоб - отдавать json c переводом реакту

[Виталий]

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

Answer 1

[Vic Shóstak]

Всё гениальное — просто! Разобрался сам.

Всего-то нужно было следовать Django документации и оборачивать все слова для перевода в JS-файлах спец. методом gettext().

Ещё важно не забывать сбрасывать кэш браузера после того, как вносишь правки в перевод ;)

Comments

[KhD]

Можно вопрос? Я так понимаю, оборачивать слова нужно до того как собрать все webpack`ком? Или там есть свои ньюансы, точнее какие там есть ньюансы? А как дела с REST API? Спасибо.
P.S. Только бекендом займаюсь, в реакте ноль.

[Vic Shóstak]

KhD, да, именно перед запаковкой. Написали фронтенд, в нужных местах обернули слова/фразы для перевода в функцию gettext() и только после этого сделали бандл Webpack-ом.

Далее, уже генерим файлы перевода (.po) для нужного языка, переводим и компилим (это уже всё Django делает, в документации отлично этот процесс описан).

А что там с REST API?

[KhD]

Vic Shóstak, Просто, как я понимаю, есть два варианта соединить Django с реактом. Первый - ето подключать бандл в Django`вские темплейты (предполагаю, вы так сделали), второй - ето пооддельности запустить сервак с АПИ написаном на Django и запустить React с помощью Node.js.
Вот меня интересует, знаете ли вы, как сделать перевод, используя второй вариант?

[Vic Shóstak]

KhD, так в вашем кейсе бэкенд на Django вообще не при чём. Вам будет проще на фронте делать перевод. Тем более, что gettext() это Django функция, Node.js может про неё и не знать. Да, это работает только, если Django рендерит шаблон.

Принцип действия примерно такой: Django добавляет все найденные переводы в JSON массив и подключает к странице (всё описано в доках), далее, когда видит в JS-файлах функцию gettext() — просто ищет в этом массиве перевод и заменяет.

В качестве решения вашего кейса, гуглите запрос, например, i18n react. В моём же случае — всё делает Django, а React просто для реактивизации UI.

[KhD]

Vic Shóstak, очень благодарен.