ทำระบบ Login/Register ด้วย React Router และ Firebase Auth (TypeScript)

สำหรับบทความนี้ เป็นการทำระบบ Login/Register ด้วย React Router + Firebase Auth เวอร์ชั่นที่เป็น TypeScript ครับ ซึ่งเนื้อหาทั้งหมดแทบจะเหมือนกับเวอร์ชั่น JavaScript ฉะนั้นบทความนี้ ผมจะขอเอาส่วนที่ต้องแก้ หรือเปลี่ยน สำหรับ TypeScript เท่านั้นนะครับ หลักๆ คือเปลี่ยนไฟล์นามสกุลจาก .js เป็น .ts และ .jsx เป็น .tsx

สำหรับเนื้อหาใน workshop นี้จะแบ่งออกเป็น 2 เวอร์ชั่นคือ

1. เนื้อหา React Router + Firebase Authentication (JavaScript)
2. เนื้อหา React Router + Firebase Authentication (TypeScript) (บทความนี้)

เนื้อหาทั้งหมดอิงตามบทความด้านล่าง (JavaScript) และก็จะมีเนื้อหาเฉพาะที่ต้องแก้ไขนะครับ เนื้อหาหลักๆ เหมือน JavaScript ประมาณ 95% มีเปลี่ยนแค่ Type นิดเดียว

ทำระบบ Login/Register ด้วย React Router และ Firebase Auth (JavaScript)

ตัวอย่าง Workshop วิธีการทำระบบสมัครสมาชิก และเข้าสู่ระบบ โดยใช้ React.js ร่วมด้วย React Router และ Firebase Authentication โดยเนื้อหานี้ออกแบบมาสำหรับเรียนด้วยการลงมือทำ ฝึกฝน ตามตัวอย่างครับ อาจจะไม่ได้อธิบายลงลึกในแต่ละเนื้อหา ไม่จำเป็นต้องเข้าใจ 100% ครั

DEVAHOYChai Phonbopit

เริ่มต้นสร้างโปรเจ็ค

เริ่มโปรเจ็คด้วย Vite

pnpm create vite@latest

เลือกตั้งชื่อ รวมถึง เลือก React เป็นแบบ TypeScript

✔ Project name: … react-firebase-auth-ts
✔ Select a framework: › React
✔ Select a variant: › TypeScript