Setup đa ngôn ngữ i18n trong ReactJS

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

<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ỉ

export default function App() { return ( <div className="container text-center"> <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> <span className="badge rounded-pill text-bg-danger me-1">Save</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

{ "common": { "button": { "search": "Search", "cancel": "Cancel", "delete": "Delete", "save": "Save" } }
}

• Tạo file tiếng Việt

{ "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ữ

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

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ị

import { useTranslation } from "react-i18next"; export default function App() { const { t } = useTranslation(); return ( <div className="container text-center"> <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"> {t("common.button.search")} </span> <span className="badge rounded-pill text-bg-danger me-1"> {t("common.button.cancel")} </span> <span className="badge rounded-pill text-bg-danger me-1"> {t("common.button.delete")} </span> <span className="badge rounded-pill text-bg-danger me-1"> {t("common.button.save")} </span> </div> );
}

6. Click chuyển ngôn ngữ

import { useTranslation } from 'react-i18next'
import { useState } from 'react' export default function App() { 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