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.
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.
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!
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.
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?
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
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".
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?
Ok Fine! Take your 177'th like!! Now kidding aside, that was one hell of a tutorial. No wonder this video has 0 disliked (100% positive). Thanks you so much for it. It helped me a ton!
@@Classsed Remember this word my friend! Great work. Keep it up. I have one idea for you. If you can and if you like, make live sending stream from server to client via socket.io through headers example mp4 or mp3 data, or like youtube live stream video.
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
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
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 )
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.
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
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
when I run the build to it doesn't add the localization path correctly, I need to manually edit the file and add a "./" for it to find my localization files, any ideias?
I added backend: { loadPath: '../public/locales/{{lng}}/translation.json', } - but is not working because imports outside of src/ are not supported :| still looking into this issue, no luck to making it work so far.
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.
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
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
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.
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.
안녕하세요. 외국인 프로그래머가 한국에서 직장을 구하는 것이 어려워요?
By far the most enjoying feeling following you through. Thanks for this awesome content which you provide for free.
This is absolutely amazing!!! this will help me a lot with my current job. You did an amazing job Muchas gracias!!!!!
I searched a lot of videos, but this one is definitely the best, your arabic is pretty correct by the way😉
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.
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!
I am currently watching your MERNG series. I will watch it after finishing it.
By the way, great work.
Thank you :))
thanks a lot man for your efforts, it really helped me
Hi ,,You are a saviour man.Nowadays i dont see you.We have missed your tutorials
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.
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
Awesome video!! Thank you and a shout out from Brazil!! 😁
Best tutorial on React i18next. Thanks for your time in providing this explanation.
Bro, you just killed it!
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?
Great tutorial, easy to follow and everything works, thanks man 😃
Lifesaver! great content man, keep going! +1 sub
i search everything but i did not find something like this. Thank you so much
I've already did the localization by my own, I'm here to spy your switcher. LOL . thx for the teaching
Thanks for the video. This is the best i18next tutorial on UA-cam
Wow man!
seriously what i have looking for AIO video thanks
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
you did a really good job great content!
Thanks :D
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
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
what could be better after the typeorm series . . . this guy rocks
Bro te amo, this was exactly what I needed!!
please can someone tell me how to link it to a specific page
you are perfect . the most useful video I have seen on UA-cam
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?
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?
the minimum thing I can say it's really awesome
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
Absolutely beautiful tutorial!!!
Ok Fine! Take your 177'th like!!
Now kidding aside, that was one hell of a tutorial.
No wonder this video has 0 disliked (100% positive).
Thanks you so much for it. It helped me a ton!
thanks for this nice tutorial i have notice the when change language through the path it is conflicting with react-router-dom
thank you soooo much that was incredibly helpful!
You did a really good job great content ! Keep it up, please
I will do, thank you
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 ?
I do not understand the remote point of this library. If you need to translate manually, what is the exact point of using this?
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.
thank you i wish you'll get more subs don't stop...
Thank you, I'll never stop :)
@@Classsed Remember this word my friend!
Great work. Keep it up.
I have one idea for you. If you can and if you like, make live sending stream from server to client via socket.io through headers example mp4 or mp3 data, or like youtube live stream video.
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
thank you.this is the best tutorial i have got
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
Very informative and to the point🚀
great tutorial, thx a bunch!
You are awesome. I wish you a bright future. Thanks
Does this backend configuration loadPath /assets/locales.... will work when my application is in beta or prod environment?
Brooooooooo you helped me alot, I am so grateful for you
you're very welcome bro, glad to hear that :))
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 )
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
this is a great tutorial sir, thank you so much hope you make another video saving the state in redux toolkit reducer
Great video, hope you back UA-cam soon
Great tutorial. Thanks man
Hi, thanks for your great video. How do I use ReactElement in translate string? For example: Hello {{val}}, nice to meet you!
Thanks bro, very good and important tuturial
Which gpu did you used to record this video?
the best tutorial! thanks you so much)
which vs code theme do you use?
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.
Awesome! Thank you so much ❤️
Very nice explanation.
Thanks
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 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
Thanks Bro much waited for
no problem bro
Thank you! Very professional
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, thank you so much for this
Thank you very much. 🙇. your tutorial helps me a lot
Thank you so much for those information and extra. WIth love from Viet Nam >3
thank you. You saved my life
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?
awesome ! thanks for the tutorial
amazing tutorial! thank you
Everything works at its best!!
that was amazing tutorial thx for your guide and help
This is the best localization video tutorial I have seen..... Top-notch content, thank you for this
To download soft soft is the download free or do u have to pay for it?
Great and pro job. Thanks for you hard work.
It was just an awesome video .... thanks a lot !
Thank you for such a helpful information
Special thanks for the clean-cra! ;)
Great Work Bro...You are awesome..
this is very good. thanks :D looking forward for a Nest.js tutorial
too many packages used just to make i18n work?
What computer should i use?
when I run the build to it doesn't add the localization path correctly, I need to manually edit the file and add a "./" for it to find my localization files, any ideias?
Me too it doesn't find the path when I run the build
Where should I add the ./ ?
I added
backend: {
loadPath: '../public/locales/{{lng}}/translation.json',
}
- but is not working because imports outside of src/ are not supported :| still looking into this issue, no luck to making it work so far.
I really appreciate you .that was awesome .I wish you the best
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
Very useful ! Does it remain after page refresh or another component render?
Awsome tutorial this very simple 😍
thanks, fully understood