React Multi Language App - i18next Tutorial with React JS

so here I've opened Coca-Cola's website and I'll show you on feature so if we click on this glob icon over here you can see it's asking us where are we located so let's say if I selected India did you notice something the website's language turned to hindii and same is going to happen if I select any other geography let's check out this nesas website here as well they have this globe like icon if I click on it it's asking us where are we located let's select Korea and not now the website's language has been converted to Korean entirely but the UI Remains the Same so how are these websites doing this what's the technology behind this that's what we're going to learn in today's video and I will show you step by-step process on how you can Implement multiple languages or what we call is internationalization in your own app but before we do that hit that subscribe button right now if you want to see more such videos like this because you won't find content like this anywhere else on YouTube so I've opened vs code over here here and I'm quickly going to initialize a new react app so as you can see I've created a folder called i18 Next tutorial and i18 next is the library that we're going to use for doing this internationalization so inside of this folder I'm going to run a command npm create wheat at latest now you might be wondering what is this wheat so this weed is exactly like create react app but is much faster so it's asking us our project name so I'm just going to enter dot because I just I just want to create our project in this directory and this directory already has the name i18 next tutorial so I'm going to press enter and then it's going to ask me what library or framework do I prefer so I prefer react and it's asking if you want to use typescript or JavaScript I'm going to go for JavaScript and there we go our app has been successfully initialized it was that fast and now simply what we have to do we have to run npm install so that this will install all of our dependencies that are inside of this package.json 2,000 years later and there we go all of the dependencies have been installed let's try to run this by typing npm run Dev and you see it was that fast it instantly started our development server and let's press control and click on this link and it's going to open this link in our browser that is our new react app initialized now in this video we're going to create a very simple greetings app which will give us greetings in four different languages let's see let's go on and set up the basic structure for our app inside of SRC we have this app.jsx where all of our code lies so what I'm going to do I'm going to Simply get rid of it and I'm just going to say hello world I'm just going to get rid of all of these Imports over here this state use State that's it let's see yep hello world okay I'm going to get rid of all of these Styles as well right here inside of our app.css okay now we have a very basic react app initialized over here so inside of our app.css I'm just simply going to have a div I'm going to give this a class name of container and inside of this I'm going to have a H1 tag which says hello welcome in English and similarly we're going to have four different languages which tells us hello welcome and gives us some description as well and we're going to do that by using I 18 next but let's simply just uh add some Styles over here first so I'm going to go to app.css and I'm going to add some CSS and let me explain so all we're doing over here is reping some font family some color scheme of Light Dark some color to our texts some background color of this dark color margin zero so that we are resetting all of the margin that are in our app we're providing this display Flex some padding of 20 pixels around it as you can see see some width and some height okay and inside this container I'm providing a display flex and flex Direction column so that everything comes from top to bottom all right so very basic Styles now let's go on and see how we can implement the internationalization or IAT next inside of our application but before that if you're preparing for your frontend interview and you would like me to help you in your frontend interview preparation just click the link in the description down below and book a one-on-one call with me we're going to discuss tips tricks I'm going to give you a lot of resources I'm going to design a proper road map tailored to your situation which is going to help you out a lot in your front-end interview preparation so click the link in the description down below and book a one-onone call with me so I'm going to quickly open my browser and search i18 next react let's go to the documentation and the reason why I'm showing you this documentation over here is because you as a developer should also know how to effectively read the documentations to learn some new technologies so okay these are the introduction and stuff we don't care about about them let's see where's the installation so okay let's go to get started so I'm going to quickly copy all of this and I'm going to come over here create a new terminal and actually I need one more uh Library over here which is called I8 next browser language detector which will help us to change the language of our app so I'm going to paste that one over here as well and press enter okay so they've been installed let's go on and initi ize the instance of I8 next in our app so inside of the source folder I'm going to create a new file called I8 and. JS and okay let's see what we're going to do over here first of all we're going to bring in the instance of i18 next so i18n and we're going to import it first of all from I8 next so import i8n from I8 next and I'm going to say dot use language detector and we have to import this as well don't worry I'm going to explain every single one of these one by one so import language detector from i8n browser language detector so this language detector is basically a middle bear which will help us to detect the current language and change it accordingly now this will be used for initializing an I8 n instance but how does i18 know that it's in a react app so we're going to provide it the react instance of I next to it so I'm going to say dot use again and I'm going to provide it something called init react i18 next and it has been Auto imported over here cool so this is how you initialize a new i18n instance now all we have to do is we have to provide it some parameter so I'm going to say dot in it and inside of it it takes an object now first of all since this is our development environment so I'm going to say debug true what this will do is this will basically give us all of the errors that are in our app in our console after that I'm going to put the default language as English so en n for English hi for Hindi and so on and then there's going to be another object called resource or resources now inside of this resources object is where we're actually going to keep all of our translations so let's say for English I'm going to say n and put and create an object for French I'm going to say FR FR and create an object for Hindi I'm going to say HR and create an object so let's get started with these three languages these three languages are written from left to right so we're going to understand first about these languages and then later in this video we're going to understand the languages which are written from right to left as well such as Arabic so first of all I'm going to quickly go on and add some translation to this first of all for greeting in English I'll say hello welcome so inside this translation object I'm going to add this greetings key for French here's the translation and for Hindi there it is so if you notice something we have to provide the exact same key that we providing to the other languages so the key has to be called exactly the same to be working with I8 next and I will also show you what happens if you don't keep these keys with the same name so this has been initialized what I'm going to Simply do now is I'm going to go to my app.jsx and here I'm going to import our IAT next instance and actually not here I'm going to import it over here in main. jsx so I'll just say import / i8n DJs and now let's go to our app.js file and here let's start to add our translations So currently our language is set to English right over here you can see so instead of this hello welcome what I have to do if I want to display these languages I have to import a hook called use translation and this used translation hook comes from react iot next and this gives us a function called T which stands for translate or translation whatever so this T we're going to use this T over here under these curly braces I'm going to say t and inside of these brackets now this will take the key where our translation exists inside of our JavaScript object which is this object over here so our key is called greeting so I'm going to Simply go over here and say greeting let's save this and check it out so yep you see nothing changed but what if what if I instead of I I say hi there we go our language has been changed to Hindi what if I say F FR it has been changed to French great let's put it as English and but this is not the right way to change the languages right so what we can simply do is we can add a switch or something like we saw in the Coca-Cola or uh Nescafe website so let's go go to our app.jsx and this switch will use the dependency that we later installed that language detector dependency that we had installed so cool let's create a new folder called components components and inser of it I'm going to create a new file which is called language selector do JS and inside of it let's initialize a new language selector or a new component and first of all here I'm going to create a new object called languages which contains two things a code and the name of the language so the code is I and languages English f for French hi for Hindi and this we will use to render the buttons or the switches for changing our languages so inside of over here first of all I'm going to give this div a class name of BTN container and surfit I'm going to render all of these languages so languages Dot map I'll say return button inside of it I'll say l n g okay I I need to take this inside of this map first LNG LNG do lank and this button is going to have a key since we're using map over here so let's keep the key as LNG do code we're going to have a onclick function which I'm going to keep as change language and obviously this function doesn't exist yet so I'll just create an empty function for now okay so cool let's take this language selector from here and import it inside of our app so okay let's uh import it oh my bad I need to call it uh language selector jsx let's save this now and cool we have our three buttons let's style them a little bit bit so inside of app. CSS I'm going to quickly bring in the styles to not waste your time by going through each and every Styles because it's more about the logic and how you can implement the i18 next in this tutorial so let me just explain this quickly so for our button container I'm going to give display flex and gap of 10 pixels so that we have an appropriate gap between them and then we're going to give some button style like border radius some border some padding and some font size font weight font family some background color to our buttons cursor pointer so that our pointer is like this when we hover on them and some transition for our border color so when we hover on them you can see it's this beautiful transition over here that is what we have given right over here when we hover on it then after that when the button is currently selected I'm going to change the background color so okay this is not actually implemented yet so let's go on and implement it first so I'm going to go back to our language selector and let's see how we can add the logic of changing our language in I8 next so I'm going to use use our same hook use translation hook also by the way you can find all of the code that I'm writing over here by clicking in the link in the description down below which will take you straight to my GitHub repository so inside this Ed translation hook which I have imported over here going to remove that we're not going to need that so const this time we're not going to use the T function we're going to use something called i8n over here and this I8 n will decide so I'll say class name if LNG do code is equals to i18n do language that is the current language this will give us the currently selected language if that's the case then what I'm going to Simply do I'm going to say selected class name else no class name so okay let's see I think English must be selected currently so yeah you can see and now for this change language how do we change our language first of all we need to provide this language with the code so our code is LNG do codee I'm going to simp simply provide it over here and inside of it I'm going to receive that code LNG and from the same I8 oops I think I created it outside of our component so it should be over here so yeah over here I'll just simply say i8n the same variable and I'll say dot change language and I'll provide this code to it now that is all we needed to do let's see let's see in our browser if I click on French yep h awesome so you can see how we're changing the language over here let me show you one more thing if you right click and go to inspect let's go to storage and click on local storage you can see it also stores the current language in the local storage so yep see if I refresh this you see it Still Remains French awesome okay now let's go on and see the case when one of the key is missing from our translation so let's say if uh this key over here is completely missing now what's going to happen so if I go on and let me just open our console as well and click on French did you notice it just gave back our key over here just the greeting key that was supposed to identify this uh translation but we don't want that what I want is when this key is missing I want it to display the fallback language let's say for English if the French language is missing it should display the the English language right so okay let's go on and do that so instead of this language I'm going to use something called fallback LNG fallback language now if I go back to our browser and click on French notice it still displays us hello welcome for Hindi it's fine but for French it shows us the fallback language so this is how you can Implement some error check if uh the language is not present so let just uncommented now Okay cool so now let's consider our real world scenario because in a real world there's not going to be one or two keys right there's going to be a lot of keys uh plus there's going to be keys inside of other objects as well so let's say we have this grating keys and we have another key called description and inside of it we have two lines of description and similarly we're going to have this for other languages as well like French and Hindi okay so let's see how we can access these keys so I'm going to go to our app.jsx file so until now I was using this T function and I was calling it directly inside of our GSX tags but now I'll show you what we can do is I'll just I can just take it over here and take the key inside of it for which we want the translation from so let's say if I want this description right so I'll just put the description over here and I'll say const description equals description let's try to console log this and see we can see over here key description returned an object instead of a string H okay so this is generally expecting us to give us uh give a string but as you can see over here this is an object so this is not compatible so what solution can we have over here we can just simply before resources we can add another key called return objects objects two true and now this will successfully accept the objects as well so you can see in our console log we're getting both of these translations awesome so now simply over here in start of this description I'm going to destructure it and I'm going to take line one and line two and I can simply render them below this so inside of a P tag I'm going to render a line one and inside of a span tag tag I'm going to render the line two let's get rid of this let's see if this works okay I'm going to take French all right Hindi okay that is working absolutely fine okay so now not all of the languages work absolutely the same right not all the languages are written from left to right some of the languages like Arabic are written from right to left as well so how do we handle this use case so let's go to our I8 n file and I'm going to add translation for Arabic as well so right below Hindi yeah right over here I'm going to add the translation for Arabic language and inside of our language selector I'm going to add another object for Arabic code AR and language Arabic now all we have to do over here whenever we are changing our language I'm going to put a use effect over here so inside of this uh dependency array as you already know whenever dependency array changes this call back will be fired so I'm putting i8n and i8n do language so whenever this changes this is going to be fired off and what are we going to write inside of it I'm going to say document do body DOD which is the direction of our website which is by default left to right that is LTR but we're going to put it RTL so di equals i8n dodir this comes natively from i8n that is it automatically detects if the language supports right to left alignment then it's going to automatically change that so let me show you if I just console log this over here and let me just go to the browser and notice whenever I select Arabic you see our web alignment M was left to right and now it got changed from right to left and over here we can see RTL when we click on Hindi or French yep you see we get LTR so this is how you can handle the RTL languages or right to left alignment languages but I'm sure many of you must have a question inside of your head that um let's say I've written this you're watching roadside coder YouTube channel but what if this text had to be dynamic what if this text was coming from some server or some back end right I would have to change all of these files in fact there is no way to predict to change all of these files right how can I change English French Hindi and all these files at once either we take the complete Json from the back end but that is not very practical right so I have to make sure that this is dynamic throughout all of the languages right over here over here as well so okay what we can do is we can use something called interpolation in I next so inside of our transl wherever I've written this road side coder I'm going to replace it with Channel or whatever variable that you might want to call it so over here over [Music] here here and here all right so now we can replace this with something Dynamic let's see how inside of our app.jsx where we have written this T and description it takes a second parameter which is the options object so inside of this we can give bunch of different things like variable which we need at this moment so I can just say Channel and I'm going to say road side coder and nothing changes but what if I write over here XYZ notice yep it got changed in every single language see this is how easy it is to make your app an international app or implement the internationalization inside of your app okay now I'm thinking of another use case over here let's see we have all of this translation but what if I want this channel just this channel to be bold or let's say any other style like it italic or whatever right so can I just enter a b tag over here will that work let's see let's go to our app oh no it didn't work it showed us this B tag right over here and I guess this is because to prevent us from Cross Sid scripting attack or xss attacks right so what's the solution for this so I8 next provides us with a native jsx tag which is trans so instead of this line I'm going to put a trans tag over here which stands from translate I guess so it obviously comes from react I8 next now inside of it it takes a few things first of all it will take a key so so it's going to be i8n sorry i8n key and inside of this you can either provide description do line one something like that and it's going to be in quotes or you can also do this i8n key you could just use this directly and instead of providing this variable over here I can take that variable and I can have a values prop values yeah and I can just provide that inside of it so Channel roadside coder and I guess this should work let's see okay this is working as you can see this B tag still not gone but we haven't configured it properly yet so I'm going to go back to this and uh let's get rid of this and instead of this B tag what I'll do let me just select all of these by pressing controll D all of these are selected now I can put a tag with a number or whatever that you want to put over here let's say one and again closing tag of one as well you can see all of them have the same tag right it can be 1 2 3 and I'll show you why we have to put it because over here we have something called components now we can map a component with respect to that number so we we provided it one right so for one we are saying I want B tag whenever you see one tag over there just replace it with B tag so like this now if we go back to our app you can see road side coder is bold now it's considering this as a separate this as a separate and this as a separate tag so all we can do is we can drop this trans inside of a span tag now if we go go back yep you see in all of the languages road side coder is pulled just like that now this can be a custom made component as well that you have made somewhere else and this can also receive props and stuff just like a normal component so yeah you can go you know creative about with it like whatever component you want to map to this particular one tag or two tag or whatever how many however many tags that you want to map over here now let's consider another real world scenarios now in our app we have all of this translation and this one file but think about a real website like the one that I showed you like Coca-Cola they have so many different translations right so there will be hundreds of line just for one single translation so it doesn't really make any sense to keep them all in one single file and also the people who are in in real world the people who are translating these are separate people like not one person is translating all of these languages they are different different people who are working on these files so it's better if we try to make a separate file for English sep separate file for French separate file for Hindi and so on so let's see how we can do that so these files obviously are going to stay in our server right not in just our app directly so these files are obviously going to be staying in our backend server so for that I'm going to install another dependency npm install i18 next HTTP backend and meanwhile this is installing let me just create separate files for our translations so instead of our public folder I'm going to create a new folder called locals and inside of this I'm going to create all of the different different folders for different different languages so for English for Hindi for French and for Arabic I'm going to have files translation do Json for each of them and let's first add the Arabic over here I'm just going to take this translation object remove it from here and put it right over here just like that I'm going to do for all of them 3 days later and then in the end we can just get rid of this resources object right so our code became much cleaner and all of our files have been separated over here as you can see it looks much much better now the next step that we have to do and you can see that dependency have been installed successfully we need to add another middleware over here so inside of our documentation if I go to this add or load translations we have this dependency loading using a backend plugin so we can just copy it up paste it over here and simply we need to do do use backend that's it and also since we're using this this is going to be loading asynchronously now since this is in our backend server so what we can do we can just go to main. jsx and over here we can just add react. suspense so this is just to display a placeholder while that is loading so I'm going to say fall back equals loading and let's see if it's working or not if I go back let's refresh it and yeah you can see there was a loading symbol as well yep it is working absolutely fine great now since we have already created all of these translation files you might be thinking can't we have different translations for different pages and yep you're absolutely right we can have that we call them name spaces so let's say if I want to keep for homepage we can uh have this if I want to keep for about page we can create a new file about do Json oops Json for each and every language over here and we can use it directly and let me just open their documentation and I'm going to go to name name spaces yep over here as you can see they have given us best practices that we can use to name these files like common dojon things that are reused everywhere that is similar types of like shared uh translation that may be used like for example for a button there can be a save or cancel that may be used in different different pages so we can have them in common. Json for validation we can have a separate validation file for glossery or whatever about page or homepage we can have different different types of pages right and if I go back to the react documentation we have um let's see um y over here multiple translation files this is how we can use them so for translation file our default file we can load it like this in our use translation hook inside of an array we can say translation or if I let's say if I want to load this common file we can also use common over here so y you can go and read more about this from their official documentation and Y that is it that is it for this video and if you like this video give this video a huge F Thumbs Up And subscribe to the channnel for more such awesome tutorials

Channel: RoadsideCoder

Views: 25,558

Keywords: i18n, internationalization, localization, i18next, localization api, react, react localization, multi language react app, i18next tutorial, i18next-react tutorial, React Beginners Projects, react js projects, react-i18next, react i18n tutorial, i18next with react, i18next projects, i18next react projects, react project tutorial, react full tutorial, react js project tutorials, React Multi Language App

Id: dltHi9GWMIo

Length: 30min 1sec (1801 seconds)

Published: Sun Dec 24 2023