Thank you for helping us to get into new instruments without having to waddle through infinite docs. Immense gratitude from the whole react-junior community
Very nice introduction! A few additional things that might be interesting to new users: 1) You can keep basic HTML nodes (e.g. ) instead of those numbers () in your translation strings. 2) ESLint plugin eslint-plugin-i18next helps you find untranslated texts in your code. 3) i18next-scanner can automatically extract all translated texts and collect them in translation files (e.g. /en/frontend.json, /de/frontend.json). The same thing could be done with the "saveMissing" config option it seems, but I haven't tried that myself yet.
Ok this is one more sub in the bank. I’ve been watching few of your tutorials here and there and you never miss, always go smoothly. Trans component was starting to give me headache, thank you for this
Oh wow, this is awesome! I used to be a translator and now I'm a software developer. I'm REALLY interested in internationalizing and translating web apps.
Trans component is much easier to deal with using built-in 'components' property. No headache at all. As an idea of improvement as in a real project - load translations async from db. So neat. Thanks for your time and gr8 tut, man
I used it once, and it worked well with normal tags in locales, and without passing the whole string in addition to the key. It only supported simple tags like strong etc. But it worked.
Regarding a change in keys that can break the UI - if your component and its helpers are padded with tests, then the commit that has these breaking changes should fail at some level, depending on the setup you have. For example a pre-commit script that runs all *.test files, a github action that blocks the PR if any test fails, etc.
For Ru,Urk and other slovenian languages, this words have more declinations, so use: welcomeMessage_one, welcomeMessage_few, welcomeMessage_many, otherwise it may not work) Also, we do translate names, for us there is a difference in Latin and Cyrillic)
How it good of the you already specific the data on which language is in convert what is that , example Welcom - helo I am developer. To - you also write his translate value so what he do. I want something like if I give the value translation and give it the language it automatically converts to the languages not specified the convert language value
Hi cosden i hope you make a tutorial on how to use react helmet async. Been watching your tutorial about react. Thank you so much for bringing a good quality video
Good video. Regarding the library. This i18n is SO WRONG in the first place. The thing is that I should do so much manual work and the mistake possibility is so high. This is so frustrating. As a developer, I want to have a running service within the project that will generate those JSONs without me. For me, it would be convenient to write full text in English inside t("Hello world!") and for all supported languages it will be like { fr: { "Hello world!": null } } With the highlighting when the text in the component is changing. But no one seems to move in that direction.
No need to create workarounds creating constants or whatever... It's possible to set up i18next so it gets translations types from translation files with a little configurations.
@cosdensolutions my bad. I commented before watching the vid. Lol. I'll try using this in my next project because with my previous one I used a custom made object for multiple languages and when I switched languages in the app it worked on my local host but after deploying the website on netlify apparently the switch doesn't work for some reason.
What if we want to separate different page translations too? Like I need an en.json for my home page and my settings page separatelly because there are tons of words in each page. Can I do nested objects inside my json file like en.json { "homePage":{ "welcomeText": "Hello!", }, "settingsPage":{ "title":"Settings page" } } And use it like this: { t("homePage.welcomeText") }??
Bro showed almost nothing. Why in the world it's called complete tutorial? You haven't showed us how to change language, where to store it value how to get translation from API. like bro this video should be called "React i18next (Getting started)
@@cosdensolutions I would have never guessed! Your English sounds so good. I once had a project manager from Romania (Andrei), and you sound nothing like him. 😅
![BLACK BAG - Official Trailer [HD] - Only in Theaters March 14](http://i.ytimg.com/vi/Du0Xp8WX_7I/mqdefault.jpg)
Brother, do you understand that you are the GOAT of React tutorials?
We do
Thank you for helping us to get into new instruments without having to waddle through infinite docs. Immense gratitude from the whole react-junior community
Very nice introduction!
A few additional things that might be interesting to new users:
1) You can keep basic HTML nodes (e.g. ) instead of those numbers () in your translation strings.
2) ESLint plugin eslint-plugin-i18next helps you find untranslated texts in your code.
3) i18next-scanner can automatically extract all translated texts and collect them in translation files (e.g. /en/frontend.json, /de/frontend.json). The same thing could be done with the "saveMissing" config option it seems, but I haven't tried that myself yet.
Please ecxplain 3rd one, what ?
Don't forget, that my bro is fluent in French, and he's very proud of it!
best tutorial for useful libraries that most people didnt cover. you earn my sub!
Ok this is one more sub in the bank. I’ve been watching few of your tutorials here and there and you never miss, always go smoothly.
Trans component was starting to give me headache, thank you for this
I natively speak french. I liked the way you tried it ! 🔥🔥
Your tutorials are awesome !!!!
Oh wow, this is awesome! I used to be a translator and now I'm a software developer. I'm REALLY interested in internationalizing and translating web apps.
Trans component is much easier to deal with using built-in 'components' property. No headache at all. As an idea of improvement as in a real project - load translations async from db. So neat. Thanks for your time and gr8 tut, man
Great stuff as usual. Since hardly any websites are hardcoded these days, it would be killer to see this implemented with a cms such as sanity!
به به ، چه این نیز بگذرد ، بزرگی ❤
I used it once, and it worked well with normal tags in locales, and without passing the whole string in addition to the key. It only supported simple tags like strong etc. But it worked.
Hey man, thanks a lot. Helped me a lot. You are always best at explaining concepts.
thank you good summary of the capabilities of i18n
Amazing tutorial. Thank you!
Dyam, this is so good.
Amazing Video
Bon tutoriel, il y a tout ce qu'il faut
content de l'entendre!
Your vids are really great keep it up
in this tutorial string data is static, what about string data which is dynamic like data from a database?
Excited to learn something new 😁
thanks bro for amazing contents ✊🏻
Excellente vidéo mon ami
Regarding a change in keys that can break the UI - if your component and its helpers are padded with tests, then the commit that has these breaking changes should fail at some level, depending on the setup you have. For example a pre-commit script that runs all *.test files, a github action that blocks the PR if any test fails, etc.
For Ru,Urk and other slovenian languages, this words have more declinations, so use:
welcomeMessage_one, welcomeMessage_few, welcomeMessage_many, otherwise it may not work)
Also, we do translate names, for us there is a difference in Latin and Cyrillic)
thanks best tutorial👍
awesome!
Thank you so much for this video
you can use the trans component like this
with html tags or components
with variables and html tags or components
I am fluent in French too ! Awesome
How it good of the you already specific the data on which language is in convert what is that , example
Welcom - helo I am developer.
To - you also write his translate value so what he do.
I want something like if I give the value translation and give it the language it automatically converts to the languages not specified the convert language value
Hi cosden i hope you make a tutorial on how to use react helmet async. Been watching your tutorial about react. Thank you so much for bringing a good quality video
So I need to create translation for every key on bunch of different languages.?
Yup
Good video.
Regarding the library. This i18n is SO WRONG in the first place. The thing is that I should do so much manual work and the mistake possibility is so high. This is so frustrating.
As a developer, I want to have a running service within the project that will generate those JSONs without me. For me, it would be convenient to write full text in English inside t("Hello world!") and for all supported languages it will be like { fr: { "Hello world!": null } } With the highlighting when the text in the component is changing.
But no one seems to move in that direction.
You can. Set the createMissing config option or use i18next-scanner to extract and collect translations.
@@dominikrodler8010 Oh. Ok. Thank you very much :)
No need to create workarounds creating constants or whatever... It's possible to set up i18next so it gets translations types from translation files with a little configurations.
Thank You.
Would chatgpt help you set everyhting and you just double check?
Great video! My question is, should I use the useTranslation hook the same way using typescript?
yes
I wonder How will it be for the data fetched from database like blog posts? It is a lots of work manually.
So is this like Google translate? How accurate are the translations?
oh no, you add your own translations. So it's as accurate as your translator/yourself!
@cosdensolutions my bad. I commented before watching the vid. Lol. I'll try using this in my next project because with my previous one I used a custom made object for multiple languages and when I switched languages in the app it worked on my local host but after deploying the website on netlify apparently the switch doesn't work for some reason.
nice info! I also like the quality of the video. I am wondering what camera do you use? Is it green screen or just black curtain?
What if we want to separate different page translations too? Like I need an en.json for my home page and my settings page separatelly because there are tons of words in each page.
Can I do nested objects inside my json file like
en.json
{
"homePage":{
"welcomeText": "Hello!",
},
"settingsPage":{
"title":"Settings page"
}
}
And use it like this: { t("homePage.welcomeText") }??
Yeah! Check the docs there are also other ways to organize
@@cosdensolutions thanks! Will do
Bro showed almost nothing. Why in the world it's called complete tutorial? You haven't showed us how to change language, where to store it value how to get translation from API. like bro this video should be called "React i18next (Getting started)
I would like to get More TS + React projects from scratch with tailwind or MUI
Welldone bro. You're God's sent. I tried clicking that link for the project react, seems its broken. It keeps saying cosden refused to connect.
Thank you Bro! very useful, but do time-codes pls for the future video
thank u sir. But you haven't show how to change lang dynamically
is this the same for a next js project?
how to use this outside the component?????????????
Import i18n directly and do i18n.t()
What if we want to change URL name. Thats not everything…
What about SEO?
I noticed your tattoo - is it Farsi? It made me curious if you're Iranian. :))
You forgot adding a change button 😢
Your Video are Good. need a video for testing in react
Out of curiosity, what's your native language?
Romanian
@@cosdensolutions I would have never guessed! Your English sounds so good. I once had a project manager from Romania (Andrei), and you sound nothing like him. 😅
❤
CFBR
Dude, you should read the documentation better. Use Trans with components prop.
This is awesome! Thanks a lot!
❤