YoVDO

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

Offered By: egghead.io

Tags

React Courses Web Development Courses JEST Exam Courses Webpack Courses Internationalization Courses Enzymes Courses

Course Description

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

Related Courses

JavaScript Libs/Frameworks
City College of San Francisco via California Community Colleges System
Learn Build Tools
Codecademy
AngularJS and Webpack for Modular Applications
egghead.io
Build a Server Rendered + Code Split App in React with React Universal Component
egghead.io
Make Webpack Easy with Poi
egghead.io