Internationalization (i18n) in Remix - Mini Project: Build & Apply

Internationalization (i18n) with Remix Framework

📖 Scenario: You are building a simple web page that greets users in different languages based on their choice. This helps people from different countries feel welcome.

🎯 Goal: Create a Remix app that shows a greeting message in English or Spanish depending on a language setting. You will set up the data, add a language selector, use i18n logic to pick the right greeting, and complete the component to display it.

📋 What You'll Learn

Create a dictionary with greetings in English and Spanish

Add a variable to hold the selected language code

Use a function to get the greeting based on the selected language

Render the greeting message inside a React component

💡 Why This Matters

🌍 Real World

Internationalization helps websites greet users in their own language, making the experience friendly and inclusive.

💼 Career

Many web apps need to support multiple languages. Knowing how to set up i18n basics in Remix is useful for frontend and full-stack developers.

1

Create greetings dictionary

Create a constant called greetings that is an object with two keys: en and es. Each key should have a string greeting: 'Hello!' for en and '¡Hola!' for es.

Remix

// Create the greetings object with English and Spanish greetings
// Your code here

Hint

Use an object with keys 'en' and 'es' and assign the greetings as strings.

2

Add selected language variable

Add a constant called selectedLang and set it to the string 'es' to represent the chosen language code.

Remix

const greetings = {
  en: 'Hello!',
  es: '¡Hola!'
};

// Set the selected language code
// Your code here

Hint

Use const selectedLang = 'es'; to set Spanish as the selected language.

3

Create function to get greeting

Write a function called getGreeting that takes a parameter lang and returns the greeting from greetings for that language code.

Remix

const greetings = {
  en: 'Hello!',
  es: '¡Hola!'
};

const selectedLang = 'es';

// Create a function to return the greeting for a language code
// Your code here

Hint

Use bracket notation to access the greeting for the given language code.

4

Render greeting in React component

Create a React functional component called Greeting that returns a <div> containing the greeting message by calling getGreeting(selectedLang).

Remix

const greetings = {
  en: 'Hello!',
  es: '¡Hola!'
};

const selectedLang = 'es';

function getGreeting(lang) {
  return greetings[lang];
}

// Create a React component that shows the greeting
// Your code here

Hint

Use a functional component that returns a div with the greeting text inside curly braces.