React Multi Language App - i18next Tutorial with React JS

  Рет қаралды 46,013

RoadsideCoder

RoadsideCoder

Күн бұрын

Пікірлер: 110
@RoadsideCoder
@RoadsideCoder 10 ай бұрын
🔴 Get my Complete Frontend Interview Prep course - roadsidecoder.com/course-details 🧑‍💻 Source Code - github.com/piyush-eon/i18next-tutorial-yt ➡ Book an Interview Preparation call with me ( 20% OFF for limited time ) - topmate.io/roadsidecoder
@shivankchaudhary6107
@shivankchaudhary6107 9 ай бұрын
One of the most thorough explanations based on actual project scenarios. Very helpful, buddy. Keep it up.
@RoadsideCoder
@RoadsideCoder 9 ай бұрын
Thanks a ton!
@alextruong1826
@alextruong1826 6 ай бұрын
I LOVE YOUR TUTORIALS!!! Straight to the points, clean, clear and updated (let alone you always have cherries on top)!!! Thanks a million!!!
@RoadsideCoder
@RoadsideCoder 6 ай бұрын
Thanks man! Appreciated.
@joneugster4041
@joneugster4041 7 ай бұрын
Thank you for this tutorial. I had 2-3 shots at setting up i18next correctly, but always failed until I found your video!
@Khedhar108
@Khedhar108 10 ай бұрын
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 : ""
@y3h1_
@y3h1_ 8 ай бұрын
I love these tutorials. Clean and precise. Thank you
@SemicolonGuy
@SemicolonGuy 10 ай бұрын
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
@RoadsideCoder
@RoadsideCoder 10 ай бұрын
Yes, Right !
@anav.r.2532
@anav.r.2532 2 ай бұрын
On all accounts, we says true, there is no other tutorial like this one in KZbin.
@Mitalikhandelwal-y1f
@Mitalikhandelwal-y1f 8 ай бұрын
quite descriptive and useful video ... keep it up💛
@olegpupkin6892
@olegpupkin6892 5 ай бұрын
Great!!! Thats what i was searching for!
@luchonieves
@luchonieves 5 ай бұрын
What a great video brother, I understood everything thanks to you! Keep it up 😎
@RoadsideCoder
@RoadsideCoder 5 ай бұрын
Glad to hear it!
@akashpatil9043
@akashpatil9043 10 ай бұрын
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
@RoadsideCoder
@RoadsideCoder 10 ай бұрын
Thanks man 💖
@SINGH-jp6ju
@SINGH-jp6ju 7 ай бұрын
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?
@VinayakPhal
@VinayakPhal 5 ай бұрын
Use some translation tools which can automatically translate using service like Google translate. And all the best with translated locale.
@VinayakPhal
@VinayakPhal 5 ай бұрын
Or you can give to any ai tool to translate it into another language.
@devascript
@devascript Ай бұрын
You are the best (AADMI) on the entire youtube 🧡
@OzzinhoTV
@OzzinhoTV 5 ай бұрын
My maaaan! You just won a new suscriber!!!! thx
@_TamannaTahsin_A
@_TamannaTahsin_A 5 ай бұрын
handsdown the best tutorial
@nicatqarayev2348
@nicatqarayev2348 10 ай бұрын
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.
@nicatqarayev2348
@nicatqarayev2348 10 ай бұрын
If it is done as I think, data should be added in 3 languages in the dashboard, right? Can you explain how these things are done in real life?
@serhatpeker6431
@serhatpeker6431 2 ай бұрын
this is a masterpiece! 💥
@growwithdesign
@growwithdesign 8 ай бұрын
Also, for your future videos, for arabic - it's not just the language, but the layout also changes RTL. Please demonstrate how can we also change the layout for RTL.
@RoadsideCoder
@RoadsideCoder 8 ай бұрын
I have demonstrated RTL as well
@tomasburian6550
@tomasburian6550 2 ай бұрын
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.
@ArshadKhan-vn9sn
@ArshadKhan-vn9sn 4 ай бұрын
Very nice but for large content website we need to add all translation in our react js do we have any library so that atleast 60-70 percent of translation it can handle and for some content which is not getting translated we can translate it?
@mostafamohammady8809
@mostafamohammady8809 9 күн бұрын
great but when i have two style and and i want switch beween then what can i do in this case ?
@jaroslavfilo4420
@jaroslavfilo4420 4 ай бұрын
Thank you very much. You helped me a LOT!
@RoadsideCoder
@RoadsideCoder 4 ай бұрын
You are welcome!
@mohammadabbas1623
@mohammadabbas1623 10 ай бұрын
U always come up with new content
@houriayaseen5487
@houriayaseen5487 9 ай бұрын
I have subscriped just cuz of the awesome explanation 🔥
@RoadsideCoder
@RoadsideCoder 9 ай бұрын
Welcome aboard!
@growwithdesign
@growwithdesign 8 ай бұрын
Hello. Thankyou for making this tutorial. I have a question. My components have api file where I am storing information for all my grid child elements. Now, how do I assign language translations to them inside my api file?
@Jacky-rc6mu
@Jacky-rc6mu 3 ай бұрын
best tutorial ever watch
@giorgikiladze1151
@giorgikiladze1151 8 ай бұрын
thank you, tutorial was helpful
@auslanderwichtig4060
@auslanderwichtig4060 10 ай бұрын
Best Chanel for frontend developers
@RoadsideCoder
@RoadsideCoder 10 ай бұрын
💖
@wannapaing1997
@wannapaing1997 3 ай бұрын
thank a lot, guy, it will helpful a lot.
@alchemist4216
@alchemist4216 8 күн бұрын
what if there is maping it does not work on maping
@HigherStudyAspirant
@HigherStudyAspirant 8 ай бұрын
what if we get the translation from backend API, how to map in that case?
@ajayks3815
@ajayks3815 3 ай бұрын
bro using this we can only translate static texts?
@pupil_1
@pupil_1 9 ай бұрын
can you make one more video , like by using API instead of storing in forntend
@asghani2143
@asghani2143 9 ай бұрын
I am getting error text content does not match server-rendered html. It happened when I tried to make separate files for different components
@MohamedAymanpro
@MohamedAymanpro 5 ай бұрын
Peace be upon you. I am a user of the i18next website on a site like this, and I am on the page work and i'm creating data in a js spicial file , not a json file, and the data viewer is on the page work with map function. I want to translate the file containing the data. I don't know how to connect it, and there's nothing in it that explains what I mean by it. All that is available is that it translates a sentence or two, not the entire file into a single file. please help.
@kondraramesh
@kondraramesh 8 ай бұрын
please do video on auto generate translation.json using npm package
@MrColins710
@MrColins710 9 ай бұрын
The best lessons ever. Greetings from Ukraine.
@abhaypatil5880
@abhaypatil5880 10 ай бұрын
I am using the same interpolation technique, to chnage the value entered in the Input to be transalted to french but it's not converiting if someone can help I can share my code
@xtech5881
@xtech5881 9 ай бұрын
This is static data..what about real world scenario like..i have multiple components..booking page..list page and all..then how can we do..this to all component..
@manekedark
@manekedark 9 ай бұрын
you need to use async/await or RxJS
@dailydoseof.ishowspeed
@dailydoseof.ishowspeed 6 ай бұрын
Wait, do I have to rewrite all the translations content manually?
@RoadsideCoder
@RoadsideCoder 6 ай бұрын
Yes, all websites do
@nishachapte7
@nishachapte7 10 ай бұрын
Amazing Thanks
@mostafizurrahmanchowdhury9018
@mostafizurrahmanchowdhury9018 4 ай бұрын
Is it work for also next.js?
@prashlovessamosa
@prashlovessamosa 10 ай бұрын
Thanks for sharing.
@rahil1575
@rahil1575 10 ай бұрын
I am using the usetranslation with in a usestate hook and it is not working . Can you suggest anything reg this
@RoadsideCoder
@RoadsideCoder 10 ай бұрын
can you show me your code
@_Elfaro
@_Elfaro 3 ай бұрын
So i need to translate every sentence and word in my app even if it's freaking big?
@RoadsideCoder
@RoadsideCoder 3 ай бұрын
that's how every app does it
@akashpatil9043
@akashpatil9043 9 ай бұрын
Bhai leken agar Data API se aaraha horo usko kaise change karenge ?🤔
@nikhilgowda7511
@nikhilgowda7511 10 ай бұрын
Continue DSA series
@havefun5519
@havefun5519 10 ай бұрын
An informative tut video
@idontknowWhatTosay8
@idontknowWhatTosay8 8 ай бұрын
good tut but still didnt got how to translate words from api..
@udittyagi9238
@udittyagi9238 10 ай бұрын
Superb video ❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤
@soundhirarajk9565
@soundhirarajk9565 10 ай бұрын
Thanks for sharing...
@muhammadabozaid8319
@muhammadabozaid8319 7 ай бұрын
very good 😃
@harratabdelmalek2062
@harratabdelmalek2062 8 ай бұрын
I love u man ❤
@naufalnasrullah6965
@naufalnasrullah6965 10 ай бұрын
nice video sir
@KartikKatwal
@KartikKatwal 3 ай бұрын
not for large websites
@anilkumarjena6793
@anilkumarjena6793 10 ай бұрын
When Change the language, How to change also time in our website..
@RoadsideCoder
@RoadsideCoder 10 ай бұрын
Check this out - www.i18next.com/translation-function/formatting
@rajeevnathverma7877
@rajeevnathverma7877 Ай бұрын
How they read data from public folder for en, fr and hi language without change any settings?
@jacquelynecarmen
@jacquelynecarmen 9 ай бұрын
so we need to write our whole app in multi lang?
@RoadsideCoder
@RoadsideCoder 9 ай бұрын
yes
@manojsatwase
@manojsatwase 10 ай бұрын
make a video on polyfill useState hook From Scratch
@RoadsideCoder
@RoadsideCoder 10 ай бұрын
Sure! I will!
@akashpatil9043
@akashpatil9043 10 ай бұрын
Bhai leken iske state ko mamage kaise karke rakhe, agar page ko koi reload kare to ?
@RoadsideCoder
@RoadsideCoder 10 ай бұрын
i18n will automatically persist the state by using localstorage
@akashpatil9043
@akashpatil9043 10 ай бұрын
Thanx bhai sone me suhaga bhai 😁
@vkchauhangoldy1068
@vkchauhangoldy1068 6 ай бұрын
@RoadsideCoder on page refresh language is changing to en in local storage
@aashish_stanl
@aashish_stanl 8 ай бұрын
how many years of experience do you have brother?
@RoadsideCoder
@RoadsideCoder 8 ай бұрын
3
@pranupranav5563
@pranupranav5563 3 ай бұрын
Translator❌ Hashmap✅
@Ganesh-ld8ph
@Ganesh-ld8ph 10 ай бұрын
2000 years latter 😂
@Ankit-01-01
@Ankit-01-01 10 ай бұрын
Name the extension to auto import react components
@RoadsideCoder
@RoadsideCoder 10 ай бұрын
ES7+ React/Redux/React-Native snippets
@Ankit-01-01
@Ankit-01-01 10 ай бұрын
@@RoadsideCoder not working
@RoadsideCoder
@RoadsideCoder 10 ай бұрын
@@Ankit-01-01 just search it in extensions tab of VS Code
@rishiraj2548
@rishiraj2548 10 ай бұрын
Good day greetings
@RinguRajaTemp
@RinguRajaTemp 7 ай бұрын
Github repo link please
@RoadsideCoder
@RoadsideCoder 7 ай бұрын
In the description
@rmrm-nk1ii
@rmrm-nk1ii 10 ай бұрын
👏
@ShivamKumar-xv5ch
@ShivamKumar-xv5ch 10 ай бұрын
company m yhi krna h talk about timing
@RoadsideCoder
@RoadsideCoder 10 ай бұрын
Hahah great! Dont forget to share 🤓
@sauravraj6840
@sauravraj6840 10 ай бұрын
main ye already use kiya hoon apne project me😅
@RoadsideCoder
@RoadsideCoder 10 ай бұрын
great!
@awais_ansarii
@awais_ansarii 10 ай бұрын
@rubynathanrubynathan2875
@rubynathanrubynathan2875 10 ай бұрын
Hi bro
@RoadsideCoder
@RoadsideCoder 10 ай бұрын
Hey
@powercircuitacademy
@powercircuitacademy 10 ай бұрын
Hello bhaiya I create a video for top 10 best youtube channel for web development. And also mention your Channel name. And upload on youtube and Instagram. Because you are best educator for beginners. ❤ thanks bhaiya 🙏 . Programming with satyam - my channel name
@sayamrahmanrobin2969
@sayamrahmanrobin2969 7 ай бұрын
BEST
@kuldeepchouhan0143
@kuldeepchouhan0143 10 ай бұрын
LinkedIn id :
@RoadsideCoder
@RoadsideCoder 10 ай бұрын
www.linkedin.com/in/piyush-eon/
@anilkumarjena6793
@anilkumarjena6793 10 ай бұрын
When Change the language, How to change also time in our website..
@SemicolonGuy
@SemicolonGuy 10 ай бұрын
Generally, We don’t do that in our application. We take the time from browsers which takes it from the Operating system. Timezone should be as per users local time and hence we avoid changing it
Will A Basketball Boat Hold My Weight?
00:30
MrBeast
Рет қаралды 126 МЛН
Хасанның өзі эфирге шықты! “Қылмыстық топқа қатысым жоқ” дейді. Талғарда не болды? Халық сене ме?
09:25
Демократиялы Қазақстан / Демократический Казахстан
Рет қаралды 357 М.
MY HEIGHT vs MrBEAST CREW 🙈📏
00:22
Celine Dept
Рет қаралды 92 МЛН
😜 #aminkavitaminka #aminokka #аминкавитаминка
00:14
Аминка Витаминка
Рет қаралды 2,3 МЛН
Redux Toolkit - Complete Tutorial ( with Project ) 🔥🔥
48:30
RoadsideCoder
Рет қаралды 15 М.
React Multi Language App - I18next Tutorial
18:20
Monsterlessons Academy
Рет қаралды 7 М.
I built the same app 10 times // Which JS Framework is best?
21:58
Fireship
Рет қаралды 2,6 МЛН
React-Intl | Internationalization Basics in React
28:49
Coding With Chaim
Рет қаралды 21 М.
React Multi Language App - i18next Tutorial
38:35
Classsed
Рет қаралды 124 М.
All useEffect Mistakes Every Junior React Developer Makes
22:23
Dockerize and Deploy React JS App in 15 Minutes 🔥🔥
17:56
RoadsideCoder
Рет қаралды 56 М.
Will A Basketball Boat Hold My Weight?
00:30
MrBeast
Рет қаралды 126 МЛН