Skip to content

docs(User Guide): add section of integration with react-intl #2366

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

docs(User Guide): add section of integration with react-intl #2366

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 30 additions & 0 deletions packages/react-scripts/template/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,8 @@ You can find the most recent version of this guide [here](https://github.com/fac
- [Using Global Variables](#using-global-variables)
- [Adding Bootstrap](#adding-bootstrap)
- [Using a Custom Theme](#using-a-custom-theme)
- [Adding Internationalization](#adding-internationalization)
- [Integrating with React-Intl](#integrating-with-react-intl)
- [Adding Flow](#adding-flow)
- [Adding Custom Environment Variables](#adding-custom-environment-variables)
- [Referencing Environment Variables in the HTML](#referencing-environment-variables-in-the-html)
Expand Down Expand Up @@ -680,6 +682,34 @@ We suggest the following approach:

Here is an example of adding a [customized Bootstrap](https://medium.com/@tacomanator/customizing-create-react-app-aa9ffb88165) that follows these steps.

## Adding Internationalization

### Integrating with React-Intl

[React-Intl](https://github.com/yahoo/react-intl) is a popular library for internationalizing React apps. There is also a [babel-plugin](babel-plugin-react-intl) to extract string messages for translation. If you want to add it to Babel configuration, you will need to [eject](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-eject) the Create React App project.

Instead of ejecting, you can write some simple scripts to do the same work. Or, just use [react-intl-cra](https://www.npmjs.com/package/react-intl-cra) that simply extracts messages from the command line.

First, let’s install the command-line interface from the npm:

```bash
npm i react-intl-cra --save-dev
```

Then in `package.json`, add the following lines to `scripts`:

```diff
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
+ "extract": "react-intl-cra 'src/**/*.js' 'output/messages.json'",
```

Now, whenever you run `npm run extract`, you will get an output message file as JSON format.

> Note: You can also take a look at [this](https://github.com/evenchange4/react-intl-po-example/blob/master/package.json#L20) demo repository for using react-intl-cra with Creact React App project.

## Adding Flow

Flow is a static type checker that helps you write code with fewer bugs. Check out this [introduction to using static types in JavaScript](https://medium.com/@preethikasireddy/why-use-static-types-in-javascript-part-1-8382da1e0adb) if you are new to this concept.
Expand Down