React i18next (Complete Tutorial)

in this video you will learn everything that you need to know to be able to translate your react application into multiple languages using I next I'm going to show you literally the simplest way to do this I'm going to walk you through the entire process step by step and by the end of this video you'll be able to take this and go apply to your own applications and literally translate them into any language that you want so stick around and watch until the end of the video because I promise you you are going to learn a lot and by the way if you're here if you're watching this video I can only assume that you're interested in learning about react which is great because I have project react which is a course where you literally get taught how to build a big and complex application with react as a total beginner you don't need to know anything about react beforehand literally everything is going to be taught in the course and I take the complex task of building a big project with react I break it down in a way that's super organized and accessible to a total beginner and I make this super super simple if you're interested I highly recommend it it'll be the first link in the description down below all right cool so let's begin so here in front of us we have the official documentation of react i8x this is going to be the package that we're going to be using to essentially translate our react application if you don't know IX is a package here if I just take it and go to Google and just Google IAT next this is a package that is available for JavaScript and it allows applications to be translated into multiple languages and the thing that we're using here react IX is essentially the react binding things for that to be able to easily use it inside of our own react application so you're going to want to go here to the official documentation and you're going to want to go to the quick start tab under the guides section over here we're going to take the simple approach we're not going to spend time getting confused with all of these different options that you can have the simple approach in the quick start along with what I'm going to show you in this video is going to be enough to teach you everything that you need to know to be able to take this and directly Port this to your own application and get started with translations with internalization right way cool so once you're here you're going to follow the quick start and the first thing that we have to do is install the required dependencies so that is going to be react it next the react bindings for I next and the actual IEX Library itself so I'm going to take this and I'm going to copy it and I'm going to come here to my actual vs code open up the terminal and do pnpn ad and then install these dependencies like so after that's done installing we're going to go back here to the documentation and we're going to scroll and go here to configure I8 next and what I'm going to do here this is telling us that we have to create a new file called i18 .js we're going to be using TS cuz we're using typescript and we're going to put it here inside of our folder structure so what I'm going to do is I'm going to take all of this code over here and actually copy all of this and just directly paste it into my own application so I'm going to come back here to vs code open up the editor over here come here and I'm going to make a new folder here called utils and inside of this I'm going to make i8n dots like so and here we can actually close the terminal teral and we can paste all of the contents of the file that we got from the official documentation now the reason why I put this file inside of its own utils folder and not just directly in the root of the project like is suggested here in the documentation is because usually in the documentation they tell you like the simplest part without trying to complicate anything but in my videos I always like to show you how you would do this in a real project and chances are you're going to have more Utilities in this project and they would all go inside of this utils folder because this over here is a utility it's the internalization utility and it's going to go alongside other utilities so having its own folder makes a lot of sense and now with this if we just look a little bit at this file we're first importing iatn from the official IAT next library that is not react specific and then we're importing the init react IAT next from the react specific Library like so and then we're creating here an object for resources this is going to be the actual translation keys of all of our languages so for example here we have English and then we have French and we have your one translation key welcome to react that is going to be translated to this and then welcome to react this is the same key because the keys are always going to be the same this is going to have the actual French translation which has BM venue a react a react I next I'm actually fluent in French if you didn't know about this so I can perfectly read and understand this then if you scroll down we have here we're using the i89 which remember comes directly from the JavaScript non-react specific library and we're calling use on it and we're passing the init react it next which comes directly from react I next and here as you can see we have helpful comments that actually tell us what that is and then we're calling the do init function and we're passing it a configuration object which takes in our resources and then the actual language which we set here as English and here you can see there's a commment that says language to use more information here in this case the language is currently hardcoded but you can actually I believe if you follow this link over here actually no it's this one over here if you want to actually change the language dynamically so we're going to copy this go back here open a new tab and go here you can follow this guide over here to actually change the language dynamically in your application we're not going to do that we're going to keep things simple we're just going to hardcode this to English and then we'll be able to hardcode this to French to actually see our translation Keys actually working in action in our react application and then over here at the bottom we have this piece of code which we set to false because we are using react and react as the comment says here already protects you from cross-site scripting attacks if you're using something that doesn't protect you by default you might want revisit this but in our case because we are using react this is totally fine and again this entire code comes directly from the actual documentation of react IAT next and then once we have this configured the only thing that we have to do to actually connect this to our react application is come here to our Explorer and go to main. ESX if you're following this repository which by the way this entire code is going to be available on GitHub it'll be linked in the description you can just come here and import everything that we're exporting in this file which is only this default export so exporting i18n we just have to import it over here not do anything with it just the fact alone of importing it is going to be enough so we're going to come here make a new line and we're going to do import i18n if I can type from os/ i8n like so and I do believe in this project I set up aliases so we can also do this or we can leave it as a period it's completely up to us right it really depends how you set up your entire project just by doing this we've imported all of this and now we can directly use these translation strings into of our react application and actually now that we're going to be using them I want to make a little change here I don't like how these are actual strings and sentences with like actual spaces and capitals and such I would rather put camel case notation for my strings just because it makes it a little bit easier because we're going to be writing these keys in code to actually get the translated values of each specific key so what I would do instead is instead of Welcome to react I would make this welcome message like so and then I would copy the same thing over here we're going to do welcome message and already you can see that this is a little bit cleaner in our code we're actually just going to call translate and then this key and this is automatically going to give us whatever value we have for the specific language that we configured over here which is going to be English in our case and then to actually use this we need to go to a component so here in Explorer I have the app. TSX file which is a simple component what we have to first do is we have to access the actual function it's called the T function that is going going to allow us to pass it a key one of these Keys over here and actually get and receive the actual translated value as a result of calling that function and we're going to do that the simple way we're going to do that with a hook because we are working in modern react and everything is hook based in modern react so we're going to come here and do const and then T and that is going to be equal to use translation and that let me just refresh my ts server because it doesn't register that I installed this Library translation from react i18 next right this is the react bindings of this Library which gives us this hook which gives us access to T and we can directly use T inside of this component so let's come here let's remove this text and let's call it here we're going to do T and then we're going to pass it the actual key that we have inside of our object which as you can see is welcome message like so right this key over here you pass it as a string and it has to match one of these Keys over here or else it's not going to translate anything and it's just going to return the actual key so with this now let's come here to our terminal let's do pnpm def to actually run this in development mode and then let's go here to our browser this is the first section and there we go right off the bat it is not working aha I realized why it's not working I should have caught this earlier but I didn't but it's good that we caught it on video cuz now I get to show you how you would approach debugging this so over here in my editor if I close the terminal and go here to main. ESX you're going to see that where we actually imported i18n it's saying that this is actually unused if I hover over over this it's saying that this is declared but its value is never right I should not have imported iatn from this file instead I should have imported the entire file so instead of doing this all I had to do was come here and do this and we're instead going to then import the entire file and that should fix our problem if you go back here there we go just doing that change fix our problem now we have welcome to react and react I next and remember in our code in our component all that we're passing is this key over here we're not passing the actual string which means that the fact that we see the string over here means that our translation through IAT next is actually working because using the schem it's able to go here inside of the resources inside of each language and it's able to actually find the value of the specific language and to even prove this to you a little bit further let's come here to our language and let's change this now to French save it and then go back and there we go now we have the French translation of the same string B aenue react react IAT next that is exactly what it says on once again I fluent in French and I'm very proud of it great so now we have this working this is kind of your success case if you will let me show you what happens when things don't work because chances are if you're going to be using this in your own react applications especially if it's your first time working with this you're probably going to do something wrong and it's not going to work and you're not going to know why so having this in the video might just help you out so first let's come back here to our actual configuration and let's say that we have a language that is invalid so let's just add an extra R over here to represent a language that is invalid and that we don't even have inside of our resources over here if I do this and I save and now I go back to the actual application we see the actual string that we passed for a translation right remember that is the string that we pass over here we see that directly on the screen when you give IAT next and react IAT next a translation string or something that doesn't really result in anything so there's no actual valid string it can look up and actually present it is going to give you the actual welcome message over here so if you ever see this interact application it means that somewhere something somewh along the line has went wrong and you need to trace the step to see if you have any typo and if everything is set up correctly now one thing that you can do to actually prevent this is inside of the init over here inside of this object you can actually provide a fallback language that is going to get used if this language is actually not supported and results in an error and you do it like this you do fall back L and then you can pass it here n like so right and even co-pilot knows that it's going to use if the detected language is not available this can happen if you save this even though we have an actual invalid language over here we come back and we have the English translation right you can do this with any language we could have put here FR if F FR is our fallback language and it's going to default to F FR right you want to make sure that the language that you put in here you control and it's actually a valid language whereas this language might come from the browser and might not be something that you support in that case it's going to use this fallback language over here great so now with that let's come here and let's change our fallback language to en n and actually put the language to F FR and for the rest of this video we're just going to do everything in French and if something goes wrong we're just going to fall back to English and that way we'll know if we did something wrong now what happens if in your actual component you have a typo inside of the string over here so let's come here let's add an extra e over here and now we have this string that doesn't match any single key inside of this object for any language if we go here to our application we're again going to see the actual string that we put with the typo over here so with these two Es what react IAT next is going to do is because in this key write in any language in French in English or even in the backup language the fallback language there is no actual key that matches the string over here it's just going to put the string and it's on you to actually deal with it and correct the typo in your string and this is something that you have to be careful about because if you are using strings like this it's very easy to actually make a mistake or even worse you actually go and you change these objects over here the keys over here but you forget to actually change the strink is going to break your translations and that's going to be difficult to actually find usually what people do what I've seen people do and even I've done in some applications is you create some sort of object summer some sort of constant that has all of these translation keys and then you just use that object instead that is going to reduce a little bit the chances of making a typo like this but if you're using strings or if you're working in a project that just uses strings it's on you to be careful to always make sure that you have the correct string to actually get the correct translation in your application cool so now with this we can move on to another topic that you're probably going to also run into as you're translating all of your strings in your react application and that is the concept of pluralization how do you have a string that is aware of some sort of count some sort of value and knows when it's singular or when it's plural without having to write all of that logic yourself inside of some component or some function in your code so let's come back here to our configuration where we have the actual languages and let's change our welcome message to now have to require some sort of value and use that as a singular or a plural so I can come here I can remove all of this and we can do something like you have and I'm going to put a placeholder here so X notifications like so now we have this welcome message which has this X over here that should be a number we need a way to pass this number from our component so that react I next can handle the plural in the singular case if you have zero notifications or one notification or two notifications we should have a different string over here mostly by the donation of this s over here in some cases the S is going to be there in other cases it's not and the way that you can do this inside a react I next is by using a count variable and this is how you do it you come here you replace your actual value with curly braces curly braces and then you pass your count this always has to be count it has to be called count because that is how this works you can't pass anything else you can't pass value you can't pass number you can't pass amount you have to pass a count variable from inside of your code and now this string specifically we're going to have this be the plural version of our translation string so in this case this should work for zero notifications so you have zero notific ifications it should work for two notifications you have two notifications and any other number that is bigger than one or zero this is not going to work for one notification because that is not going to have an S so if this is going to be the plural what we have to do is come here and do an underscore and then do other like so this is going to tell react IAT next that this string when it receives a count that has a value of zero or greater than one it is going to use this version because this is the plural version and then to get the singular version we're just going to take this entire thing come here and instead of other we're going to do one like so to signify that there's only going to be one of them and because this is not the singular version here we're going to actually remove this s over here so that we can have you have one notification and then as long as we pass a count with some sort of value from our code this translation string is either going to show the singular version or the plural version based on the actual count that we provided so now let's actually take these strings and copy them and put them here in the French and I'm going to do my best and I'll prove to you that I'm actually fluent in French so here I'm going to say V A and then notific it's actually the same way that you write it in English and French I believe I really hope that I'm right so I think this should be correct and here we're just going to do the same thing over here V A and by the way if you know French I'm using the formal version over here because usually you would do that in an application I think I haven't used that many react applications in French but let's just go with that so there we go we have the same key over here one and other and now we have the French translations so now if we provide if we first save and actually provide a count over here this should work exactly as we expect so let's come here and as a second argument to this function we can actually pass some values and here we can do count and we can do one for example so now they should give us notification without an S let's come here to our application and there we go notific right notific you have one notification right let's just see again to prove this to you let's put en as our language and now you see you have one notification there we go and now we can all understand what is actually going on if you go back here to our code and I'll change this to zero for example we're going to see that you have zero notifications with an S plural is correctly getting invert if you come here and put any number that is greater than one but not one itself or zero there we go it says you have two notifications this is how you do it right you just provide this count value which again can be anything you can provide any value that you want in here it just has to be provided as the actual count and that is going to work if you Al also set one over here and other this is the actual notation that react I next requires you're going to get plurals and singulars and it's just going to work and this is how you do it you put all of this inside of an object and you have your translation strings like so and you support plurals and singulars and there you go great so now with this there's one more thing that I want to show you that is really important and once again you are going to run into this as you're building and translating your react applications and it's so much better that you learn this now instead of spending and wasting all of that time later on trying to figure out this component because trust me on this this component that I'm going to show you now is not intuitive and you're better off watching in here than spending hours hours trying to figure it out reading through the documentation and not understanding it because it is not intuitive so let me come here to our app component and let's first get rid of this used translation hook because we're not going to be using it and let's get rid of this and now let's say that I had this string to translate so let's put back the welcome message we're going to say welcome and then we're going to put here let's say the username but we want to put it inside of a Boldt tag like so and we're going to put name or just user like so right and we're going to put exclamation mark over here what if we wanted to translate this string and we also wanted to keep this bold over here or whatever else it might have been could have been italic could have been underline whatever else it might have been we want to translate this this entire thing and also keep the bolt or whatever element that we had how would we do that well unfortunately if you tried to use the used translation hook that we had earlier it wouldn't work because it doesn't support it to do this you have to use another component from react IAT next and that is going to be the trans component so over here you're going to come here to latest and here we're going to look at the trans component this is another component that allows you to have translations as well but it allows you to actually translate things that are a little bit more complicated like this right when you have elements within an actual string that you want to keep but still have the entire string around it actually translated you would use the trans component and right you can see here in the documentation we actually have an example of exactly what we're trying to do we have this string over here that says hello and then we have strong over here and then also a title over here that says this is your name we might want to also translate that title and then an actual variable for the name from person over here this is the object and then we also have you have count unread messages over here we want to essentially translate all of this and keep all of this formatting along with the link and have everything translated over here this string have I translated this title have I translated this value doesn't need to be translated because that is the actual name the person your own translate a name and then the count over here should handle plurals we're not going to do something that complicated because this is quite a lot we're just going to try to translate this simple string which just has a bold tag over here so as you can see in the documentation it's telling us to use the trans component which we can import from react IAT next and then we just use the trans component we pass it the IAT next key this is going to be the key in our translation object and then we pass it the actual raw untranslated string with all of these different elements and inside of our actual string we do something that looks a little bit confusing we're actually using one over here so like as a tag we're using one we're closing the one tag then we're using five over here and we're closing the five tag and this is our act our actual translation strings what's going on well first let's take it slow and start one step at a time let's first start by importing the trans component from react IX so I'm going to take this over here come back here to our code come here at the top of the file and we're going to import this component then we're going to do as the documentation says just wrap this actual string inside of the component and pass it a key as our actual value that's the only thing that we're going to do so we're going to come here and do trans like this we're going to wrap our our string like so and then we're going to pass it I next and I believe it's key like so and that is going to be a string which is going to be the welcome message like so and we're not going to pass it with any plural or singular we're just going to pass welcome message like so then inside of our configuration over here we're actually going to want to change this to match what we're trying to translate over here we're no longer going to have any plurals we're going to keep things simple so I'm going to remove this over here I'm going to remove the one and I'm just going to say what is the text over here it's it's going to say welcome user I'm going to copy this entire thing and paste it over here inside of this translation string now here's the very confusing part so the first confusing part is that you're supposed to use this while still having the official untranslated full string inside of your code I don't particularly like this I feel like this could have been done a little bit better there's probably a reason why they chose to do it this way which is totally fine but I don't like the fact that I cannot just use this key over here I have to still keep the actual translation string strink along with all of The Bold and anything else I might have in my codebase raw untranslated it is what it is we have to work with this so you just have to get used to it even though it is a little bit confusing the second thing is that in here we can actually not use the B directly it doesn't work like that we have to change this to something else and in this case I believe cuz even I still get confused we have to actually change this to a one like so and then change this to a one like so and if I do this let me just try and copy this and paste it here in the French as well and here we can say bonjour like so let's see what happens in our actual code in our actual app there we go so this works right we have welcome over here and then user if you can tell is an actual bolt if I just come here and maybe change this to an i for italic like so and now we get to see that user is an idolic and this is actually working but what is going on with this what happened what is going on with this one over here why do we have to put one and instead of B why can we just not put b or or whatever why is there one well that's because of the second confusing thing about using the trans component is the way that it actually breaks apart these different things so for example let's say that we want to put something else like test over here and test should be I as well right you're going to put this here we're going to put this at the end and now we're actually going to do the same thing here let's see we have test after so let's just make a space over here let's come here if I did that and I put one as well right one as well in here the same let's let's do that close this and put one as well and one as well what is going to happen is we're actually going to get yes correctly we're going to get test over here as italic and use our eyes italic but this is actually wrong it's incorrect and the only reason why it's incorrect is because we use both eyes over here what if instead I was to put B like so right I put a b over here for bold test is still going to be italic and not bolt what's going on this happens because again of how trans actually takes this entire string over here and breaks it up into multiple parts so what it does over here is it takes this entire string with all of the components and it breaks it up into an array of multiple parts and what you're specifying over here is actually the index in that array where that component is that is supposed to actually get used so in this case we're specifying one which is the first position in the actual index in the array sorry which is going to be the second position right because arrays are zero index base so one is going to be the second position and here what we've done as well is we also specified one as well so this should also take whatever value is in this in the second position the array number one position of the array which in our case if you look at the string this is how it does it so it's first going to take this part over here of the string until the first very element that is going to be position zero over here so right here this is going to be position zero then we're going to have this piece of code over here the actual element and I believe it's going to go all the way up to here that is going to be position one so in your actual translation string whatever you you want to translate over here has to be position one which we've correctly put here position one then it's going to take this piece of code over here this actual exclamation mark and the space next to it and that is going to be position two index number two and then we have this over here which is going to be position three index 3 which is the bolt which is incorrect in our string because here we still said one so if we instead change this to one to three from one sorry so let's put three over here and let's put three and do the same thing for the French over here now what we should have is we should actually actually have the Bold over here and not the italic because this now correctly represents the actual position of this part of the string in the actual array I know this is confusing I'm also confused myself as you can probably tell I'm making a ton of mistakes trying to explain this but this is how it works it takes your string with all of the components it breaks it apart into an array of different positions and you're using the index so it's on you as a developer to actually figure out and do the math and you can actually look at the documentation they explain this a little bit as to how they actually do it I believe it's somewhere over here right they probably do they do it I've seen it it's up to you to actually manage that yourself and place these values yourself which means that if you ever change this translation string you have to make sure that you recompute manually in your head the actual indexes over here or otherwise it's not going to work and you're actually going to have something that you don't expect right again it is a little bit unfortunate this is how it currently is we have to work with it and there's no other way around it unless you want to use some something else which I'm not aware that there is something else for internalization that is as good as IAT NEX so if you're going to want to use the trans component which theoretically you shouldn't use it all the time usually the used translation hook that we had before is more than enough for most use cases but in the case where you actually have things like this where you have components inside of a string that you want to keep around you're going to want to use the trans component and that is the way that you have to do it unfortunately we just have to get with it I really hate in my own react applications when I have to use this because again I have to keep this entire string like this untranslated I have to use this and then I have to use all of this weird logic in here to actually get my components to work as I want which again I don't want to do but it is what it is and finally as a bonus I'm going to show you something very quickly just because you stuck around until this part of the video as you can see here in this comment it's telling you that you shouldn't put all of your languages inside of JavaScript and even less so inside of the same file usually you want to have a separate file for each language that could be Json we going to do this in Json because usually you're going to send that file to someone to a translator that is going to be able to translate the strings and you don't want them to have to go inside of JavaScript code just to figure out where they should actually actually put their translations so what I would do is I would come in here inside of the utos folder and actually what I'm going to do now is I'm going to make a new folder I'm going to call this one i18n like so and this is a great example of refactoring code initially we put this as a Stalone file the i18n file inside of the utos folder because that was enough for our use cases at the time but now we actually want to have more files that are related to i89 and they should go in the same folder and not just pollute the directly this utos folder so in that case we're now going to create a folder and we're going to do some light refactoring which is very normal in a normal process of building a react application and you're getting to see a great example of this in this video so inside of here I'm actually going to move this file directly and I'm going to rename this instead of iatn let's just update the import instead of iatn I'm just going to do index that way I don't have to change my actual Import in my code over here I can still import the same thing even though I've put this now in its own separate file and then what I want to do is I want to make here a new folder usually we call this locals like this and then you're going to want to make a new folder for each language that you support in this case we're going to do en and then we're also going to do another one for FR FR like so and inside of here you're going to create two files one for each language that are going to hold the actual translation strings in Json format for each specific language so for example for English we're going to do here n. Json like so and then we're going to do the same thing for French F fr. Json like so and then over here we're just going to take this object over here and actually paste this directly as an object inside of Json and here we actually have to put double quotes to everything because it is Json so let me do exactly that and there we go we're going to take all of this come here to the actual French and here we're just going to do bonjour like so and now we have the same thing for French and now instead of actually doing it this way what we're going to want to do is we're just going to want to come here at the top and we're going to want to do importan lank from let's do local. Json and we're going to do the same thing for French we're going to do import FR lank from locals FR FR Json and here we're just going to pass n link and then we're going to pass F length and now we have our translations in a separate file once again you can send this to a translator Justice File itself he or she is going to know exactly and it's going to be a lot easier for them to work in this as opposed to working inside of this file and everything is going to work exactly as we had it before so there you go congratulations you can now go on on your journey to actually convert your react application into multiple languages and make it accessible to anyone across the globe no matter what language that they speak if you enjoyed this video and you want to see more tutorials just like this one make sure to leave this video a big thumbs up you can also click here to subscribe or you can click here to watch a different video of mine that YouTube seems to think that you're really going to enjoy and with that being said my name has been Darius Cen this is Cen Solutions thank you so much for watching and I will see you in the next video chcha

Channel: Cosden Solutions

Views: 11,425

Keywords: react tutorial, react crash course, react developer, learn react, react hook, react hooks, react hooks tutorial, programming tutorial, react hooks explained, computer science, tutorial for beginners, react component, learn programming, web development, frontend development, coding for beginners, simple code, easy programming, react, react native, i18next, react i18next, react i18next typescript, react translation

Id: U4_P_l3L_EA

Length: 31min 10sec (1870 seconds)

Published: Wed Jun 19 2024