Creating a Reactjs multi language app

Reading Time: 2 minutes

Reactjs is one of the most popular front-end framework, it’s also adopted by Facebook, Microsoft, Samsung and other several big companies.
Often happens to develop Web App with the support to different languages, so I decided to share my experience with Reactjs, in detail as you can see below I developed a simple react solution where is possible to change the language instantly:

Giuliano De Luca | Blog | react multi language app

The solution is absolutely simple, I stored the translations in a .ts file (json format), because I used Typescript:

The mechanism works in combination with the react state where is saved a current language used, every time that the user changes the language basically the current language state receive a new value.
In order to display the string welcome for example is important to use the following notation:

In my solution I used Office UI Fabric, check the source code on Github:

Check the video: