i18n of React with Lingui.js #1
Tags: react, javascript, i18n
Published: 2018-11-18 21:59:16

---
title: i18n of React with Lingui.js #1
published: true
description: In this post, I want to show how to use Lingui.js to do i18n/l10n of React applications
tags: [react, js, i18n]
cover_image: https://thepracticaldev.s3.amazonaws.com/i/l7mb2u74g97zbfov2phw.png
series: i18n of React with Lingui.js
---

Everybody talking about React Hooks after React Conf. Other talks didn't get that much attention. It's a pity because there was absolutely brilliant talk about i18n/l10n of React applications - [Let React speak your language by Tomáš Ehrlich](https://www.youtube.com/watch?v=WXYPpY_mElQ&t=26701s).

In this post, I want to show how to use Lingui.js to do i18n/l10n of React applications. I will use Node 10.10 and `yarn`, but I guess `npm` and other versions of Node would work too. The full source code is [here](https://github.com/stereobooster/react-lingui-example). Each step of the tutorial is done as a separate commit, so you can trace all changes of the code.

## Install

Follow [Create React App](https://github.com/facebook/create-react-app) documentation for more info. Boostrap your project with following commands:

```shell
npx create-react-app react-lingui-example
cd react-lingui-example
```

Install `@lingui/cli`, `@lingui/macro` and Babel core packages as a development dependencies and `@lingui/react` as a runtime dependency.

```shell
npm install --save-dev @lingui/cli@next @lingui/macro@next @babel/core babel-core@bridge
npm install --save @lingui/react@next

# or using Yarn
yarn add --dev @lingui/cli@next @lingui/macro@next @babel/core babel-core@bridge
yarn add @lingui/react@next
```

Create `.linguirc` file with LinguiJS configuration in root of your project (next to `package.json`):

```js
{
  "localeDir": "src/locales/",
  "srcPathDirs": ["src/"],
  "format": "lingui",
  "fallbackLocale": "en"
}
```

This configuration will extract messages from source files inside `src` directory and write them into message catalogs in `src/locales`.

Add following scripts to your `package.json`:

```js
{
  "scripts": {
    "start": "lingui compile && react-scripts start",
    "build": "lingui compile && react-scripts build",
    "add-locale": "lingui add-locale",
    "extract": "lingui extract",
    "compile": "lingui compile"
  }
}
```

Run `npm run add-locale` (or `yarn add-locale`) with [locale codes](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry) you would like to use in your app:

```shell
npm run add-locale en

# or using Yarn
yarn add-locale en
```

Check the installation by running `npm run extract` (or `yarn extract`):

```
npm run extract

# or using Yarn
yarn extract
```

There should be no error and you should see output similar following:

```shell
yarn extract
Catalog statistics:
┌──────────┬─────────────┬─────────┐
│ Language │ Total count │ Missing │
├──────────┼─────────────┼─────────┤
│ en       │      0      │    0    │
└──────────┴─────────────┴─────────┘

(use "lingui add-locale <language>" to add more locales)
(use "lingui extract" to update catalogs with new messages)
(use "lingui compile" to compile catalogs for production)
```

Congratulations! You’ve sucessfully set up project with LinguiJS.

## Basic usage

(based on [example project](https://github.com/lingui/js-lingui/tree/next/examples/react/src))

Create `src/i18n.js`:

```js
import { setupI18n } from "@lingui/core";

export const locales = {
  en: "English",
  cs: "Česky"
};
export const defaultLocale = "en";

function loadCatalog(locale) {
  return import(/* webpackMode: "lazy", webpackChunkName: "i18n-[index]" */
  `./locales/${locale}/messages.js`);
}

export const i18n = setupI18n();
i18n.willActivate(loadCatalog);
```

Add `src/locales/*/*.js` to `.gitignore`.

Add `<I18nProvider>` to the `App`:

```js
import { I18nProvider } from "@lingui/react";
import { i18n, defaultLocale } from "./i18n";

i18n.activate(defaultLocale);

class App extends Component {
  render() {
    return <I18nProvider i18n={i18n}>{/* ... */}</I18nProvider>;
  }
}
```

Use `<Trans>` macro to mark text for tanslation:

```js
import { Trans } from "@lingui/macro";

// ...

<Trans>Learn React</Trans>;
```

Run `npm run extract` (or `yarn extract`):

```shell
yarn extract
Catalog statistics:
┌──────────┬─────────────┬─────────┐
│ Language │ Total count │ Missing │
├──────────┼─────────────┼─────────┤
│ en       │      2      │    2    │
└──────────┴─────────────┴─────────┘
```

Now you can start your development environment with `npm run start` (or `yarn start`).

You can edit `src/locales/*/messages.json` to change translations or upload those files to translation service.