Translate Your React App With i18next
ฝัง
- เผยแพร่เมื่อ 5 ส.ค. 2024
- Translating your React Apps into different languages is much easier than it might seem. So let's take a look at how to use i18next to serve your react app in your users language automatically.
I hope this video can help you. If it does then please consider subscribing and giving me some feedback.
Have a great day!
My GitHub: GitHub.com/N-Ziermann
My Website: n-ziermann.github.io?en
Timestamps:
00:00 What are we translating
00:22 Setting up i18next
03:00 Integrating i18next into React
03:35 Adding translations (German & English)
04:45 Putting Variables in our Translations
Congratulations on the video, Niklas. Quick content, but very good. I was having trouble with this process, but your video will help me a lot. Thanks!
You're welcome, I'm glad I could help :)
Thank you, solved my problem
You're welcome :)
Awesome ! 👍
Thank you :)
Great video 😊
Thank you. I'm glad you liked it :)
Cool video thanks
You're welcome :)
good post!
Thank you :)
Excatly what i searched for, danke dir! Wie viele Jahre arbeitest du schon mit React?
Freut mich, dass ich helfen konnte. Ich nutze React privat seit etwa 5 Jahren und professionel seit knapp 3 Jahren :)
@@NiklasZiermann was meinst du ist am wichtigsten als react Dev zu können abgesehen von den Grundlagen? Zb. Redux ?
Spezifische Libraries sind denke ich nicht das wichtigste. Wenn man die Grundlagen wirklich gut versteht, dann versteht man Sachen wie State-Manager auch schnell. Ich würde einfach empfehlen wirklich zu versuchen zu verstehen wie useState, useEffect, useMemo, useCallback und useContext funktionieren. Wenn du das verstehst (und auch verstehst, warum man vielleicht statt useContext etwas wie Redux verwendet), dann würde ich sagen du hast das wichtigste Wissen.
Und es wäre natürlich gut React auch vernünftig mit TypeScript verwenden zu können :)
@@NiklasZiermann gibt es Tools oder Webseiten die dir besonders geholfen haben oder einfach nur direkt los programmieren und die hooks versuchen mit einzubeziehen um die Lernkurve zu erreichen?
Sobald du weißt wofür useState, useEffect und useContext verwendet werden solltest du, meiner Meinung nach, einfach loslegen. Am besten du benutzt noch einen linter, der dich vor häufigen fehlern warnt und dann sollte der Rest durch ausprobieren und in Probleme laufen funktionieren. So wars zumindest bei mir. Ansonsten sind TH-cam Kanäle wie meiner, Theo oder Jack Herrington auch sehr hilfreich :)
what if you want to translate your whole website.
I have a full website I want to translate in multiple languages not just simple text.
do you have a workaround ?
You could still use the same pattern as shown in the video. Just more key value pairs and maybe multiple translation files to organize things a bit further.
@@NiklasZiermannwe can't translate api data .how to fix it .
I'm afraid I dont understand what you mean
@@NiklasZiermann when we fetching to data from api ,how will you use translation?
If you're fetching dynamic data then you'll either need to send translation keys from the backend or you'll need to create your own text based on the response from the backend. You cant use this technique to translate arbitrary text into a different language
what if I have to fetch data from backend
The docs contain some info about fetching translations after the initial load:
www.i18next.com/how-to/add-or-load-translations
You are store that value as Json after that you displays. But i want convert the words dynamically what ever user inputs English to Chinese
Then you probably need to integrate an external translation api