A weboldal szövegei nyelvi file-okból jöjjenek

A weboldal szövegei nyelvi file-okból jöjjenek, ne beégetve legyenek.

Telepítsétek fel a következőket a react project-ben:

npm install i18next react-i18next i18next-browser-languagedetector
npm install --save-dev @types/react-i18next

Hozzátok létre a következő mappastruktúrát:

src/
├── i18n/
│   ├── index.ts
│   ├── locales/
│   │   ├── en/translation.json
│   │   └── hu/translation.json

Egy translation.json így nézzen ki:

{
  "name": "Név:",
  "bravery": "Merészség"
}

Az új index.ts az i18n mappa alatt így nézzen ki:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

import en from './locales/en/translation.json';
import hu from './locales/hu/translation.json';

const resources = {
    en: { translation: en },
    hu: { translation: hu },
} as const;

i18n
    .use(LanguageDetector)
    .use(initReactI18next)
    .init({
        resources,
        fallbackLng: 'en',
        interpolation: {
            escapeValue: false,
        },
    });

export default i18n;

Módosítsátok a main.tsx-et:

import {StrictMode} from 'react'
import {createRoot} from 'react-dom/client'
import './index.css'
import App from './App.tsx'
import './i18n';  // <----------- ez legyen benne mindenképpen------------------------

createRoot(document.getElementById('root')!).render(
    <StrictMode>
        <App/>
    </StrictMode>,
)

Példa használat a CharacterForm.tsx-ben:

import {useState, useEffect, FormEvent, ChangeEvent} from 'react';
import {Character} from '../interfaces/Character';
import { TRAITS } from '../constants/traits';
import { useTranslation } from 'react-i18next';   // <-------- Add hozzá --------------

...
function CharacterForm({ initialData, onSubmit, onCancel, isSaving }: CharacterFormProps) {
    const { t } = useTranslation();   // <-------- Add hozzá --------------
    ....

    return (
        <form onSubmit={handleSubmit} className="character-form">
            <h3>{initialData ? 'Csapattag módosítása' : 'Csapattag felvétele'}</h3>

            <div className="form-group">
                <label htmlFor="name">{t('name')}</label>   // <-------- Cseréld le a 'Név:'-ot erre: {t('name')} -------------
                <input
                ...

További részletek: https://react.i18next.com/latest/using-with-hooks