Как добавить мультиязычность React приложению | i18next
ฝัง
- เผยแพร่เมื่อ 22 ต.ค. 2024
- В этом видео расскажу как добавить мультиязыность React приложению.
1) Разберем установку i18n-react
2) Настройку i18n
3) Покажу как перевести с английского на русский в React приложении
Код с видео здесь - t.me/ineyeblog
Телеграм пост - t.me/ineyeblog/79
а можно шрифт еще меньше а то они слишком большие и у меня не болят глаза
Уже в следующих роликах, а пока есть то что есть
как же изи всё делается через библиотеку, даже редакс и контекст не нужны)) спс за инфу, дружище
Пожалуйста
Все по делу, толковое видео.
Спасибо
спасибо за видео, полезная инфа, только вот смотря с планшета вспомнился один древний мем) с телефона вообще ничего не увидишь. делай шрифт раза в 2-3 крупнее
Лады
Оно хорошо работает до тех пор пока в проект вы не добавите библиотеку 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 спасибо. Попробую
просто, кратко и понятно, спасибо что не забрал пол часа / час моего времени!
Обращайся
круто, ясно, понянтно. Спасибо !
пожалуйста
следующий ролик надо с 4к монитора записывать, чтобы текст еще мельче был, а то весь экран занимает и ничего не понятно...
Согласен
Спасибо за видео, в личку написал номер карты, жду перевод на лечение глаз))
Отправил 10 000$
мое почтение кратко, понятно ,ясно -
харош
Благодарю, обращайся
Гайд нормальный но мелко, на будущее плиз сайзинг кода побольше и в браузере тоже, а то под лупой разглядываю что пишешь)))
Добро
Подскажите пожалуйста, а что происходит, когда появляются данные с бэка? Как их переводить?
Тоже интересует , разобрались что делать в такой ситуации?
Привет.Прошло 8мес, смогли найти ответ ? можете подсказать что делать?
@@СергейМеньщиков-р2ш Привет.Прошло 6мес, смогли найти ответ ? можете подсказать что делать?
Классный урок, приятно слушать и информацию подано лаконично. Только сделай текст в редакторе чуть по больше, пожалуйста, на мониторе смотреть ещё нормально, но на телефоне сложно что-то разглядеть. За урок огромное спасибо)
Благодарю за фидбєк
Здраствуйте, а если тексты с бэкенда ?Что тогда делать ?Если у вас есть видео можете подсказать
Спасибо за видео! использовали для собственного проекта но при деплое через vercel всё перестало работать 🥲 теперь выясняем почему не работает
Попробуй поменять хостинг, если на новом хосте будет работать, значит проблема в Версель
Спасибо за быстрый, информативный гайд!
Обращайся)
Такой вопрос, для чего вы установили i18next-browser-languageDetector и i18next-http-backend? Они нужны для бэка? Мне просто нужен чисто фронт
Они нужны для фронта. Что бы хранить локализацию не на беке а в файле на фронте. Все что я установил важно для корректной работы
как уже сказали.. сделай шрифт побольше. на 13 дюймах еле видно
Спасибо большое за видео. А как сделать что бы при обновлении, не сбрасывался ? т.е. если выбрал ru, то и после обновления остался ru. И только при нажатии изменить
Сохраняешь в local.storage текущее значение языка. При обновлении в компонент который есть у тебя везде на сайте например хедер. В хедере делаешь useEffect который будет ставить значение которое сохранено в local.storage
А какое в этом случае поведение поисковика? Он смотрит на HTML-файл или он смотрит на Джейсон-файл (с текстом) или он скопмоновывает из HTML и джейсон файлов результирующие страницы на всех языках?
Для React нужно отдельно SEO настройку делать. В этом например помогает библиотека react-helmet
а что делать если много разных текстов, всех их переводить что ли ? Или это можно автомотизировать ?
Переводить на каждый язык
Только вы сам видите свои код а мы нет к сожалению
Добрый день. У меня возник вопрос, как можно распространить перевод на все компоненты в проэкте ?
да
@@Illya.Landar что да? что нужно сделать?
а можно было еще меньше текст сделать, что бы даже с компа видно ни чего не было?
Да, мне надо не 4к монитор а 8к тогда шрифты будут меньше)
спасибо. Лайк.
Пожалуйста
спасибо за урок было очень полезно
Пожалуйста, обращайся
Отличный урок! Есть вопрос, если например по умолчанию русский и поменяли на английский и перешли на другую страницу приложения (сайта), я так понимаю он уже везде автоматически будет английским?
da
Спасибо, очень помог
Обращайся
Пасиб бро
Пожалуйста
Очень хороший и грамотный урок, только можешь текст побольше сделать в редакторе. Глаза аж режет)
экран слишком крупный, нужно поменьше сделать
Есть такое
мне интересно почему бил гейтс на обложке видео ахахах
Так дизайнер сделал, мне понравилось) заморачиваться не стали.
После перезагрузки язык сбрасывается?
Да, до дефолтного который ты указал. Может не сбрасываться если сохранить его например в local storage и при загрузки чекать какой там язык был последним.
чучуть меньше шрифт в вскоде сделай и будет супер !
ок
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пасибо за фидбєк, сделаю