Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

egghead.io

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

via egghead.io

Overview

In this course, we will incorporate react-intl into a project created with create-react-app and 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.

Syllabus

  • Install and Configure the Entry Point of react-intl
  • Convert a Hard Coded String using react-intl FormattedMessage
  • Render Content with Placeholders using react-intl FormattedMessage
  • Render Content with Markup Using react-intl FormattedHTMLMessage
  • Format Date and Time Using react-intl FormattedDate and FormattedTime
  • Format a Date Relative to the Current Date Using react-intl FormattedRelative
  • Format Numbers with Separators and Currency Symbols using react-intl FormattedNumber
  • Render Content Based on a Number using react-intl FormattedMessage
  • Use a react-intl Higher Order Component to format messages and get current locale
  • Write tests for react-intl output using enzyme and Jest
  • Use Webpack to Conditionally Include an Intl Polyfill for Older Browsers

Taught by

Damon Bauer

Reviews

Start your review of Add Internationalization (i18n) to a React app using React Intl

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.