React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

In this course, we will incorporate [react-intl](https://github.com/yahoo/react-intl) into a project created with [create-react-app](https://github.com/facebookincubator/create-react-app) and [react-router](https://github.com/ReactTraining/react-router). The react-intl library makes complex tasks such as internationalization and formatting dates & currency incredibly simple. Another huge benefit of react-intl is that it gives you the ability to centralize the content across your application into language specific files. This creates a consistent place to find content and encourages reuse. If you’ve ever used language specific `yml` files in Rails, you’re already familiar with this pattern.

Starting with the entry point of the application, we will hit the ground running by adding the necessary components and data structures required for `react-intl` to function. From there, we will use `react-intl` components to format various types of data including strings, dates, and numbers. We will also work through writing tests for components that include `react-intl` components using Jest and enzyme.

We’ll install `react-intl`, then add it to the mounting point of our React app.

Then, we’ll use `react-intl` helpers to load locales in our app, including English, Spanish and French and choose which locale data to load based on the user's browser language.

We’ll also set up and include messages files for each language, which hold all of the translated strings for our app.

Install and Configure the Entry Point of react-intl

In this lesson, we’ll replace hard coded strings with text from the user’s locale data, using the `react-intl` `FormattedMessage` component.

We'll also discuss the structure of the `messages` file, as well as use [this utility from the `react-intl` documentation](https://github.com/yahoo/react-intl/wiki/Upgrade-Guide#flatten-messages-object) in order to keep our `messages` structured nicely.

Convert a Hard Coded String using react-intl FormattedMessage

Learn how to use `react-intl` to set dynamic values into your language messages.
We’ll also learn how to pass in those values by using a `values`  prop in the `react-intl` `FormattedMessage` component. 
 
We'll also take a look at how to pass values with markup and still get all the benefits of translation.

Render Content with Placeholders using react-intl FormattedMessage

In this lesson, we’ll use the `react-intl` `FormattedHTMLMessage` component to display text with dynamic values along with other HTML elements to create emphasis on a piece of text.

_Note_: `FormattedHTMLMessage` should be used sparingly because `react-intl` cannot intelligently update the component by re-rendering only pieces that have changed. Instead, it has to re-render the entire component. If possible, use a `FormattedMessage` component instead, and wrap that component with HTML markup.

Render Content with Markup Using react-intl FormattedHTMLMessage

Using the `react-intl` `FormattedDate` and `FormattedTime` components, we’ll render a JavaScript Date into both a date string and a time string in different language formats.

Format Date and Time Using react-intl FormattedDate and FormattedTime

Given a date, we’ll use the `react-intl` `FormattedRelative` component to render a date in a human readable format, such as “2 days ago”, in various languages.

We'll also see how to set the frequency of this component's rendering to make our app update the text in real-time.

Format a Date Relative to the Current Date Using react-intl FormattedRelative

Using a `react-intl` `FormattedNumber` component, we'll pass a Number and a few additional props in order to render the correct separator and currency symbols for different languages.

Format Numbers with Separators and Currency Symbols using react-intl FormattedNumber

Using the `react-intl` `FormattedMessage` component, we’ll learn how to render content conditionally in our messages based on a number provided as a prop. 
 
You’ll also learn the syntax necessary to render strings using a plural string matcher.

Render Content Based on a Number using react-intl FormattedMessage

In some cases, you might need to pass a string from your intl `messages.js` file as a prop to a component. Instead of using `react-intl` components (which generate markup), we’ll use the `injectIntl` higher order component provided by `react-intl`. This will provide just the string we’re looking for, make the prop simpler,  and avoid creating unnecessary DOM elements.

We’ll also use props passed to the component from the Higher Order Component to clean up some redundant code.

Use a react-intl Higher Order Component to format messages and get current locale

In this lesson, we’ll look at writing test assertions for react-intl output. We'll add the necessary dependencies, then we’ll use `Jest` snapshots to get assertions written quickly. Then, we’ll use `enzyme` API methods to traverse the DOM and write assertions about specific pieces of `react-intl` data.

_Note:_ This lesson uses a modified version of an "intl-enzyme" helper utility from the `react-intl` documentation. You can [find the modified file here](https://github.com/damonbauer/egghead-bookshelf/blob/lesson10-testing/src/intl-enzyme.js).

Write tests for react-intl output using enzyme and Jest

Some browsers, such as `Safari < 10` & `IE < 11`, do not support the JavaScript Internationalization API, which `react-intl` depends on. In order to support these browsers, we’ll conditionally include an Intl polyfill using webpack `require.ensure`. 
This ensures only browsers that need the polyfill incur the extra load.

Add Internationalization (i18n) to a React app using React Intl

Damon Bauer

Course Content