In this article we will talk about React Intl and how can we do your application more available to anothercountries another persons and and other people who speak different languages andhow you can improve your site we will use i18n standard and for react to itwill implement react intl model and the so in this video what we are going to do first of all that showed me demo what we are going to receive in the end here we have a standard standard application from Riyadh is to create real talk uphome page and here we have a button for switch languages we will have three different languages is English French and German and when we click different button we see that code is changed for this specific language and right nowit’s pretty simple but then we will add we will do it more complex and solet’s start and here is our plan for today so we will create a newapplication which create react up from the scratch then.
We are going to addfree languages you can add end ranges and any number you want it’s not aproblem it’s scalable and you can use as much as you want we will install thisplugin react in tube and then we create provider so I will show you how to dothis solution more workable and reel or real life not that what you can find inin sample then we will try to use we will use formatted message component andwe will create some proper you need and simplify our life and it will be muchmore easier to use it also in the end of you sees the demo of our work and unittest of course we need to create unit test for the new functionality but wehave no time and it’s out of scope so what do we need to for start we need tocreate a laptop it’s Facebook creator top we have application generator andreact into a plugin here you can find the link will be indescription to this video also the there will billion to react the context appearI’ve used it in the previous video and then we will make our sample mark muchmore complex with using context but right now it is our context and here youcan find this app of how you can use it
But we will do it in a bit another waylet’s start first of all we need to create in your application here we havethis comment let’s code okay Eric works fine so let’s open this application I love you I will use webstorm but you can use any editor ID it doesn’t matter youcan use it okay so here if we have our application let’s run itso we have application it works fine it it’s vacation from the scratch and let’sstart edited so we go to source we are not going to clear queries applicationor change something we will leave it and the soap let’s create our modeleverything what is related to internalisation we put in separatefolder it’s a model and
we called i18n it’s a standard name for our sink whichis related to internalization here first of all we need to create a file withlanguages we are going to support we are not have to do it but it will simplifyour work and it’s from clean clear code perspective is much better so we havewalk-ons focus is just language we are going to support so it’s just the objectwith the couple different computers which we are going to use is English.
English United States it’s German for example and the French let’s say FrenchCanada so we need expose this object and we call it some far it will golocals so it’s upper case because it’s a constant and all these languages areconstants true so from best practices should be upper case so okay we createto learn just we are going to support the next step we need to create ourprovider wider it’s the component which will use our language and use messagesand can use it us we need okay to use used we need to install our react in tobegin so let’s call yarn and react in to will add this plug-in and meanwhile wewill create provider just well so okay what do we need hereof course import react the next one we need import this Intel provider also we create a language or so we needa list of these languages and right now let’s keep it so even Kateis provided it’s a continent it will receive just children and local okayit’s a language we are going to use a language our site will be shown on thislanguage and children to bear the whole application we will wrap the wholeapplication or just one model and then everywhere we can use this functionalityso it’s a component let’s use
it you add a few Q or am so just one walklocal it’s a local okay okay it’s language we are going to use also wehave another parameter is text component its proper for all transits theconstellation so we have translation and it will do wrapped in something we canwrap it in spawn Devo or something else but in our case we will use just afragment it’s rock fragment we need import it okay and the short one it’s messages right now we haven’t but we will create forgot to return or we can use it heresix and since it so here we will show our children and close it so message dowe need our messages let’s add here messages and it will be array with thekeys of local hotel okay so let’s add these messages so weneed the finish great message let’s create new folder messages pull itbecause we have messages for different languages shows there are a lot ofmessages and let’s create a file for each language we are going to use so itwill be and us yes yes and let’s create this file so again it’s just object solet’s export let’s export object and the key so we have different nitrous offer as heis constant for our English of import so use it and here we use all courseEnglish and it is expressly the object with example Qian hello and translationwill be hello right.
now it’s enough and we need three versions of this one foreach language so just copy and paste so for German we just change this one andwe will change translation to see result it will be M oh I hope so because mydrama isn’t the project and bit cut and again post and for French French Canadafor example we will use for Canada means so it’s French and translation is bunjuokay so the next one we will create one more file index just to wrap our suittogether so let’s import
English from Englishinput and import French Canada and then we export thefault object with all these languages so we will distract all these objectsand in result we have we will have object with the key keys of languagesokay so we have these messages let’s go back to providers and import messages messages and import our index file andhere and block local why we imported it so let’s add default value so forexample if you don’t forget to pass this branch we will use so called EnglishEnglish as a default language so we created this component and let’s exportit the port provider okay so okay almost everything is done so here in other inour model let’s create index file to import absent what we need and here wewill have export report so we’ll export to this company intercept default itwill be I again provider don’t forget and and we will export ourlocals all languages.