Add Internationalization (i18n) to a React app using React Intl
|
Learn how to easily internationalize your React application with react-intl. Format dates, currency, and more with this comprehensive course.
In this course, we will incorporate
into a project created with
and
. 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
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
to function. From there, we will use
components to format various types of data including strings, dates, and numbers. We will also work through writing tests for components that include
components using Jest and enzyme.
Course Content
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
User Reviews
Be the first to review “Add Internationalization (i18n) to a React app using React Intl”
You must be logged in to post a review.
There are no reviews yet.