Internationalization (i18n)

How to use React with i18n - free starter

This article will teach you how to integrate i18n with your project. You can start using directional classes with the latest Bootstrap 5.

Lets see how to integrate internationalization (i18n) with MDB 5 across our layout, components, and utilities.

Prerequisites

Before starting the project make sure to install the following utilities:

• Node LTS (12.x.x recommended)
• Code editor. We recommend VSCode

Creating a new project

First, we need to create a new CRA project.

Step 1

Init the project. You can add a name for your project as we did in example below

Step 2

Navigate to app's directory.

Step 3

Setup MDB.

Font Awesome

Install Font Awesome.

Step 4

Add the following lines in your index.js file before the App.js file import:

Step 5

Import Font Awesome and Roboto font. Add the following lines in public/index.html file inside head section:

Step 6

Launch the application.

Installation

Once we have managed to launch our project, we have to add i18next and react-i18next package.

Step 1

Navigate to your project and in your terminal run:

Step 2

Create locales folder inside your src and create new json files with translations

Step 3

Prepare i18n.js file:

Step 4

Let's import that file somewhere in our index.js file:

Adding new content

After we go through all the previous steps, we can start developing our application. Let's change the content of App.js so that we can check if the app is working properly.

You can try some example we have prepared for you. Just copy the code below.