ReactJS Applications Localization

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:

• Transifex
• WebTranslateIt
• Poeditor
• Google Translator Toolkit
• GlotPress

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);
    }
}