Setup with Create React App

Create React App is a framework for writing React apps with no build configuration. This guide suppose you use Create React App 2.0 (the default version).

Install

  1. Follow Create React App documentation for more info. Bootstrap your project with following commands:

    npx create-react-app my-app
    cd my-app
    
  2. Install @lingui/cli, @lingui/macro and Babel core packages as a development dependencies and @lingui/react as a runtime dependency.

    npm install --save-dev @lingui/cli @lingui/macro
    npm install --save @lingui/react
    
    # or using Yarn
    yarn add --dev @lingui/cli @lingui/macro
    yarn add @lingui/react
    

    In case you get errors with import/no-extraneous-dependencies eslint rule feel free to add the dependencies as non-dev

    npm install --save-dev @lingui/cli
    npm install --save @lingui/macro @lingui/react
    
    # or using Yarn
    yarn add --dev @lingui/cli
    yarn add @lingui/macro @lingui/react
    
  3. Create .linguirc file with LinguiJS configuration in root of your project (next to package.json):

    {
       "locales": ["en", "cs", "fr"],
       "sourceLocale": "en",
       "catalogs": [{
          "path": "src/locales/{locale}/messages",
          "include": ["src"]
       }],
       "format": "po"
    }
    

    This configuration will extract messages from source files inside src directory and write them into message catalogs in src/locales (English catalog would be in e.g: src/locales/en/messages.po). Finally, PO format is recommended. See format documentation for other available formats.

  4. Optionally, add following scripts to your package.json for convenience:

    {
       "scripts": {
          "extract": "lingui extract",
          "compile": "lingui compile"
       }
    }
    
  5. Check the installation by running extract command:

    npm run extract
    
    # or using Yarn
    yarn extract
    

    There should be no error and you can find extracted messages in src/locales.

Congratulations! You’ve successfully set up project with LinguiJS. Now it’s good time to follow React tutorial or read about ICU Message Format which is used in messages.

Further reading

Checkout these reference guides for full documentation: