React Academy · Oppitunti

react-i18nextin käyttöönotto

Asentakaa ja määrittäkää i18next kielentunnistuksella ja namespacejen jakamisella.

Oppitunti 1/413 vaihetta

react-i18nextin käyttöönotto on ilmainen React Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu React Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Academy-kurssilla on yhteensä 4 oppituntia.

Tervetuloa

Tässä oppitunnissa asennatte ja määritätte react-i18nextin kielentunnistuksella ja nimiavaruuksien jaolla lisätäksenne React-sovellukseen monikielituen.

Riippuvuuksien asentaminen

Asentakaa i18next ja react-i18next. Voitte halutessanne lisätä paketin i18next-browser-languagedetector automaattista lokaalin tunnistusta varten sekä paketin i18next-http-backend käännösten lataamiseen HTTP:n kautta.

npm install i18next react-i18next
npm install i18next-browser-languagedetector i18next-http-backend

i18n.js-tiedoston luominen

Luokaa `i18n.js`-tiedosto, joka alustaa i18nextin. Kutsukaa `i18n.use(...)`-metodia lisätäksenne liitännäisiä ja `.init({...})`-metodia määrityksineen.

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

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

export default i18n;

i18n:n tuominen main.jsx-tiedostossa

Tuokaa i18n-alustustiedosto ENNEN sovelluksen renderöintiä. Näin i18n on valmis ennen kuin mikään komponentti kutsuu useTranslationia.

import './i18n'; // must be before App
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

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

Nimiavaruudet

Nimiavaruudet jakavat käännökset loogisiin ryhmiin, kuten 'common', 'auth' ja 'dashboard'. Kukin nimiavaruus on erillinen JSON-tiedosto, joka ladataan tarvittaessa alkuperäisen bundlen koon pienentämiseksi.

resources: {
  en: {
    common: { save: 'Save', cancel: 'Cancel' },
    auth: { login: 'Log in', logout: 'Log out' },
  }
}

Kielen tunnistus

LanguageDetector-liitännäinen lukee käyttäjän ensisijaisen kielen selaimesta (navigator.language), localStoragesta tai URL:n kyselymerkkijonosta. Se määrittää aktiivisen kielen automaattisesti ensimmäisellä latauskerralla.

Käännösten lataaminen public-kansiosta

Tallentakaa käännökset JSON-tiedostoina polkuun `public/locales/{lang}/{ns}.json`. Määrittäkää backend-liitännäinen lataamaan ne ajonaikaisesti, jolloin uuden kielen lisääminen ei vaadi koodimuutoksia.

import Backend from 'i18next-http-backend';

i18n.use(Backend).init({
  backend: {
    loadPath: '/locales/{{lng}}/{{ns}}.json',
  },
});

I18nextProvider (valinnainen)

I18nextProvider käärii sovelluksen ja tarjoaa i18n-instanssin kontekstin kautta. React-i18nextin version v11+ ja initReactI18next-liitännäisen kanssa tämä on valinnaista — hook lukee globaalin i18n-instanssin suoraan.

Alustuksen tarkistaminen komponenteissa

i18next lataa käännökset asynkronisesti. Käyttäkää `ready`-ominaisuutta useTranslationista tai tarkistakaa `i18n.isInitialized` ennen tekstin renderöintiä, jotta käännösavaimia ei näytetä.

const { t, ready } = useTranslation();
if (!ready) return null;

DevTools ja puuttuvien avainten käsittely

Asettakaa `saveMissing: true` kehitystilassa, jotta puuttuvat käännösavaimet kirjataan konsoliin. Näin löydätte kääntämättömät merkkijonot nopeasti.

i18n.init({ saveMissing: true,
  missingKeyHandler: (lng, ns, key) => console.warn('Missing:', key) });

Pikatarkistus

Miksi i18n-alustustiedosto on tuotava ennen React-sovelluksen renderöintiä?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Asentakaa i18next ja react-i18next, luokaa i18n.js liitännäisineen ja init-määrityksineen, tuokaa se ennen renderöintiä ja järjestäkää käännökset nimiavaruuksiin. Ladatkaa käännöstiedostot ajonaikaisesti http-backendillä.

Seuraavaksi

Seuraava oppitunti: **useTranslation-hookin käyttäminen** — korvaatte kovakoodatut merkkijonot t()-kutsuilla ja järjestätte JSON-käännöstiedostot.

Aloita maksutta

Opi React tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 88
Oppitunnit: 324

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”react-i18nextin käyttöönotto” ilmainen?

Kyllä – oppitunnin ”react-i18nextin käyttöönotto” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko React Academy-kurssin, päivitä CoddyKit PROhon. React Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”react-i18nextin käyttöönotto”?

Asentakaa ja määrittäkää i18next kielentunnistuksella ja namespacejen jakamisella. Harjoittelet React Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni React Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin React Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”react-i18nextin käyttöönotto”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä React Academy-oppitunnilla?

Kyllä. Jokainen React Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: React Academy