Как добавить мультиязычность React приложению

Как добавить мультиязычность React приложению | i18next

Рет қаралды 17,585

Жыл бұрын

В этом видео расскажу как добавить мультиязыность React приложению.
1) Разберем установку i18n-react
2) Настройку i18n
3) Покажу как перевести с английского на русский в React приложении
Код с видео здесь - t.me/ineyeblog
Телеграм пост - t.me/ineyeblog/79

Пікірлер: 71

@dabiggestfloppa3441 Жыл бұрын

Спасибо за быстрый, информативный гайд!

@Illya.Landar Жыл бұрын

Обращайся)

@vladyslavkravchenko5955 Жыл бұрын

просто, кратко и понятно, спасибо что не забрал пол часа / час моего времени!

@Illya.Landar Жыл бұрын

Обращайся

@user-wf4qv9oe4s Жыл бұрын

Классный урок, приятно слушать и информацию подано лаконично. Только сделай текст в редакторе чуть по больше, пожалуйста, на мониторе смотреть ещё нормально, но на телефоне сложно что-то разглядеть. За урок огромное спасибо)

@Illya.Landar Жыл бұрын

Благодарю за фидбєк

@EduardProgrammer Жыл бұрын

мое почтение кратко, понятно ,ясно - харош

@Illya.Landar Жыл бұрын

Благодарю, обращайся

@ulugbekvaliev205 Жыл бұрын

спасибо за урок было очень полезно

@Illya.Landar Жыл бұрын

Пожалуйста, обращайся

@pseudonim510 3 ай бұрын

Все по делу, толковое видео.

@Illya.Landar 3 ай бұрын

Спасибо

@DmytroTorop Жыл бұрын

Спасибо за видео, в личку написал номер карты, жду перевод на лечение глаз))

@Illya.Landar Жыл бұрын

Отправил 10 000$

@luckystrike91 Жыл бұрын

спасибо за видео, полезная инфа, только вот смотря с планшета вспомнился один древний мем) с телефона вообще ничего не увидишь. делай шрифт раза в 2-3 крупнее

@Illya.Landar Жыл бұрын

Лады

@maxlight9258 Жыл бұрын

как уже сказали.. сделай шрифт побольше. на 13 дюймах еле видно

@stanislavbykov3031 Жыл бұрын

Спасибо, очень помог

@Illya.Landar Жыл бұрын

Обращайся

@yakub8798 11 ай бұрын

а можно шрифт еще меньше а то они слишком большие и у меня не болят глаза

@Illya.Landar 11 ай бұрын

Уже в следующих роликах, а пока есть то что есть

@mew6085 Жыл бұрын

Гайд нормальный но мелко, на будущее плиз сайзинг кода побольше и в браузере тоже, а то под лупой разглядываю что пишешь)))

@Illya.Landar Жыл бұрын

Добро

@winstontyson603 3 ай бұрын

как же изи всё делается через библиотеку, даже редакс и контекст не нужны)) спс за инфу, дружище

@Illya.Landar 3 ай бұрын

Пожалуйста

@AscaronFrid 5 ай бұрын

спасибо. Лайк.

@Illya.Landar 4 ай бұрын

Пожалуйста

@samborsky_pro 6 ай бұрын

Пасиб бро

@Illya.Landar 6 ай бұрын

Пожалуйста

@Denis-pu4bt Жыл бұрын

Отличный урок! Есть вопрос, если например по умолчанию русский и поменяли на английский и перешли на другую страницу приложения (сайта), я так понимаю он уже везде автоматически будет английским?

@Illya.Landar Жыл бұрын

@fineshine2669 Жыл бұрын

Спасибо за видео! использовали для собственного проекта но при деплое через vercel всё перестало работать 🥲 теперь выясняем почему не работает

@Illya.Landar 11 ай бұрын

Попробуй поменять хостинг, если на новом хосте будет работать, значит проблема в Версель

@aminabu5985 7 ай бұрын

Спасибо большое за видео. А как сделать что бы при обновлении, не сбрасывался ? т.е. если выбрал ru, то и после обновления остался ru. И только при нажатии изменить

@Illya.Landar 6 ай бұрын

Сохраняешь в local.storage текущее значение языка. При обновлении в компонент который есть у тебя везде на сайте например хедер. В хедере делаешь useEffect который будет ставить значение которое сохранено в local.storage

@shevafootbal 9 ай бұрын

Оно хорошо работает до тех пор пока в проект вы не добавите библиотеку Material UI. После этого TS начинает выкидывать уйму ошибок. Как я понял проблема в перезаписи типов самого реакта. Толкового решения так и не нашёл, хотя попадались несколько способов, но они нестабильные

@shevafootbal 9 ай бұрын

если интересно, то вот пример ошибки The types of 'InputLabelProps.children' are incompatible between these types. Type 'ReactI18NextChildren | Iterable' is not assignable to type 'ReactNode'. Type 'Record' is not assignable to type 'ReactNode'. Type 'Record' is missing the following properties from type 'ReactPortal': key, children, type, prop

@Illya.Landar 9 ай бұрын

У меня был на проекте ts i18n и material разных версий, все было ок. Это проблема typescript`a надо tsconfig поправить и будет ок. Загугли i18n и ts проблема типизации.

@shevafootbal 9 ай бұрын

@@Illya.Landar спасибо. Попробую

@lepreclown2180 5 ай бұрын

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

@user-yk3if2ku4e 3 ай бұрын

Тоже интересует , разобрались что делать в такой ситуации?

@loveanime7254 24 күн бұрын

а что делать если много разных текстов, всех их переводить что ли ? Или это можно автомотизировать ?

@Illya.Landar 22 күн бұрын

Переводить на каждый язык

@lektorvt8060 Жыл бұрын

Такой вопрос, для чего вы установили i18next-browser-languageDetector и i18next-http-backend? Они нужны для бэка? Мне просто нужен чисто фронт

@Illya.Landar Жыл бұрын

Они нужны для фронта. Что бы хранить локализацию не на беке а в файле на фронте. Все что я установил важно для корректной работы

@ryukrustplayer 7 ай бұрын

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

@Illya.Landar 6 ай бұрын

Согласен

@ivanzhukovskiy3102 2 ай бұрын

Добрый день. У меня возник вопрос, как можно распространить перевод на все компоненты в проэкте ?

@Illya.Landar 2 ай бұрын

да

@L__U__B. Ай бұрын

@@Illya.Landar что да? что нужно сделать?

@aidasabirova1315 5 ай бұрын

Только вы сам видите свои код а мы нет к сожалению

@danunah12 4 ай бұрын

А какое в этом случае поведение поисковика? Он смотрит на HTML-файл или он смотрит на Джейсон-файл (с текстом) или он скопмоновывает из HTML и джейсон файлов результирующие страницы на всех языках?

@Illya.Landar 4 ай бұрын

Для React нужно отдельно SEO настройку делать. В этом например помогает библиотека react-helmet

@tomioka1331 11 ай бұрын

Очень хороший и грамотный урок, только можешь текст побольше сделать в редакторе. Глаза аж режет)

@altairpenson8779 10 ай бұрын

После перезагрузки язык сбрасывается?

@Illya.Landar 10 ай бұрын

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