React Internationalization (i18n)

Add multi-language support to React apps.

Install react-i18next

```bash npm install react-i18next i18next ```

Setup

```javascript import i18n from 'i18next'; import { initReactI18next } from 'react-i18next';

i18n.use(initReactI18next).init({ resources: { en: { translation: { welcome: 'Welcome', goodbye: 'Goodbye' } }, es: { translation: { welcome: 'Bienvenido', goodbye: 'Adiós' } } }, lng: 'en', fallbackLng: 'en' });

export default i18n; ```

Using Translations

```javascript import { useTranslation } from 'react-i18next';

function App() { const { t, i18n } = useTranslation();

const changeLanguage = (lng) => { i18n.changeLanguage(lng); };

return ( <div> <h1>{t('welcome')}</h1> <button onClick={() => changeLanguage('es')}>Español</button> <button onClick={() => changeLanguage('en')}>English</button> </div> ); } ```

With Variables

```javascript { welcome: 'Welcome, {{name}}!' }

t('welcome', { name: 'John' }) ```

Remember

- Separate translation files - Use translation keys - Support plurals - Format dates/numbers correctly

> Next: Learn SEO optimization!