How to create a simple multi-language React application

Creating a simple multi-language React application involves several steps. Let’s create a basic example using react-intl, a popular library for internationalization.

Step 1: Setting Up the Project

First, you need to set up a React project. If you haven’t already, you can create a new one using Create React App:

npx create-react-app my-multilang-app
cd my-multilang-app

Step 2: Installing react-intl

Install react-intl in your project:

npm install react-intl

Step 3: Creating Language Files

Create JSON files for each language you want to support. For instance, create en.json and es.json inside a folder named locales:

// locales/en.json
{
    "hello": "Hello",
    "welcome": "Welcome to our application"
}

// locales/es.json
{
    "hello": "Hola",
    "welcome": "Bienvenido a nuestra aplicación"
}

Step 4: Setting Up IntlProvider

In your App.js, wrap your application with IntlProvider from react-intl. This provider will make the translations available to your components:

import React from 'react';
import { IntlProvider } from 'react-intl';
import en from './locales/en.json';
import es from './locales/es.json';

function App() {
  const messages = {
    'en': en,
    'es': es
  };
  const [locale, setLocale] = React.useState('en');

  return (
    <IntlProvider locale={locale} messages={messages[locale]}>
      {/* Your App Components Here */}
    </IntlProvider>
  );
}

export default App;

Step 5: Using Translated Messages

Use FormattedMessage from react-intl to display translated messages:

import React from 'react';
import { FormattedMessage } from 'react-intl';

function MyComponent() {
  return (
    <div>
      <h1><FormattedMessage id="hello" /></h1>
      <p><FormattedMessage id="welcome" /></p>
    </div>
  );
}

Step 6: Switching Languages

Implement a simple language switcher:

function LanguageSwitcher({ setLocale }) {
  return (
    <div>
      <button onClick={() => setLocale('en')}>English</button>
      <button onClick={() => setLocale('es')}>Español</button>
    </div>
  );
}

Include this LanguageSwitcher component in your App.js and pass setLocale as a prop.

Running the Application

Now, you can run your React application:

npm start

This example demonstrates a basic implementation. In a real-world application, you would handle more complex scenarios like pluralization, number formatting, handling right-to-left languages, and more. The react-intl documentation provides comprehensive guides and examples for these advanced use cases.