This device is not compatible.
PROJECT
Learn to Localize a React Web App Using React Intl
In this project, we will learn how to adapt website content based on a user’s preference, enabling the website to engage with a wider audience and enhance accessibility for individuals from different countries and regions.
You will learn to:
Develop a Single-Page Application with React.js.
Enable navigation between various pages without the need for page reloads.
Incorporate the useContext hook for efficient state management.
Integrate the react-intl library for localization.
Skills
Web Development
Front-end Development
Configuring and Localizing Applications
Prerequisites
Basic understanding of React functional components and hooks
Good understanding of JavaScript
Basic understanding of styling web applications using CSS
Technology
React
Project Description
In this project, we will learn to create a simple web app using React. We will break it down into smaller React components comprising text, numbers, and dates and also learn to navigate between these pages without the need to refresh the entire page. Moreover, we will use plain CSS to improve its visual appeal.
Once the website is ready, we will add a language selection drop-down. Users can select their preferred language from a drop-down menu, and the website will translate all content, including numbers and dates, into the selected language. We will use the react-intl library to achieve localization and make sure the website is accessible to people from various parts of the world.
Project Tasks
1
Introduction
Task 0: Get Started
2
Build a Simple Web App
Task 1: Create the Header Component
Task 2: Create a Text Component
Task 3: Create a Number Component
Task 4: Create a DateTime Component
Task 5: Implement Navigation Routes in the Header
Task 6: Apply CSS Styles to the App
3
Implement Translations
Task 7: Create a Language Drop-down
Task 8: Add Translations for Languages
Task 9: Create a Context to Manage the Language
Task 10: Manage Language Change from the Drop-Down
Task 11: Use Formatted Components of React Intl
Task 12: Exploring Additional Props of FormattedMessage
Congratulations!
Relevant Courses
Use the following content to review prerequisites or explore specific concepts in detail.