ใช้ React และ i18next สร้างเว็บแสดงข้อมูลหลายภาษาแบบง่ายมาก ๆ

บทความนี้จะสาธิตการใช้ React และ i18next สร้างเว็บหลายภาษาทั้งเมนูและข้อมูลที่เรียกจาก API จำลองข้อมูลแหล่งท่องเที่ยวบนเว็บไซต์ MeCallAPI.com หลักๆ คือเรียก API จาก URL นี้นะครับ

https://www.mecallapi.com/api/th/attractions (ภาษาไทย)
https://www.mecallapi.com/api/en/attractions (ภาษาอังกฤษ)

Software Installation

เริ่มต้นสร้างแอป

npx create-react-app react-multi-languages
cd react-multi-languages
npm install react-i18next i18next
npm install @material-ui/core @material-ui/icons react-router-dom
npm start

Let’s Code!

สร้างไฟล์ i18n.js

แก้ไขไฟล์ index.js

สร้างไฟล์ App.js

สร้างไฟล์ AttractionsPage.js

สร้างไฟล์ Navbar.js

สร้างไฟล์ Attractions.js เรียกข้อมูลแหล่งท่องเที่ยวจากภาษาที่เลือกผ่าน API
API URL (METHOD GET):
https://www.mecallapi.com/api/th/attractions
https://www.mecallapi.com/api/en/attractions

สร้างไฟล์ AttractionCard.js

ผลลัพธ์

แสดงภาษาไทย
แสดงภาษาอังกฤษ

บทความโดย อ.ดร.กานต์ ยงศิริวิทย์
วิทยาลัยนวัตกรรมดิจิทัลเทคโนโลยี มหาวิทยาลัยรังสิต

--

--

Lecturer at Digital Innovation Technology, Rangsit University

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Karn Yongsiriwit

Karn Yongsiriwit

Lecturer at Digital Innovation Technology, Rangsit University