Skip to main content

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

    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

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

    .linguirc
    {
       "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:

    package.json
    {
       "scripts": {
          "extract": "lingui extract",
          "compile": "lingui compile"
       }
    }

  5. Check the installation by running extract command:

    npm run 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: