ฝัง
- เผยแพร่เมื่อ 5 ส.ค. 2024
- Here is a crash course on react-i18next for React developers
ToC
00:00 - Intro
00:57 - Variation 1 (including the translations content in the React app)
04:22 - Variation 2 (loading translations content dynamically from an API)
Here is the code and article I used for reference:
1) github.com/thaddavis/react-i1...
2) github.com/thaddavis/react-i1...
3) dev.to/adrai/how-to-properly-...
Enjoy!
Made with love by COMMAND LABS
cmdlabs.io
#react #typescript #i18next #internationalization #worldwide #global #commandlabs #command
From now on "Hola papi!" is my "Hello World"
Fast, simple, clear. Give that man a cookie!
so simple to understand, its really smart to cut the middle part, this helps a lot, thanks!
GENIAL! Thats awesome man thanks for sharing both example. Really see the benefits of both scenario
you're a great tutor. thanks a lot brother. lots of love from india.
Thank you now I can add I18next in my skills
amazing tutorial!
Appreciate it. Great to meet you!
thank for this quick demo.
Are you a React engineer?
@@cmd_labs yes but I primarily work with react-native on the mobile.
@@osamagamal495 Cool!
@@osamagamal495
Are you liking React Native? (My general experience has been that maintaining a Native Mobile app is easier than maintaining a cross platform React Native app especially as the mobile SDKs/APIs change over time and features get more complicated for the app)
Do the pros of React Native outweigh the cons in your experience?
What would be some good topics to cover related to React Native?
Cheers!!! Pleasure to meet you.
@@cmd_labs Yes, maintaing a native app is way easier than cross platform one.
but with react native u get the privilege of writing once and apply it everywhere. so yeah the benefits of RN outweigh the disadvantage and it's totally worth it.
it would be nice if u can cover some of rare topics like maintaing consistent UI's on diff screen sizes, automating building and releasing (fastlane), memory issues with react native using some stuff like (Image API, ScrollView, etc.), push notifications, and some other advanced topics.
and btw thank u for sharing ur knowledge.
and it's my pleasure meeting u. :)
Hi, could you elaborate on why you have to import "i18n" in the index.tsx file to initialize i18n ? I feel it might be a basic explanation but can't find the logic in i18n doc or anywhere else so far
So my understanding of how many computer programs work is you usually have some entry point into the program you are running...
There are other types of programming where things execute in parallel and perhaps additional paradigms that I have yet to learn but as far as the content in this video goes there is one entry point into the "react app front end" program and that entry point is the `index.tsx` file
react-18next needs to be configured as per our needs at the entry point before the remaining components in the react app interact with it...
My understanding is the react-i18next object is a global object so that any react components can interact with by importing `import { useTranslation } from 'react-i18next';`
We configure the react-18next global object by telling it for example 1) What languages we want to support, 2) What namespaces we want to break all our translation content into, 3) what path on a static file server the translation files can be accessed at etc.
After configuring react-i18next at the root of the react app tree (aka the index.tsx file) all the child react components will have the needed configuration set up when they are rendered...
Hopefully that makes sense or that is at least my best explanation and current understanding...
Please correct me if anything I said was inaccurate
Greatly appreciate the engagement and pleasure to meet you @emmanuelbrun6002
@@cmd_labs thanks for answering and sorry for the response time, the entry point notion as well as react-i18next hook seem clear to me, the question was more why is it imported this way instead of, for example, a provider. It helped knowing that upon execution the program literally executes the code inside the file so that it is available whenever needed in the app. How exactly, still don't fully understand...
@emmanuelbrun6002 Np. Reply at the pace that is healthiest for you. If you could share an example of how you would organize the code then that would be great for us all to learn.
A Provider Component in React passes the state held in a Context object down to all children I think right? So a Provider wrapping the root of the React app tree seems like it could work for housing all the translations too.
I think under the hood react-i18next is using React Context...
github.com/i18next/react-i18next/blob/master/src/useTranslation.js
As long as you have a reference to where all the translations are stored you should be good either way as far as a working solution goes ie: You could access them (the translation strings) via a global (which is what I think is shown in this video) or you could access them through a reference passed down the React app tree via a root Provider Component.
If you have a link or reference of someone using this react-i18next library using a Provider technique please share. If it's overall cleaner code or has other benefits then I fully support it.
My guess is the i18next class is designed as a singleton ie: a global object
github.com/thaddavis/react-i18next-demo/blob/main/src/i18n.ts#L2C10-L2C26
I would need to dig deeper on the code to understand exactly what it looks like under the hood...
github.com/i18next/i18next/blob/master/src/i18next.js
github.com/i18next/react-i18next/blob/master/src/initReactI18next.js
I am sharing my technique of how I have used this react-i18next library in the video and I don't claim it is the only or best technique but it does the job in some cases...
Thanks for the video.
Important question -
Is there a way to make automatic translation to the text instead of doing it hard coding?
Because its a hard time to code it in different 40 languages or more!
Haha!
There is this product in the i18next ecosystem for solving this exact problem but it is not free according to my understanding...
locize.com/
Integrating your project with locize will cause your client application to retrieve the users preferred lang and if your client app does NOT have a translation for it, will send a request to locize API's to dynamically translate it into the user lang via machine learning I believe before rendering on screen. Locize will auto generate and update the translation files as users request them and you can download the generated translations from the Locize dashboard and add them to your client app to prevent future users from making the same request to Locize.
Another approach would be to loop over all the keys in the original translations file and generate the corresponding translation files for the languages your app supports.
Does that make sense?
Pleasure to meet you btw
Thanks 🙏🏻. By looping over the keys of the original tranlations file - Who you mean made those transitions, the Locize or who?
I mean I have only one page to translate, only 500 words
@@g-dd-were5763 You could use locize's API if you like but I think they use Google Translate or Amazon Translate if I'm not mistaken : )
@@cmd_labs Then I'm sorry thanks but maybe I didn't explain myself right before. Do I need the text translated to each language already done and ready?
@@g-dd-were5763 What's up! I'm happy to brainstorm.
So we've covered this question...
You could write a script to loop over each text snippet in your original translations file and call a translation API like Google translate for each key or text snippet and write it to a new file for each lang you are targeting
Or locize has a feature where...
locize will cause your client application to retrieve the users preferred lang as they use the app and if your client app does NOT have translations for it handy, will send a request to locize API's to dynamically translate it into the user's lang via machine learning I believe before rendering on screen. Locize will auto generate and update the translation files as users request them and you can download the generated translations from the Locize dashboard and add them to your client app to prevent future users from making the same request to Locize.
you look like Sergio Ramos
"no, i dont trust them but i must click this button" this is the best assertion ever heard 😜
thanks for the video. Could you please create a video or provide a sample code for react-i18next plurals. Thanks
Of course. I'll start tinkering with plurals later this week. I appreciate the request.
Can you tell me how can I translate the URL?
I'm guessing your mean translating the paths in the URL ie:
my-website.com/news for English visitors &
my-website.com/nouvelles for French visitors?
What react framework are you using? Next.js?
If I understand you question correctly, then the way for accomplishing this depends on the framework or combination of technologies you are using : )
@@cmd_labs react framework with typescript.
Which React framework?
@@cmd_labs react + typescript framework used.
@@cmd_labs yes bro.
So you still loaded all translations from the backend...?
Great to meet you @kirillzlobin7135
ToC
00:00 - Intro
00:57 - Variation 1 (including the translations content in the React app)
04:24 - Variation 2 (loading translations content from an API via an endpoint)
use in the dropdown to get more clarity after switching the languages
🤔
hola papi
😂
i shit myself, im sitting in library and your audio sounds like my headphones wasn't connected and i checked it for like 5 times and still was something off
it turned out it just audio with a lot of echo hahah
Yea I got a microphone since this video that reduces the ambient noice and echo in the audio a bit
Still need to soundproof my room : )
Attention to detail baby I love it!
This line after useEffect code shows error in node console
const lng = navigator.language
ReferenceError: navigator is not defined
What framework are you developing with?
the navigator global object tends to be present in browsers...
If your code is running outside of a browser it might not be there
Does that make sense?
@@cmd_labs next.js
Your code is working, but the error is appearing in the node console.
I apologize for not realizing that this video is intended for pure React. I thought react-i18next was for next.js 🤦.