Add Internationalization (i18n) to a React app using React Intl
Offered By: egghead.io
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.
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/FrameworksCity 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