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¶
Follow Create React App documentation for more info. Bootstrap your project with following commands:
npx create-react-app my-app cd my-app
Install
@lingui/cli,@lingui/macroand Babel core packages as a development dependencies and@lingui/reactas 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-dependencieseslint rule feel free to add the dependencies as non-devnpm 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
Create
.linguircfile with LinguiJS configuration in root of your project (next topackage.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
srcdirectory and write them into message catalogs insrc/locales(English catalog would be in e.g:src/locales/en/messages.po). Finally, PO format is recommended. Seeformatdocumentation for other available formats.Optionally, add following scripts to your
package.jsonfor convenience:{ "scripts": { "extract": "lingui extract", "compile": "lingui compile" } }
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: