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 ) -
topmate.io/roadsidecoder
👤 Join the RoadsideCoder Community Discord -
/ discord
🟪 Follow me on Instagram else your code will give errors 🤓 -
/ roadsidecoder
🔗 React JS Interview Series -
• Frontend Machine Codin...
🔗 Complete Data Structures and Algorithms with JS Course - • Data Structures and Al...
🔗 JS Interview Series -
• Javascript Interview Q...
🔗 Cars24 Interview Experience -
• Frontend Interview Exp...
🔗 Unacademy Interview Experience -
• Frontend Interview Exp...
🔗 Tazorpay Interview Experience -
• Frontend Interview Exp...
🔗 MERN Stack Tutorial with Redux -
• MERN Stack Project Tut...
🔗 React Beginner's Project Tutorials -
• React JS Project Tutor...
-------------------------------------------------------------------------
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 -
/ @roadsidecoder
Special Thanks to our members -

Пікірлер: 93

  • @RoadsideCoder
    @RoadsideCoder5 ай бұрын

    🔴 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
    @shivankchaudhary61074 ай бұрын

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

  • @RoadsideCoder

    @RoadsideCoder

    4 ай бұрын

    Thanks a ton!

  • @y3h1_
    @y3h1_4 ай бұрын

    I love these tutorials. Clean and precise. Thank you

  • @alextruong1826
    @alextruong1826Ай бұрын

    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

    Ай бұрын

    Thanks man! Appreciated.

  • @joneugster4041
    @joneugster40412 ай бұрын

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

  • @olegpupkin6892
    @olegpupkin689218 күн бұрын

    Great!!! Thats what i was searching for!

  • @user-ho4mq5cl9y
    @user-ho4mq5cl9y3 ай бұрын

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

  • @luchonieves
    @luchonieves20 күн бұрын

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

  • @RoadsideCoder

    @RoadsideCoder

    20 күн бұрын

    Glad to hear it!

  • @OzzinhoTV
    @OzzinhoTV18 күн бұрын

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

  • @giorgikiladze1151
    @giorgikiladze11513 ай бұрын

    thank you, tutorial was helpful

  • @akashpatil9043
    @akashpatil90435 ай бұрын

    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

    5 ай бұрын

    Thanks man 💖

  • @_TamannaTahsin_A
    @_TamannaTahsin_A29 күн бұрын

    handsdown the best tutorial

  • @SemicolonGuy
    @SemicolonGuy5 ай бұрын

    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

    5 ай бұрын

    Yes, Right !

  • @mohammadabbas1623
    @mohammadabbas16235 ай бұрын

    U always come up with new content

  • @houriayaseen5487
    @houriayaseen54874 ай бұрын

    I have subscriped just cuz of the awesome explanation 🔥

  • @RoadsideCoder

    @RoadsideCoder

    4 ай бұрын

    Welcome aboard!

  • @Khedhar108
    @Khedhar1085 ай бұрын

    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 : ""

  • @ArshadKhan-vn9sn
    @ArshadKhan-vn9sn8 күн бұрын

    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?

  • @growwithdesign
    @growwithdesign3 ай бұрын

    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

    3 ай бұрын

    I have demonstrated RTL as well

  • @pupil_1
    @pupil_14 ай бұрын

    can you make one more video , like by using API instead of storing in forntend

  • @prashlovessamosa
    @prashlovessamosa5 ай бұрын

    Thanks for sharing.

  • @growwithdesign
    @growwithdesign3 ай бұрын

    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?

  • @kondraramesh
    @kondraramesh4 ай бұрын

    please do video on auto generate translation.json using npm package

  • @nishachapte7
    @nishachapte75 ай бұрын

    Amazing Thanks

  • @SINGH-jp6ju
    @SINGH-jp6ju3 ай бұрын

    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

    21 күн бұрын

    Use some translation tools which can automatically translate using service like Google translate. And all the best with translated locale.

  • @VinayakPhal

    @VinayakPhal

    21 күн бұрын

    Or you can give to any ai tool to translate it into another language.

  • @soundhirarajk9565
    @soundhirarajk95655 ай бұрын

    Thanks for sharing...

  • @nicatqarayev2348
    @nicatqarayev23485 ай бұрын

    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

    5 ай бұрын

    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?

  • @havefun5519
    @havefun55195 ай бұрын

    An informative tut video

  • @auslanderwichtig4060
    @auslanderwichtig40605 ай бұрын

    Best Chanel for frontend developers

  • @RoadsideCoder

    @RoadsideCoder

    5 ай бұрын

    💖

  • @abhaypatil5880
    @abhaypatil58805 ай бұрын

    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

  • @harratabdelmalek2062
    @harratabdelmalek20623 ай бұрын

    I love u man ❤

  • @asghani2143
    @asghani21434 ай бұрын

    I am getting error text content does not match server-rendered html. It happened when I tried to make separate files for different components

  • @HigherStudyAspirant
    @HigherStudyAspirant3 ай бұрын

    what if we get the translation from backend API, how to map in that case?

  • @nikhilgowda7511
    @nikhilgowda75115 ай бұрын

    Continue DSA series

  • @udittyagi9238
    @udittyagi92385 ай бұрын

    Superb video ❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤

  • @MrColins710
    @MrColins7104 ай бұрын

    The best lessons ever. Greetings from Ukraine.

  • @muhammadabozaid8319
    @muhammadabozaid83192 ай бұрын

    very good 😃

  • @naufalnasrullah6965
    @naufalnasrullah69655 ай бұрын

    nice video sir

  • @MohamedAymanpro
    @MohamedAymanproАй бұрын

    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.

  • @akashpatil9043
    @akashpatil90434 ай бұрын

    Bhai leken agar Data API se aaraha horo usko kaise change karenge ?🤔

  • @vkchauhangoldy1068
    @vkchauhangoldy1068Ай бұрын

    @RoadsideCoder on page refresh language is changing to en in local storage

  • @manojsatwase
    @manojsatwase5 ай бұрын

    make a video on polyfill useState hook From Scratch

  • @RoadsideCoder

    @RoadsideCoder

    5 ай бұрын

    Sure! I will!

  • @mostafizurrahmanchowdhury9018
    @mostafizurrahmanchowdhury90187 күн бұрын

    Is it work for also next.js?

  • @idontknowWhatTosay8
    @idontknowWhatTosay84 ай бұрын

    good tut but still didnt got how to translate words from api..

  • @rahil1575
    @rahil15755 ай бұрын

    I am using the usetranslation with in a usestate hook and it is not working . Can you suggest anything reg this

  • @RoadsideCoder

    @RoadsideCoder

    5 ай бұрын

    can you show me your code

  • @xtech5881
    @xtech58814 ай бұрын

    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

    4 ай бұрын

    you need to use async/await or RxJS

  • @asherayub101
    @asherayub101Ай бұрын

    Wait, do I have to rewrite all the translations content manually?

  • @RoadsideCoder

    @RoadsideCoder

    Ай бұрын

    Yes, all websites do

  • @anilkumarjena6793
    @anilkumarjena67935 ай бұрын

    When Change the language, How to change also time in our website..

  • @RoadsideCoder

    @RoadsideCoder

    5 ай бұрын

    Check this out - www.i18next.com/translation-function/formatting

  • @rishiraj2548
    @rishiraj25485 ай бұрын

    Good day greetings

  • @jacquelynecarmen
    @jacquelynecarmen4 ай бұрын

    so we need to write our whole app in multi lang?

  • @RoadsideCoder

    @RoadsideCoder

    4 ай бұрын

    yes

  • @akashpatil9043
    @akashpatil90435 ай бұрын

    Bhai leken iske state ko mamage kaise karke rakhe, agar page ko koi reload kare to ?

  • @RoadsideCoder

    @RoadsideCoder

    5 ай бұрын

    i18n will automatically persist the state by using localstorage

  • @akashpatil9043

    @akashpatil9043

    5 ай бұрын

    Thanx bhai sone me suhaga bhai 😁

  • @aashish_stanl
    @aashish_stanl3 ай бұрын

    how many years of experience do you have brother?

  • @RoadsideCoder

    @RoadsideCoder

    3 ай бұрын

    3

  • @Ankit-01-01
    @Ankit-01-015 ай бұрын

    Name the extension to auto import react components

  • @RoadsideCoder

    @RoadsideCoder

    5 ай бұрын

    ES7+ React/Redux/React-Native snippets

  • @Ankit-01-01

    @Ankit-01-01

    5 ай бұрын

    @@RoadsideCoder not working

  • @RoadsideCoder

    @RoadsideCoder

    5 ай бұрын

    @@Ankit-01-01 just search it in extensions tab of VS Code

  • @sauravraj6840
    @sauravraj68405 ай бұрын

    main ye already use kiya hoon apne project me😅

  • @RoadsideCoder

    @RoadsideCoder

    5 ай бұрын

    great!

  • @Ganesh-ld8ph
    @Ganesh-ld8ph5 ай бұрын

    2000 years latter 😂

  • @ShivamKumar-xv5ch
    @ShivamKumar-xv5ch5 ай бұрын

    company m yhi krna h talk about timing

  • @RoadsideCoder

    @RoadsideCoder

    5 ай бұрын

    Hahah great! Dont forget to share 🤓

  • @RinguRajaTemp
    @RinguRajaTemp2 ай бұрын

    Github repo link please

  • @RoadsideCoder

    @RoadsideCoder

    2 ай бұрын

    In the description

  • @rmrm-nk1ii
    @rmrm-nk1ii5 ай бұрын

    👏

  • @awais_ansarii
    @awais_ansarii5 ай бұрын

  • @rubynathanrubynathan2875
    @rubynathanrubynathan28755 ай бұрын

    Hi bro

  • @RoadsideCoder

    @RoadsideCoder

    5 ай бұрын

    Hey

  • @MathsWithSatyamPandey
    @MathsWithSatyamPandey5 ай бұрын

    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
    @sayamrahmanrobin29693 ай бұрын

    BEST

  • @kuldeepchouhan0143
    @kuldeepchouhan01435 ай бұрын

    LinkedIn id :

  • @RoadsideCoder

    @RoadsideCoder

    5 ай бұрын

    www.linkedin.com/in/piyush-eon/

  • @anilkumarjena6793
    @anilkumarjena67935 ай бұрын

    When Change the language, How to change also time in our website..

  • @SemicolonGuy

    @SemicolonGuy

    5 ай бұрын

    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

Келесі