Как добавить мультиязычность React приложению | i18next
Вставка
- Опубліковано 4 вер 2022
- В этом видео расскажу как добавить мультиязыность React приложению.
1) Разберем установку i18n-react
2) Настройку i18n
3) Покажу как перевести с английского на русский в React приложении
Код с видео здесь - t.me/ineyeblog
Телеграм пост - t.me/ineyeblog/79
Спасибо за быстрый, информативный гайд!
Обращайся)
просто, кратко и понятно, спасибо что не забрал пол часа / час моего времени!
Обращайся
спасибо за урок было очень полезно
Пожалуйста, обращайся
Классный урок, приятно слушать и информацию подано лаконично. Только сделай текст в редакторе чуть по больше, пожалуйста, на мониторе смотреть ещё нормально, но на телефоне сложно что-то разглядеть. За урок огромное спасибо)
Благодарю за фидбєк
мое почтение кратко, понятно ,ясно -
харош
Благодарю, обращайся
Все по делу, толковое видео.
Спасибо
Спасибо, очень помог
Обращайся
спасибо за видео, полезная инфа, только вот смотря с планшета вспомнился один древний мем) с телефона вообще ничего не увидишь. делай шрифт раза в 2-3 крупнее
Лады
Спасибо за видео, в личку написал номер карты, жду перевод на лечение глаз))
Отправил 10 000$
спасибо. Лайк.
Пожалуйста
Пасиб бро
Пожалуйста
а можно шрифт еще меньше а то они слишком большие и у меня не болят глаза
Уже в следующих роликах, а пока есть то что есть
как уже сказали.. сделай шрифт побольше. на 13 дюймах еле видно
как же изи всё делается через библиотеку, даже редакс и контекст не нужны)) спс за инфу, дружище
Пожалуйста
Гайд нормальный но мелко, на будущее плиз сайзинг кода побольше и в браузере тоже, а то под лупой разглядываю что пишешь)))
Добро
Подскажите пожалуйста, а что происходит, когда появляются данные с бэка? Как их переводить?
Тоже интересует , разобрались что делать в такой ситуации?
Спасибо за видео! использовали для собственного проекта но при деплое через vercel всё перестало работать 🥲 теперь выясняем почему не работает
Попробуй поменять хостинг, если на новом хосте будет работать, значит проблема в Версель
Спасибо большое за видео. А как сделать что бы при обновлении, не сбрасывался ? т.е. если выбрал ru, то и после обновления остался ru. И только при нажатии изменить
Сохраняешь в local.storage текущее значение языка. При обновлении в компонент который есть у тебя везде на сайте например хедер. В хедере делаешь useEffect который будет ставить значение которое сохранено в local.storage
Оно хорошо работает до тех пор пока в проект вы не добавите библиотеку Material UI. После этого TS начинает выкидывать уйму ошибок. Как я понял проблема в перезаписи типов самого реакта. Толкового решения так и не нашёл, хотя попадались несколько способов, но они нестабильные
если интересно, то вот пример ошибки
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
У меня был на проекте ts i18n и material разных версий, все было ок. Это проблема typescript`a надо tsconfig поправить и будет ок. Загугли i18n и ts проблема типизации.
@@Illya.Landar спасибо. Попробую
Такой вопрос, для чего вы установили i18next-browser-languageDetector и i18next-http-backend? Они нужны для бэка? Мне просто нужен чисто фронт
Они нужны для фронта. Что бы хранить локализацию не на беке а в файле на фронте. Все что я установил важно для корректной работы
Отличный урок! Есть вопрос, если например по умолчанию русский и поменяли на английский и перешли на другую страницу приложения (сайта), я так понимаю он уже везде автоматически будет английским?
da
следующий ролик надо с 4к монитора записывать, чтобы текст еще мельче был, а то весь экран занимает и ничего не понятно...
Согласен
а что делать если много разных текстов, всех их переводить что ли ? Или это можно автомотизировать ?
Переводить на каждый язык
А какое в этом случае поведение поисковика? Он смотрит на HTML-файл или он смотрит на Джейсон-файл (с текстом) или он скопмоновывает из HTML и джейсон файлов результирующие страницы на всех языках?
Для React нужно отдельно SEO настройку делать. В этом например помогает библиотека react-helmet
Добрый день. У меня возник вопрос, как можно распространить перевод на все компоненты в проэкте ?
да
@@Illya.Landar что да? что нужно сделать?
Очень хороший и грамотный урок, только можешь текст побольше сделать в редакторе. Глаза аж режет)
Только вы сам видите свои код а мы нет к сожалению
После перезагрузки язык сбрасывается?
Да, до дефолтного который ты указал. Может не сбрасываться если сохранить его например в local storage и при загрузки чекать какой там язык был последним.
чучуть меньше шрифт в вскоде сделай и будет супер !
ок
мне интересно почему бил гейтс на обложке видео ахахах
Так дизайнер сделал, мне понравилось) заморачиваться не стали.
а можно было еще меньше текст сделать, что бы даже с компа видно ни чего не было?
Да, мне надо не 4к монитор а 8к тогда шрифты будут меньше)
zdarova bratan ya ne russkiy no ti obyasnil kratko i yasno. delay bolshe kontenta po reaktu i ekrana po bolshe пж
Да будет контент по реакту. Благодарю, обращайся
@@Illya.Landar да, по поводу экрана, очень мелко, прибавляй пож
экран слишком крупный, нужно поменьше сделать
Есть такое
4:55 запятая
Так все мелко нехера не видно
есть такое, сори
привет чювак! Уроки крутые! Пожалуйста увеличть свой еркан. на 125-150%!! Очень сложно когда за компом сидишь по 8+ часов смотреть на мелкий шрифт.
Cпасибо за фидбєк, сделаю