Translating React Apps
Tags: softwaredevelopment, react, tech, javascript
Published: 2017-09-29 01:06:56

---
title: "Translating React Apps"
published: true
tags: software-development,react,tech,javascript
canonical_url: https://tech.gadventures.com/translating-react-apps-99dede52d924
---

_Originally posted on [tech.gadventures.com](https://tech.gadventures.com/translating-react-apps-99dede52d924)_

Imagine you’re in a Roman train station in the middle of the night, and nobody’s around. You need to purchase a ticket to Venice. The ticketing software is in Italian. You don’t speak Italian. After a bit of a struggle, you manage to get a ticket. You get on the train. More Italian. A 3 hour trip. You look at the welcome sign. â€˜Welcome to Florence’. Sigh. Florence is not&nbsp;Venice.

![](https://cdn-images-1.medium.com/max/850/1*pqLmZeeFn8P24_4eOOSdsA.jpeg)<figcaption>Roma Termini TrainÂ Station</figcaption>

In the ideal world, we’d all speak many languages, like some of our [European travelers](http://ec.europa.eu/commfrontoffice/publicopinion/archives/ebs/ebs_243_en.pdf). But not everyone understands English, so it’s better to support as many languages as possible.

As some of you may know, G has a travel app called Good to Go. There are certain requirements you may need to complete before you travel. These include sending us a copy of your visa, your jacket size, your food preference, etcâ€Š–â€Šwe refer to these as “trip requirements”. Before travelers start their adventure, Good to Go helps them make sure they have all the things they need before they&nbsp;travel.

Thousands of travelers use it to complete their trip requirements before they begin. _Every single one of our departures goes through Good to Go._ It’s a big star. In fact, G-Stock 23 marks the 1 year anniversary of Good to Go. We continue to work on it and make it better every single&nbsp;day.

Last month, we brought German support to Good to Go, which is written in React. It was pretty easy thanks to [Yahoo’s React-Intl library](https://github.com/yahoo/react-intl). This post details my experience adding internationalization to Good to&nbsp;Go.

Firstly, when it comes to translating, the order of the words is important, as well as the formatting of dates and names. Grouped together, these things are known as “locale&nbsp;data”.

Installing react-intl is [simple enough](https://github.com/yahoo/react-intl/wiki#the-react-intl-package), but there are a few additional steps you need to complete after the initial yarn add react-intl. Let’s go over them&nbsp;now.

#### Babel

I’m going to illustrate how to do this with Babel and Webpack. First, install the babel-plugin-react-intl plugin (yarn add babel-plugin-react-intl). It will extract the strings marked for translation. To activate the plugin, you have to then add its name to your&nbsp;.babelrc&nbsp;file.

```
"plugins": [
    ...,
    ["react-intl", {
        "messagesDir": "./src/translations",
        "enforceDescriptions": false
    }],
    ...
]
```

In the example above, react-intl will extract tagged messages into src/translations. The messages are stored in JSON files, inside directories that are named after your components.

When it’s time to send the messages to a translation service, you will probably want all of them in a single file. For this reason, the creators of the library have [written a script](https://gist.githubusercontent.com/iam-peekay/5a4e9431c9c785d3e62e584503619ecc/raw/65c6b5174652e31f5446b1fd0d70ece3ae1d0b9b/reactintl9.js) that you can use to combine all the strings into a single file. To see a more detailed example, [see this&nbsp;post.](https://medium.freecodecamp.org/internationalization-in-react-7264738274a0)

#### Locale Data

The locale data for each language is provided and imported independently so you’re only sending down what you need. In the following example, we’re importing the locale data for English and&nbsp;German.

```
import { addLocaleData } from 'react-intl'
import enLocaleData from 'react-intl/locale-data/en'
import deLocaleData from 'react-intl/locale-data/de'
```

So the process&nbsp;is:

1. Install the&nbsp;library
2. Install the babel&nbsp;plugin
3. Import the locale&nbsp;data

Finally, you wrap your root component with IntlProvider, so that all the translated messages and locale data can be loaded into the React Intl Components used by your&nbsp;app.

```
<IntlProvider locale="de" messages={messages}>
     <Root />
</IntlProvider>
```

Another method is to inject these values right into the intl reducer during the “boot up part of your app’s lifecycle, like index.js or a configureStore method.

```
{
    ...,
    intl: {
        defaultLocale: 'en',
        locale: 'en',
        messages: allMessages.en
    },
    ...
}
```

#### Formatting with React-Intl

The heart of react-intl is its tagging system. You can tag (or mark) strings for translation by wrapping them in a Rect component or using the&nbsp;API.

1. A React Component

```
import { FormattedMessage } from 'react-intl'

<FormattedMessage
    id="header.selectPax"
    defaultMessage="Select the traveller for whom you'd like to enter requirement information." 
/>
```

Using the component is straight forward, and powerful. For example, they can take values, illustrated in this&nbsp;example:

```
<FormattedMessage
    id="form.name"
    defaultMessage="{name}"
    values={{ name }} 
/>
```

The object you provide to values can be another FormattedMessage, meaning you can string them along like a chain to create a message with HTML&nbsp;tags!

```
<FormattedMessage
    id="body.text"
    defaultMessage="{bodyText}"
    values={{
        bodyText:
            <div>
                <h2>
                    <FormattedMessage 
                        id="bodyText.1"
                        defaultMessage="Ready for a G Adventure?" />
                </h2>
            </div>
    }} 
/>
```

2. API

```
import { defineMessages } from 'react-intl'

const formButtons = defineMessages({
    login: {
        id: 'formButtons.login',
        defaultMessage: 'Login'
    }
})
```

With the API, you define your message ahead of time in a simple Javascript object.

The API provides you with translated strings in places where a React component would not be appropriate. For example, inside of a \<button\>.

```
import { injectIntl } from 'react-intl'

const myForm = ({ intl }) => {
    <button
        type="submit"
        onClick={handleSubmit}>
        {intl.formatMessage(formButtons.login)}
    </button>
}

export default injectIntl(Waiver)
```

You’ve seen two ways you can use the react-intl library to translate your strings. I recommend using it everywhere. You will delight your users when they see your content in their native language.

Look out for Part 2 of this series on translation, where we go over how to build out a Language Picker that uses react-intl.

_Keep following us on_ [_Medium_](https://tech.gadventures.com/) _and_ [_Twitter_](https://twitter.com/gadventurestech) _for more snippets of the Tech world according to&nbsp;G!_

Want to work at G Adventures? Join our growing team and travel the world! [_Check out all our jobs and apply today_](https://gadventures.com/careers)_._

* * *