Setup đa ngôn ngữ i18n trong ReactJS

Thứ Bảy, 15/04/2023

Tram Ho

Hướng dẫn một số bước cơ bản để setup đa ngôn ngữ i18n cho ứng dụng của bạn.

Link thư viện: https://react.i18next.com/guides/quick-start

Link demo online: https://codesandbox.io/s/react-i18n-c0yrc4?file=/src/App.tsx

1. Tạo ứng dụng React cơ bản

Tạo một folder với tên react-i18n-app
Mở cmd và gõ: npx create-react-app .
Đợi một lúc để ứng dụng được khởi tạo
Trong cmd đó ta gõ tiếp: cd react-i18n-app
Cài đặt hai package để hỗ trợ đa ngôn ngữ: npm install react-i18next i18next
Khởi chạy ứng dụng: npm start

2. Giao diện ban đầu

Mở file bên dưới và thêm thư viện bootstrap để css cho nhanh

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span>
  <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css<span class="token punctuation">"</span></span>
  <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span>
  <span class="token attr-name">integrity</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ<span class="token punctuation">"</span></span>
  <span class="token attr-name">crossorigin</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>anonymous<span class="token punctuation">"</span></span>
<span class="token punctuation">/&gt;</span></span>

<link

href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css"

rel="stylesheet"

integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ"

crossorigin="anonymous"

/>

Code giao diện tí nhỉ

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>div className<span class="token operator">=</span><span class="token string">"container text-center"</span><span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>h1 className<span class="token operator">=</span><span class="token string">"my-3"</span><span class="token operator">&gt;</span>React i18n<span class="token operator">&lt;</span><span class="token operator">/</span>h1<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>button className<span class="token operator">=</span><span class="token string">"btn btn-primary me-2"</span><span class="token operator">&gt;</span>Change language <span class="token constant">EN</span> <span class="token operator">-</span> <span class="token constant">VI</span><span class="token operator">&lt;</span><span class="token operator">/</span>button<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>span className<span class="token operator">=</span><span class="token string">"badge rounded-pill text-bg-danger me-1"</span><span class="token operator">&gt;</span>Search<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>span className<span class="token operator">=</span><span class="token string">"badge rounded-pill text-bg-danger me-1"</span><span class="token operator">&gt;</span>Cancel<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>span className<span class="token operator">=</span><span class="token string">"badge rounded-pill text-bg-danger me-1"</span><span class="token operator">&gt;</span>Delete<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>span className<span class="token operator">=</span><span class="token string">"badge rounded-pill text-bg-danger me-1"</span><span class="token operator">&gt;</span>Save<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
  <span class="token punctuation">)</span>
<span class="token punctuation">}</span>

export default function App() {

return (

<h1 className="my-3">React i18n</h1>

<button className="btn btn-primary me-2">Change language EN - VI</button>

<span className="badge rounded-pill text-bg-danger me-1">Search</span>

<span className="badge rounded-pill text-bg-danger me-1">Cancel</span>

<span className="badge rounded-pill text-bg-danger me-1">Delete</span>

</div>

)

}

Giao diện sẽ được cơ bản như này

Mong muốn khi click vào button Change language EN - VI sẽ đổi text của bốn label tương ứng

3. Tạo các file ngôn ngữ Anh – Việt

Tạo file tiếng Anh

<span class="token punctuation">{</span>
  <span class="token property">"common"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">"button"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token property">"search"</span><span class="token operator">:</span> <span class="token string">"Search"</span><span class="token punctuation">,</span>
      <span class="token property">"cancel"</span><span class="token operator">:</span> <span class="token string">"Cancel"</span><span class="token punctuation">,</span>
      <span class="token property">"delete"</span><span class="token operator">:</span> <span class="token string">"Delete"</span><span class="token punctuation">,</span>
      <span class="token property">"save"</span><span class="token operator">:</span> <span class="token string">"Save"</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

{

"common": {

"button": {

"search": "Search",

"cancel": "Cancel",

"delete": "Delete",

"save": "Save"

}

Tạo file tiếng Việt

<span class="token punctuation">{</span>
  <span class="token property">"common"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">"button"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token property">"search"</span><span class="token operator">:</span> <span class="token string">"Tìm kiếm"</span><span class="token punctuation">,</span>
      <span class="token property">"cancel"</span><span class="token operator">:</span> <span class="token string">"Hủy"</span><span class="token punctuation">,</span>
      <span class="token property">"delete"</span><span class="token operator">:</span> <span class="token string">"Xóa"</span><span class="token punctuation">,</span>
      <span class="token property">"save"</span><span class="token operator">:</span> <span class="token string">"Lưu"</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

{

"common": {

"button": {

"search": "Tìm kiếm",

"cancel": "Hủy",

"delete": "Xóa",

"save": "Lưu"

}

4. Config ngôn ngữ

Để tiện theo dõi thì mình tạo file riêng để config ngôn ngữ

<span class="token keyword">import</span> i18next <span class="token keyword">from</span> <span class="token string">'i18next'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> initReactI18next <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-i18next'</span>
<span class="token keyword">import</span> translationEN <span class="token keyword">from</span> <span class="token string">'../locales/en/translation.json'</span>
<span class="token keyword">import</span> translationVI <span class="token keyword">from</span> <span class="token string">'../locales/vi/translation.json'</span>

<span class="token keyword">const</span> resources <span class="token operator">=</span> <span class="token punctuation">{</span>
  en<span class="token operator">:</span> <span class="token punctuation">{</span> translation<span class="token operator">:</span> translationEN <span class="token punctuation">}</span><span class="token punctuation">,</span>
  vi<span class="token operator">:</span> <span class="token punctuation">{</span> translation<span class="token operator">:</span> translationVI <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

i18next<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>initReactI18next<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  lng<span class="token operator">:</span> <span class="token string">'en'</span><span class="token punctuation">,</span> <span class="token comment">// if you're using a language detector, do not define the lng option</span>
  debug<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  resources
<span class="token punctuation">}</span><span class="token punctuation">)</span>

import i18next from 'i18next'

import { initReactI18next } from 'react-i18next'

import translationEN from '../locales/en/translation.json'

import translationVI from '../locales/vi/translation.json'

const resources = {

en: { translation: translationEN },

vi: { translation: translationVI }

};

i18next.use(initReactI18next).init({

lng: 'en', // if you're using a language detector, do not define the lng option

debug: true,

resources

})

Load file này vào trong file index luôn

<span class="token keyword">import</span> <span class="token string">'./config-translation'</span> <span class="token comment">// &lt;=== thêm here</span>
<span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span>
<span class="token keyword">import</span> ReactDOM <span class="token keyword">from</span> <span class="token string">'react-dom/client'</span>
<span class="token keyword">import</span> <span class="token string">'./index.css'</span>
<span class="token keyword">import</span> App <span class="token keyword">from</span> <span class="token string">'./App'</span>
<span class="token keyword">import</span> reportWebVitals <span class="token keyword">from</span> <span class="token string">'./reportWebVitals'</span>

<span class="token keyword">const</span> root <span class="token operator">=</span> ReactDOM<span class="token punctuation">.</span><span class="token function">createRoot</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'root'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
root<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
  <span class="token operator">&lt;</span>React<span class="token punctuation">.</span>StrictMode<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>App <span class="token operator">/</span><span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>React<span class="token punctuation">.</span>StrictMode<span class="token operator">&gt;</span>
<span class="token punctuation">)</span>

<span class="token comment">// If you want to start measuring performance in your app, pass a function</span>
<span class="token comment">// to log results (for example: reportWebVitals(console.log))</span>
<span class="token comment">// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals</span>
<span class="token function">reportWebVitals</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

import './config-translation' // <=== thêm here

import React from 'react'

import ReactDOM from 'react-dom/client'

import './index.css'

import App from './App'

import reportWebVitals from './reportWebVitals'

const root = ReactDOM.createRoot(document.getElementById('root'))

root.render(

<React.StrictMode>

<App />

</React.StrictMode>

)

// If you want to start measuring performance in your app, pass a function

// to log results (for example: reportWebVitals(console.log))

// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

reportWebVitals()

5. Hiển thị

<span class="token keyword">import</span> <span class="token punctuation">{</span> useTranslation <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react-i18next"</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token punctuation">{</span> t <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useTranslation</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>container text-center<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>my-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">React i18n</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>btn btn-primary me-2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Change language EN - VI</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>badge rounded-pill text-bg-danger me-1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token punctuation">{</span><span class="token function">t</span><span class="token punctuation">(</span><span class="token string">"common.button.search"</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>badge rounded-pill text-bg-danger me-1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token punctuation">{</span><span class="token function">t</span><span class="token punctuation">(</span><span class="token string">"common.button.cancel"</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>badge rounded-pill text-bg-danger me-1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token punctuation">{</span><span class="token function">t</span><span class="token punctuation">(</span><span class="token string">"common.button.delete"</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>badge rounded-pill text-bg-danger me-1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token punctuation">{</span><span class="token function">t</span><span class="token punctuation">(</span><span class="token string">"common.button.save"</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

import { useTranslation } from "react-i18next";

const { t } = useTranslation();

return (

<h1 className="my-3">React i18n</h1>

<button className="btn btn-primary me-2">Change language EN - VI</button>

{t("common.button.search")}

</span>

{t("common.button.cancel")}

</span>

{t("common.button.delete")}

</span>

{t("common.button.save")}

</span>

</div>

);

}

6. Click chuyển ngôn ngữ

<span class="token keyword">import</span> <span class="token punctuation">{</span> useTranslation <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-i18next'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token punctuation">{</span> t<span class="token punctuation">,</span> i18n <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useTranslation</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token keyword">const</span> <span class="token punctuation">[</span>currentLanguage<span class="token punctuation">,</span> setCurrentLanguage<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token string">'en'</span><span class="token punctuation">)</span>

  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span>
      <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>btn btn-primary me-2<span class="token punctuation">"</span></span>
      <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token function">setCurrentLanguage</span><span class="token punctuation">(</span>currentLanguage <span class="token operator">===</span> <span class="token string">"en"</span> <span class="token operator">?</span> <span class="token string">"vi"</span> <span class="token operator">:</span> <span class="token string">"en"</span><span class="token punctuation">)</span>
        i18n<span class="token punctuation">.</span><span class="token function">changeLanguage</span><span class="token punctuation">(</span>currentLanguage <span class="token operator">===</span> <span class="token string">"en"</span> <span class="token operator">?</span> <span class="token string">"vi"</span> <span class="token operator">:</span> <span class="token string">"en"</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
    <span class="token punctuation">&gt;</span></span><span class="token plain-text">
      Change language EN - VI
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
  <span class="token punctuation">)</span>
<span class="token punctuation">}</span>

import { useState } from 'react'

const { t, i18n } = useTranslation()

const [currentLanguage, setCurrentLanguage] = useState('en')

return (

<button

className="btn btn-primary me-2"

onClick={() => {

setCurrentLanguage(currentLanguage === "en" ? "vi" : "en")

i18n.changeLanguage(currentLanguage === "en" ? "vi" : "en")

}}

>

Change language EN - VI

</button>

)

}

7. Demo

Demo online tại đây: https://codesandbox.io/s/react-i18n-c0yrc4?file=/src/App.tsx

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo

Setup đa ngôn ngữ i18n trong ReactJS

1. Tạo ứng dụng React cơ bản

2. Giao diện ban đầu

3. Tạo các file ngôn ngữ Anh – Việt

4. Config ngôn ngữ

5. Hiển thị

6. Click chuyển ngôn ngữ

7. Demo

TikTok trở thành nền tảng mảng xã hội lớn thứ hai ở Nam Phi

Mất giá nhanh nhất sau 9 tháng ra mắt, iPhone 14 Pro Max tiếp tục phá đáy tại Việt Nam

Hướng dẫn sử dụng ngôn ngữ R cho người mới bắt đầu

10 plugin cần thiết của SublimeText dành cho các lập trình viên JavaScript