DocumentationInternationalizationReact Apps Localization

ReactJS Applications Localization


Overview

Before you start, make sure you have installed WP-CLI. That’s because you will need to use the new npm scripts for the localization.

🛑

If you want to localize your ReactJS application, you won’t be able to use the lazy import. That’s because the wp-script will generate several files, for example 437.js, which won’t be able to be localized.

Typical Workflow

Below a typical workflow to localize your ReactJS application:

Use the @wordpress/i18n

First of all, you need to use the @wordpress/i18n package to localize your ReactJS application.

import { __ } from '@wordpress/i18n'

In your ReactJS application, you can use the __ function to localize your strings.

import { __ } from '@wordpress/i18n'
 
const MyComponent = () => {
  return (
    <div>
      {__('Hello World', 'my-text-domain')}
    </div>
  )
}

Build your ReactJS application

After you have localized your ReactJS application, you can build it using the following command:

npm run build

In the public/apps folder, you will find the build files.

Generate the .pot file

To generate the .pot file, you can use the following command:

npm run make-pot

Edit the .pot file

After you have generated the .pot file, you can edit it to add the translations.

Here are a few tools that can be used to translate PO files online:

And follow the steps to translate the strings.

Generate the .json file

To generate the .json file, you can use the following command:

npm run make-json

Load the translations

To load the translations, you can use

<?php
 
namespace WPKirk\Http\Controllers;
 
class WPKirkController extends Controller
{
    public function index()
    {
        return WPKirk()
            ->view('analytics.index')
            ->withAdminAppsScript('analytics/analytics', true);
    }
}