React Multi Language App - i18next Tutorial with React JS

#Javascript #reactjstutorial #ReactJS

How to make a react app in any language using i18next or react-i18next by building a greetings app with 4 languages. This tutorial is beginner friendly

➡️ Book an Interview Preparation call with me ( 20% OFF for limited time ) -

👤 Join the RoadsideCoder Community Discord -

🟪 Follow me on Instagram else your code will give errors 🤓 -

🔗 React JS Interview Series -

🔗 JS Interview Series -

🔗 Cars24 Interview Experience -

🔗 Unacademy Interview Experience -

🔗 Tazorpay Interview Experience -

🔗 MERN Stack Tutorial with Redux -

🔗 React Beginner's Project Tutorials -

-------------------------------------------------------------------------

00:00 Intro
01:11 Setup a New React App
03:06 Greetings App UI
04:09 i18next React Setup
08:01 Adding Translations
08:44 useTranslations Hook
09:48 Language Selector Component
14:49 Missing Key fallback language
15:56 Nested Translation Key Handling
18:12 Handling Right to Left Languages
20:18 Interpolation
21:58 Trans Tag in react-i18n
25:23 Serving Translation files from server
28:19 Translation Namspaces

-------------------------------------------------------------------------

⭐ Support the channel -

Special Thanks to our members -

[shivankchaudhary]

One of the most thorough explanations based on actual project scenarios. Very helpful, buddy. Keep it up.

[alextruong]

I LOVE YOUR TUTORIALS!!! Straight to the points, clean, clear and updated (let alone you always have cherries on top)!!! Thanks a million!!!

[yh_]

I love these tutorials. Clean and precise. Thank you

[joneugster]

Thank you for this tutorial. I had 2-3 shots at setting up i18next correctly, but always failed until I found your video!

[anav.r.]

On all accounts, we says true, there is no other tutorial like this one in YouTube.

[Khedhar]

i18next configuation : "6:08"
same key for same content but in different languages : "8:00"
useTanslation hook with key : "9:07" translating object : "16:56"
changing data dynamically coming in json format from backend - interpolation {{channel}} : "20:22"

apply styling dynamic data Trans : "22:04"
different languages translation in different files : "25:25"

task : make translation json file for different pages : ""

[SemicolonGuy]

This is something which we all should do irrespective of project requirements. Even if we don’t need internationalisation in our app, we should define existing texts in this manner only.
It will benefit in scaling the project

[Mitalikhandelwal-yf]

quite descriptive and useful video ... keep it up💛

[devascript]

You are the best (AADMI) on the entire youtube 🧡

[olegpupkin]

Great!!! Thats what i was searching for!

[mostafamohammady]

great but when i have two style and and i want switch beween then what can i do in this case ?

[tomasburian]

There is something you overlooked, I can't believe nobody else noticed; when using language detector, browsers don't return language in two-letter format, they return something like en-US, so you can't have your languages' names just with two letters, you gotta use the full identification code.

[alchemist]

what if there is maping it does not work on maping

[luchonieves]

What a great video brother, I understood everything thanks to you! Keep it up 😎

[OzzinhoTV]

My maaaan! You just won a new suscriber!!!! thx

[nicatqarayev]

So how do they translate the data coming from the API? Most of the time, words like .../en .../fr .../hi are added to the end of the url. Is this because these words are added to the API endpoints? In other words, when a request is made to /en, English data is received, and when a request is made to /fr, French data is received.

[SINGH-jpju]

So, if I have a large website, I will have to put in a lot of effort to translate each line of content into a different language. So, can you suggest any other approach that is simple and converts my full website language into the required language?

[akashpatil]

Bhai be lated happy birthday, or mai yahi dekhna cahata tha apne product me use karne ke leye, dashboard ke leye foreign clients ke leye 😊. Thanx bro

[houriayaseen]

I have subscriped just cuz of the awesome explanation 🔥

[jaroslavfilo]

Thank you very much. You helped me a LOT!