This is by far the most professional and practical video I have seen for front-end development. Everything worked. Thank you so much for your time, effort and flawlessly clear explanations.
Localisation was my previous career, I mostly worked in audio recording voice over sessions and had 2 lead roles in Microsoft on xbox360 games. Was nice working with so many languages and people from all over the world, made good friends too.
People getting error for flag icons do this while importing it in index.js flag-icons* instead of flag-icon.min.css So it should look like this import "flag-icon-css/css/flag-icons.min.css As Some deprecation issue has happened with this npm package.
i know this is late, beside the core of this video i think i have answers for many quistions in react itself , truly from long time i didn' t see heavy technical video and in same time so exciting. thanks for being that much profissionl and honest. u saved me a week of figuring out how to localize my application.
People getting error for flag icons do this while importing it in index.js flag-icons* instead of flag-icon.min.css So it should look like this import "flag-icon-css/css/flag-icons.min.css As Some deprecation issue has happened with this npm package.
Hey, your lecture was the best among the lectures I've seen these days. It doesn't just teach you how to use it, but the lecture that understands how it works and applies it is so cool! I hit subscribe and like.
If I may ask. How do I get this done by translating the content of an ecommerce page dynamically without having a saved locale JSON files for all the language supported by the ecommerce website. Because I understand that for each content translated there is an equivalent JSON file with the translation saved in the project public directory. Must I have to have all the locale JSON files for all the text contents in the website? Is there a dynamic way to achieve this like the way google page translator?
like everyone else i also want to say thank you for spending your time on creating this video. i learned much from this video and like your logical thinking most hence subscribed also!
Hello, thank you for this amazing tutorial. I am facing a situation that after refreshing the browser, the language setting is not persistent with a specific language. I checked my setting for order key in the detection object, the first priority is "cookie".
how can I iterate array elements to unrodered list with map {t("text", { returnObject: true }).map((text, country_code) => ( {text} ))} when I do this it gives me t(...).map is not a function
This is a great video, however I am running into issues deploying localization using your technique. I am using Vite with Reactjs and when I go to deploy this project, it seems to not be able to find the translation.json files. Am I missing something?
Thank you so much please i want to know if in production the server will able to read the loadPath ("the path where our json files are stored in the public folder ")? and thanks again
Hello!. I apologize, however, when I tried to do the document.querySelector('html') and also put "fr" inside index.html it still did not change into french
Every time I select a translation it doesn't automatically refresh the app. I have to manually refresh the app to get an RTL look. Any solution for this? Also, what if I want to print the current language name with the globe icon? And remove from the list of available languages? This removes the hassle of disabling it and will also look good as the empty globe doesn't represent what language the app is currently loading
im getting an error on the second line: const currentLanguageCode = cookies.get('i18next') || 'en' const currentLanguage = languages.find(1 => 1.code === currentLanguageCode) const { t, i18n } = useTranslation(); this one: const currentLanguage = languages.find(1 => 1.code === currentLanguageCode) It's red underline on => and the last )
someone help pls) HttpApi not working, I'm getting keys of values, but the key is normal just like that : { "mainPage_title": "some text" } and i see on the page only mainPage_title when using httpApi
this is great but my react app has over 200 articles and that way on translate react app is good for small scale like text and paragraph. if you have over 200 articles, you want to things to be dynamically translate without having to do anything. do you think there are another way to do it sir I really love this video but I need to find a way to translate my 200 articles from english to french, spanish and arabic. thanks
I'm getting only keys from translation.json files and not the values. Also, while trying to access a object from json file, it's giving me an error saying missing key en translation heading heading
Unfortunately all tutorials are only about translating a website of one single sentence and people are so happy with it. None explains this on full websites of multiple pages.
![[LIVE] : ONE ลุมพินี 83 วันนี้!! คู่เอก "พันฤทธิ์ vs ซุปเปอร์บอล วันของโอม MBK"](http://i.ytimg.com/vi/1b4pkKHa_Fk/mqdefault.jpg)
This is by far the most professional and practical video I have seen for front-end development. Everything worked. Thank you so much for your time, effort and flawlessly clear explanations.
Localisation was my previous career, I mostly worked in audio recording voice over sessions and had 2 lead roles in Microsoft on xbox360 games. Was nice working with so many languages and people from all over the world, made good friends too.
People getting error for flag icons do this while importing it in index.js
flag-icons* instead of flag-icon.min.css
So it should look like this
import "flag-icon-css/css/flag-icons.min.css
As Some deprecation issue has happened with this npm package.
@@sureshmakwana8709 thanks bro, you solved my problem
It's truly astounding how easy the internet makes learning these days. Thanks for the tutorial, my guy.
Thank you so much for this incredible video, people like you makes programming beautiful and enjoyable
This tutorial really helps me, thank you
i know this is late, beside the core of this video i think i have answers for many quistions in react itself , truly from long time i didn' t see heavy technical video and in same time so exciting. thanks for being that much profissionl and honest. u saved me a week of figuring out how to localize my application.
People getting error for flag icons do this while importing it in index.js
flag-icons* instead of flag-icon.min.css
So it should look like this
import "flag-icon-css/css/flag-icons.min.css
As Some deprecation issue has happened with this npm package.
Hey, your lecture was the best among the lectures I've seen these days. It doesn't just teach you how to use it, but the lecture that understands how it works and applies it is so cool! I hit subscribe and like.
안녕하세요. 외국인 프로그래머가 한국에서 직장을 구하는 것이 어려워요?
This is absolutely amazing!!! this will help me a lot with my current job. You did an amazing job Muchas gracias!!!!!
Thank you so much, really need these types of videos that explain things and get right to the point.
what a great tutorial❤, the best way to learn is by making the mistake and then correct it which is what you did there but in a smooth way.
By far the most enjoying feeling following you through. Thanks for this awesome content which you provide for free.
thanks a lot man for your efforts, it really helped me
Nice tutorials, I'm new to react but with your description I'm learning a lot.
how can you insert html code into the en.json file, eg line break tag
If I may ask. How do I get this done by translating the content of an ecommerce page dynamically without having a saved locale JSON files for all the language supported by the ecommerce website. Because I understand that for each content translated there is an equivalent JSON file with the translation saved in the project public directory. Must I have to have all the locale JSON files for all the text contents in the website? Is there a dynamic way to achieve this like the way google page translator?
Awesome tutorial. I did it in typescript and had to do some modification, but it worked perfectly. :)
Hello, How you did it,?
I really need your help please
I am currently watching your MERNG series. I will watch it after finishing it.
By the way, great work.
Thank you :))
like everyone else i also want to say thank you for spending your time on creating this video. i learned much from this video and like your logical thinking most hence subscribed also!
Hello, thank you for this amazing tutorial. I am facing a situation that after refreshing the browser, the language setting is not persistent with a specific language. I checked my setting for order key in the detection object, the first priority is "cookie".
Maybe you've setup your browser to not hold cookies?
Bro, you just killed it!
the minimum thing I can say it's really awesome
Hi ,,You are a saviour man.Nowadays i dont see you.We have missed your tutorials
Awesome video!! Thank you and a shout out from Brazil!! 😁
Best tutorial on React i18next. Thanks for your time in providing this explanation.
Hi, thanks for your great video. How do I use ReactElement in translate string? For example: Hello {{val}}, nice to meet you!
how can I iterate array elements to unrodered list with map
{t("text", { returnObject: true }).map((text, country_code) => (
{text}
))}
when I do this it gives me t(...).map is not a function
Great tutorial, easy to follow and everything works, thanks man 😃
thank you soooo much that was incredibly helpful!
I've already did the localization by my own, I'm here to spy your switcher. LOL . thx for the teaching
I searched a lot of videos, but this one is definitely the best, your arabic is pretty correct by the way😉
i search everything but i did not find something like this. Thank you so much
thanks for this nice tutorial i have notice the when change language through the path it is conflicting with react-router-dom
Very good but when you change language with selector it doesn't automatically change de fr, en, in the path with the domain. Any idea to do that ?
This is a great video, however I am running into issues deploying localization using your technique. I am using Vite with Reactjs and when I go to deploy this project, it seems to not be able to find the translation.json files. Am I missing something?
Wow man!
seriously what i have looking for AIO video thanks
I just can not believe that those big websites that have multi languages are using this technique, that would take years and a lot of coding to do it
Absolutely beautiful tutorial!!!
great tutorial, thx a bunch!
please can someone tell me how to link it to a specific page
If i just finished my work and save, the format is .softp , is tNice tutorials type of file compatible with other DAW? like ableton or LogicProX for
what could be better after the typeorm series . . . this guy rocks
i get the issue of the button saying [object Object]English and again for the other language. Also the flag icon thing doesn't seem to work.
you did a really good job great content!
Thanks :D
Thank you so much please i want to know if in production the server will able to read the loadPath ("the path where our json files are stored in the public folder ")? and thanks again
Does this backend configuration loadPath /assets/locales.... will work when my application is in beta or prod environment?
very nice, one thing I am wondering is how would you deal with number translation
eg: new Intl.NumberFormat('ar-EG').format(123) -> '١٢٣'
this is a great tutorial sir, thank you so much hope you make another video saving the state in redux toolkit reducer
Thank you! Very professional
thank you.this is the best tutorial i have got
Hello!. I apologize, however, when I tried to do the document.querySelector('html') and also put "fr" inside index.html it still did not change into french
I do not understand the remote point of this library. If you need to translate manually, what is the exact point of using this?
Every time I select a translation it doesn't automatically refresh the app. I have to manually refresh the app to get an RTL look. Any solution for this?
Also, what if I want to print the current language name with the globe icon? And remove from the list of available languages? This removes the hassle of disabling it and will also look good as the empty globe doesn't represent what language the app is currently loading
Great tutorial. Thanks man
Bro te amo, this was exactly what I needed!!
im getting an error on the second line:
const currentLanguageCode = cookies.get('i18next') || 'en'
const currentLanguage = languages.find(1 => 1.code === currentLanguageCode)
const { t, i18n } = useTranslation();
this one: const currentLanguage = languages.find(1 => 1.code === currentLanguageCode)
It's red underline on => and the last )
thanks, fully understood
Great video, please how do I implement this with a blog site that is getting content dynamically from an API?
Same. Did you get a solution?
which vs code theme do you use?
Which gpu did you used to record this video?
Awesome, thank you so much for this
Awesome! Thank you so much ❤️
the best tutorial! thanks you so much)
Everything works at its best!!
Lifesaver! great content man, keep going! +1 sub
someone help pls)
HttpApi not working, I'm getting keys of values, but the key is normal just like that :
{
"mainPage_title": "some text"
}
and i see on the page only mainPage_title when using httpApi
awesome ! thanks for the tutorial
this is great
but my react app has over 200 articles and that way on translate react app is good for small scale like text and paragraph.
if you have over 200 articles, you want to things to be dynamically translate without having to do anything.
do you think there are another way to do it sir
I really love this video but I need to find a way to translate my 200 articles from english to french, spanish and arabic.
thanks
I'm getting only keys from translation.json files and not the values. Also, while trying to access a object from json file, it's giving me an error saying missing key en translation heading heading
Thanks bro, very good and important tuturial
amazing tutorial! thank you
Very nice explanation.
Thanks
that was amazing tutorial thx for your guide and help
Great video, hope you back TH-cam soon
Will be following
What computer should i use?
Thank you for such a helpful information
Very informative and to the point🚀
so useful thank you ❤
Unfortunately all tutorials are only about translating a website of one single sentence and people are so happy with it. None explains this on full websites of multiple pages.
Thanks for the video. This is the best i18next tutorial on TH-cam
Very useful ! Does it remain after page refresh or another component render?
You did a really good job great content ! Keep it up, please
I will do, thank you
thanks a ton!
Thank you really helped
Prefect, Thank you so much
To download soft soft is the download free or do u have to pay for it?
Thanks Bro much waited for
no problem bro
Thank you very much. 🙇. your tutorial helps me a lot
It was just an awesome video .... thanks a lot !
Thank you vm !
Amazing tutorial thx a lot
Great Content, Thanks.
thank you for the tutorial 👍
Great and pro job. Thanks for you hard work.
open GMS window tNice tutorialng, look at blue screen on left, look at it's bottom right corner where for you it might say "Aggressive TE". click the
Special thanks for the clean-cra! ;)
Thanks a lot it was really helpful
you are perfect . the most useful video I have seen on TH-cam
With all these autodetection features and separate json files the translation process became noticeably slower!
interesting, I didnt experience that, try changing the order / removing or adding detection factors
thank you. You saved my life
Great Work Bro...You are awesome..