หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

เว็บไซต์อีคอมเมิร์ซของ Amazona

อมาโซน่า

บทช่วยสอน React & Node - อีคอมเมิร์ซเต็มรูปแบบใน 9 ชั่วโมง [2021]

ยินดีต้อนรับสู่บทช่วยสอน React และ Node ของฉันเพื่อสร้างเว็บไซต์อีคอมเมิร์ซที่มีฟังก์ชันครบถ้วนเหมือนกับ Amazon เปิดตัวแก้ไขโค้ดของคุณและติดตามฉันในชั่วโมงถัดไปเพื่อสร้างเว็บไซต์อีคอมเมิร์ซโดยใช้สแต็ก MERN (MongoDB, ExpressJS, React และ Node.JS)

เว็บไซต์สาธิต

  • เฮโรกุ : https://react-amazona.herokuapp.com

  • กระจก Heroku: https://react-amazona-mirror.herokuapp.com

คุณจะได้เรียนรู้

  • HTML5 และ CSS3: องค์ประกอบความหมาย, ตาราง CSS, Flexbox

  • ตอบสนอง: ส่วนประกอบ อุปกรณ์ประกอบฉาก เหตุการณ์ ตะขอ เราเตอร์ Axios

  • Redux: ร้านค้า ตัวลด การดำเนินการ

  • Node & Express: Web API, Body Parser, การอัพโหลดไฟล์, JWT

  • MongoDB: พังพอน การรวมตัว

  • การพัฒนา: ESLint, Babel, Git, Github,

  • การปรับใช้: Heroku

  • ดูบทช่วยสอน React & Node

เรียกใช้ในพื้นที่

1. โคลน repo 

$ git clone [email protected]:basir/amazona.git
$ cd amazona

2. ตั้งค่า MongoDB

  • MongoDB ท้องถิ่น

    • ติดตั้งได้จากที่นี่

    • สร้างไฟล์ .env ในโฟลเดอร์รูท

    • ตั้งค่า MONGODB_URL=mongodb://localhost/amazona

  • Atlas คลาวด์ MongoDB

    • สร้างฐานข้อมูลที่ https://cloud.mongodb.com

    • สร้างไฟล์ .env ในโฟลเดอร์รูท

    • ตั้งค่า MONGODB_URL=mongodb+srv://your-db-connection

3. เรียกใช้แบ็กเอนด์ 

$ npm install
$ npm start

4. เรียกใช้ส่วนหน้า 

# open new terminal
$ cd frontend
$ npm install
$ npm start

5. ผู้ใช้เมล็ดพันธุ์และผลิตภัณฑ์

  • เรียกใช้สิ่งนี้บน Chrome: http://localhost:5000/api/users/seed

  • จะส่งคืนอีเมลและรหัสผ่านของผู้ดูแลระบบ

  • รันสิ่งนี้บน Chrome: http://localhost:5000/api/products/seed

  • สร้างผลิตภัณฑ์ตัวอย่าง 6 รายการ

6. เข้าสู่ระบบของผู้ดูแลระบบ

  • เรียกใช้ http://localhost:3000/signin

  • กรอกอีเมลและรหัสผ่านของผู้ดูแลระบบแล้วคลิกลงชื่อเข้าใช้

สนับสนุน

  • ถาม/ตอบ: https://webacademy.pro/amazona

  • ติดต่ออาจารย์ผู้สอน: Basir

บทเรียน

  1. ข้อมูลเบื้องต้นเกี่ยวกับหลักสูตรนี้

    1. สิ่งที่คุณจะสร้าง

    2. สิ่งที่คุณจะได้เรียนรู้

    3. ซึ่งเป็นผู้ชม

  2. ติดตั้งเครื่องมือ

    1. โปรแกรมแก้ไขโค้ด

    2. เว็บเบราว์เซอร์

    3. ส่วนขยายรหัส VS

  3. เทมเพลตเว็บไซต์

    1. สร้างโฟลเดอร์อเมโซน่า

    2. สร้างโฟลเดอร์เทมเพลต

    3. สร้างดัชนี.html

    4. เพิ่มรหัส HTML เริ่มต้น

    5. ลิงค์ไปที่ style.css

    6. สร้างส่วนหัว หลัก และส่วนท้าย

    7. องค์ประกอบสไตล์

  4. แสดงผลิตภัณฑ์

    1. สร้างแผนกผลิตภัณฑ์

    2. เพิ่มคุณลักษณะของผลิตภัณฑ์

    3. เพิ่มลิงค์ รูปภาพ ชื่อ และราคา

  5. สร้างแอป React

    1. ส่วนหน้าของแอป create-react-app

    2. เวลา 13.00 น. เริ่มต้น

    3. ลบไฟล์ที่ไม่ได้ใช้

    4. คัดลอกเนื้อหา index.html ไปยัง App.js

    5. คัดลอกเนื้อหา style.css ไปยัง index.css

    6. แทนที่คลาสด้วย className

  6. แบ่งปันรหัสบน Github

    1. เริ่มต้นพื้นที่เก็บข้อมูล git

    2. ยอมรับการเปลี่ยนแปลง

    3. สร้างบัญชี GitHub

    4. สร้าง repo บน github

    5. เชื่อมต่อ repo ท้องถิ่นกับ repo github

    6. ผลักดันการเปลี่ยนแปลงไปยัง GitHub

  7. สร้างการให้คะแนนและส่วนประกอบของผลิตภัณฑ์

    1. สร้างส่วนประกอบ/Rating.js

    2. สร้าง div.rating

    3. สไตล์ div.rating, span และ span สุดท้าย

    4. สร้างส่วนประกอบผลิตภัณฑ์

    5. ใช้ส่วนประกอบการให้คะแนน

  8. สร้างหน้าจอผลิตภัณฑ์

    1. ติดตั้ง react-router-dom

    2. ใช้ BrowserRouter และ Route สำหรับหน้าจอหลัก

    3. สร้าง HomeScreen.js

    4. เพิ่มรหัสรายการผลิตภัณฑ์ที่นั่น

    5. สร้าง ProductScreen.js

    6. เพิ่มเส้นทางใหม่จากรายละเอียดผลิตภัณฑ์ไปยัง App.js

    7. สร้าง 3 คอลัมน์สำหรับรูปภาพผลิตภัณฑ์ ข้อมูล และการดำเนินการ

  9. สร้างเซิร์ฟเวอร์ Node.JS

    1. รัน npm init ในโฟลเดอร์รูท

    2. อัปเดตประเภทชุด package.json: โมดูล

    3. เพิ่ม .js ในการนำเข้า

    4. npm ติดตั้งด่วน

    5. สร้างเซิร์ฟเวอร์.js

    6. เพิ่มคำสั่ง start เป็น node backend/server.js

    7. ต้องการด่วน

    8. สร้างเส้นทางสำหรับ / กลับแบ็กเอนด์พร้อมแล้ว

    9. ย้าย products.js จากส่วนหน้าไปยังส่วนหลัง

    10. สร้างเส้นทางสำหรับ /api/products

    11. คืนสินค้า

    12. วิ่ง npm เริ่มต้น

  10. โหลดผลิตภัณฑ์จากแบ็กเอนด์

    1. แก้ไข HomeScreen.js

    2. กำหนดผลิตภัณฑ์ การบรรทุก และข้อผิดพลาด

    3. สร้าง useEffect

    4. กำหนด async fetchData และเรียกมัน

    5. ติดตั้ง axios

    6. รับข้อมูลจาก /api/products

    7. แสดงในรายการ

    8. สร้างส่วนประกอบกำลังโหลด

    9. สร้างส่วนประกอบกล่องข้อความ

    10. ใช้ในหน้าจอหลัก

  11. ติดตั้ง ESlint สำหรับ Code Linting

    1. ติดตั้งส่วนขยาย VSCode eslint

    2. การติดตั้ง npm -D eslint

    3. รัน ./node_modules/.bin/eslint --init

    4. สร้าง ./frontend/.env

    5. เพิ่ม SKIP_PREFLIGHT_CHECK=true

  12. เพิ่ม Redux ให้กับหน้าจอหลัก

    1. npm ติดตั้ง redux react-redux

    2. สร้าง store.js

    3. initState= {ผลิตภัณฑ์:[]}

    4. ตัวลด = (สถานะ, การกระทำ) => สวิตช์ LOAD_PRODUCTS: {ผลิตภัณฑ์: action.payload}

    5. ส่งออกค่าเริ่มต้น createStore (ตัวลด, initState)

    6. แก้ไข HomeScreen.js

    7. shopName = useSelector (รัฐ => state.products)

    8. const จัดส่ง = useDispatch()

    9. useEffect(()=>จัดส่ง ({ประเภท: LOAD_PRODUCTS, เพย์โหลด: ข้อมูล})

    10. เพิ่มร้านค้าใน index.js

  13. เพิ่ม Redux ลงในหน้าจอผลิตภัณฑ์

    1. สร้างค่าคงที่รายละเอียดผลิตภัณฑ์ การดำเนินการ และตัวลด

    2. เพิ่มตัวลดลงใน store.js

    3. ใช้การกระทำใน ProductScreen.js

    4. เพิ่ม /api/product/:id ไปที่แบ็กเอนด์ api

  14. จัดการปุ่มเพิ่มลงตะกร้า

    1. จัดการการหยิบลงตะกร้าใน ProductScreen.js

    2. สร้าง CartScreen.js

  15. ใช้การดำเนินการเพิ่มลงในรถเข็น

    1. สร้างค่าคงที่ การดำเนินการ และตัวลด addToCart

    2. เพิ่มตัวลดลงใน store.js

    3. ใช้การดำเนินการใน CartScreen.js

    4. แสดงผล cartItems.length

  16. สร้างหน้าจอรถเข็น

    1. สร้าง 2 คอลัมน์สำหรับรายการในรถเข็นและการดำเนินการในรถเข็น

    2. cartItems.length === 0 ? รถเข็นว่างเปล่า

    3. แสดงรูปภาพสินค้า ชื่อ จำนวน และราคา

    4. ดำเนินการต่อไปที่ปุ่มชำระเงิน

    5. ใช้การดำเนินการลบออกจากรถเข็น

  17. ใช้การดำเนินการลบออกจากรถเข็น

    1. สร้างค่าคงที่ การดำเนินการ และตัวลดของ RemoveFromCart

    2. เพิ่มตัวลดลงใน store.js

    3. ใช้การดำเนินการใน CartScreen.js

  18. สร้างผู้ใช้ตัวอย่างใน MongoDB

    1. npm ติดตั้งพังพอน

    2. เชื่อมต่อกับ mongodb

    3. สร้าง config.js

    4. npm ติดตั้ง dotenv

    5. ส่งออก MONGODB_URL

    6. สร้างโมเดล/userModel.js

    7. สร้าง userSchema และ userModel

    8. สร้างเส้นทางผู้ใช้

    9. ข้อมูลตัวอย่างเมล็ดพันธุ์

  19. สร้างผลิตภัณฑ์ตัวอย่างใน MongoDB

    1. สร้างโมเดล/productModel.js

    2. สร้าง productSchema และ productModel

    3. สร้างเส้นทางผลิตภัณฑ์

    4. ข้อมูลตัวอย่างเมล็ดพันธุ์

  20. สร้างแบ็กเอนด์การลงชื่อเข้าใช้

    1. สร้าง / ลงชื่อเข้าใช้ API

    2. ตรวจสอบอีเมลและรหัสผ่าน

    3. สร้างโทเค็น

    4. ติดตั้งโทเค็นเว็บ json

    5. ติดตั้ง dotenv

    6. โทเค็นการส่งคืนและข้อมูล

    7. ทดสอบโดยใช้บุรุษไปรษณีย์

  21. ออกแบบหน้าจอลงชื่อเข้าใช้

    1. สร้าง SigninScreen

    2. แสดงผลฟิลด์อีเมลและรหัสผ่าน

    3. สร้างค่าคงที่การลงชื่อเข้าใช้ การดำเนินการ และตัวลด

    4. อัปเดตส่วนหัวตามการเข้าสู่ระบบของผู้ใช้

  22. ใช้การดำเนินการ SignIn

    1. สร้างค่าคงที่การลงชื่อเข้าใช้ การดำเนินการ และตัวลด

    2. เพิ่มตัวลดลงใน store.js

    3. ใช้การดำเนินการใน SigninScreen.js

  23. สร้างหน้าจอลงทะเบียน

    1. สร้าง API สำหรับ /api/users/register

    2. ใส่ผู้ใช้ใหม่ลงในฐานข้อมูล

    3. ส่งคืนข้อมูลผู้ใช้และโทเค็น

    4. สร้าง RegisterScreen

    5. เพิ่มฟิลด์

    6. ฟิลด์สไตล์

    7. เพิ่มหน้าจอใน App.js

    8. สร้างการดำเนินการลงทะเบียนและตัวลด

    9. ตรวจสอบความถูกต้องและสร้างผู้ใช้

  24. สร้างหน้าจอการจัดส่งสินค้า

    1. สร้างส่วนประกอบ CheckoutSteps.js

    2. สร้างเขตข้อมูลการจัดส่ง

    3. ใช้ค่าคงที่การขนส่ง การดำเนินการ และตัวลด

  25. สร้างหน้าจอการชำระเงิน

    1. สร้างช่องการชำระเงิน

    2. ใช้ค่าคงที่การขนส่ง การดำเนินการ และตัวลด

  26. ออกแบบหน้าจอสั่งซื้อ

    1. ฟิลด์สรุปคำสั่งการออกแบบ

    2. การดำเนินการสั่งการออกแบบ

  27. สร้าง Place Order API

    1. createOrder api

    2. สร้าง orderModel

    3. สร้างคำสั่งเราเตอร์

    4. สร้างเส้นทางการโพสต์คำสั่งซื้อ

  28. ใช้การดำเนินการ PlaceOrder

    1. จัดการปุ่มสั่งซื้อคลิก

    2. สร้างค่าคงที่ลำดับสถานที่ การดำเนินการ และตัวลด

  29. สร้างหน้าจอการสั่งซื้อ

    1. สร้าง api คำสั่งซื้อสำหรับ /api/orders/:id

    2. สร้าง OrderScreen.js

    3. จัดส่งการดำเนินการรายละเอียดคำสั่งซื้อใน useEffect

    4. โหลดข้อมูลด้วย useSelector

    5. แสดงข้อมูลเช่นหน้าจอสั่งซื้อ

    6. สร้างรายละเอียดการสั่งซื้อคงที่ การกระทำ และลด

  30. เพิ่มปุ่ม PayPal

    1. รับรหัสลูกค้าจาก paypal

    2. ตั้งเป็นไฟล์ .env

    3. สร้างแบบฟอร์มเส้นทาง /api/paypal/clientId

    4. สร้าง getPaypalClientID ใน api.js

    5. เพิ่มสคริปต์การชำระเงิน paypal ใน OrderScreen.js

    6. แสดงปุ่ม paypal

  31. ดำเนินการชำระเงินตามคำสั่งซื้อ

    1. อัปเดตคำสั่งซื้อหลังการชำระเงิน

    2. สร้าง payOrder ใน api.js

    3. สร้างเส้นทางสำหรับ /:id/pay ใน orderRouter.js

    4. แสดงผลอีกครั้งหลังจากชำระเงินแล้ว

  32. แสดงประวัติการสั่งซื้อ

    1. สร้าง API คำสั่งซื้อของลูกค้า

    2. สร้าง API สำหรับ getMyOrders

    3. แสดงคำสั่งซื้อในหน้าจอโปรไฟล์

    4. คำสั่งสไตล์

  33. แสดงโปรไฟล์ผู้ใช้

    1. สร้าง api รายละเอียดผู้ใช้

    2. แสดงข้อมูลผู้ใช้

  34. อัปเดตโปรไฟล์ผู้ใช้

    1. สร้าง API การอัปเดตผู้ใช้

    2. อัปเดตข้อมูลผู้ใช้

  35. สร้างมุมมองผู้ดูแลระบบ

    1. สร้างเมนูผู้ดูแลระบบ

    2. สร้างมิดเดิลแวร์ผู้ดูแลระบบในแบ็กเอนด์

    3. สร้างเส้นทางผู้ดูแลระบบในส่วนหน้า

  36. รายการผลิตภัณฑ์

    1. หน้าจอสร้างรายการสินค้า

    2. เพิ่มตัวลดเพื่อจัดเก็บ

    3. แสดงสินค้าบนหน้าจอ

  37. สร้างผลิตภัณฑ์

    1. สร้างสร้างผลิตภัณฑ์ API

    2. สร้างปุ่มสร้างผลิตภัณฑ์

    3. กำหนดผลิตภัณฑ์สร้างค่าคงที่ การกระทำ และตัวลด

    4. ใช้การดำเนินการในหน้าจอรายการผลิตภัณฑ์

  38. สร้างหน้าจอแก้ไขผลิตภัณฑ์

    1. สร้างหน้าจอแก้ไข

    2. กำหนดสถานะ

    3. สร้างฟิลด์

    4. โหลดรายละเอียดสินค้า

    5. เพิ่มเส้นทาง

  39. อัพเดทสินค้า

    1. กำหนดอัพเดต API

    2. กำหนดค่าคงที่การอัพเดตผลิตภัณฑ์ การดำเนินการ และตัวลด

    3. ใช้การดำเนินการในหน้าจอแก้ไขผลิตภัณฑ์

  40. อัปโหลดภาพผลิตภัณฑ์

    1. npm ติดตั้งมัลติเตอร์

    2. กำหนดเราเตอร์อัพโหลด

    3. สร้างโฟลเดอร์อัพโหลด

    4. จัดการส่วนหน้า

  41. ลบผลิตภัณฑ์

    1. สร้างลบ API ในแบ็กเอนด์

    2. สร้างค่าคงที่การลบ การดำเนินการ และตัวลด

    3. ใช้ในหน้าจอรายการสินค้า

  42. รายการคำสั่งซื้อ

    1. สร้าง API รายการคำสั่งซื้อ

    2. สร้างหน้าจอรายการสั่งซื้อ

    3. เพิ่มตัวลดเพื่อจัดเก็บ

    4. แสดงสินค้าบนหน้าจอ

  43. ลบคำสั่งซื้อ 2. สร้างการดำเนินการลบคำสั่งซื้อและตัวลด 3. เพิ่มการดำเนินการลบคำสั่งซื้อไปยังรายการคำสั่งซื้อ

  44. ส่งออเดอร์

    1. สร้างค่าคงที่ การดำเนินการ และตัวลดสำหรับการสั่งซื้อ

    2. เพิ่มการดำเนินการส่งมอบคำสั่งซื้อไปยังหน้าจอรายละเอียดคำสั่งซื้อ

  45. เผยแพร่ไปยัง Heroku

    1. สร้างที่เก็บคอมไพล์

    2. สร้างบัญชี heroku

    3. ติดตั้ง Heroku CLI

    4. เข้าสู่ระบบเฮโรกุ

    5. แอป Heroku: สร้าง Amazona

    6. แก้ไข package.json สำหรับบิลด์สคริปต์

    7. สร้างโปรไฟล์

    8. สร้างฐานข้อมูล mongodb atlas

    9. ตั้งค่าการเชื่อมต่อฐานข้อมูลในตัวแปร heroku env

    10. มุ่งมั่นและผลักดัน

  46. รายชื่อผู้ใช้

    1. สร้าง API สำหรับผู้ใช้รายการ

    2. สร้างหน้าจอรายการผู้ใช้

    3. สร้างรายละเอียดการสั่งซื้อคงที่ การกระทำ และลด

  47. ลบผู้ใช้

    1. สร้าง API สำหรับผู้ใช้ที่ถูกลบ

    2. สร้างรายละเอียดการสั่งซื้อคงที่ การกระทำ และลด

    3. ใช้การกระทำใน UserListScreen

  48. แก้ไขผู้ใช้

    1. สร้าง API สำหรับการอัพเดตผู้ใช้

    2. สร้าง UI หน้าจอแก้ไข

  49. ใช้มุมมองผู้ขาย

    1. เพิ่มเมนูผู้ขาย

    2. สร้างเส้นทางผู้ขาย

    3. รายการสินค้าสำหรับผู้ขาย

    4. รายการคำสั่งซื้อสำหรับผู้ขาย

    5. เพิ่มผู้ขายลงในหน้าจอรายการสินค้าและรายละเอียด

  50. สร้างหน้าผู้ขาย

    1. สร้างหน้าผู้ขาย

    2. อัพเดตส่วนประกอบของผลิตภัณฑ์และหน้าจอผลิตภัณฑ์

    3. อัพเดตเส้นทางผลิตภัณฑ์

  51. เพิ่มม้าหมุนผู้ขายสูงสุด

    1. ติดตั้ง react carousel

    2. ใช้การดำเนินการและตัวลดสำหรับผู้ขายชั้นนำ

    3. ใช้วงล้อโต้ตอบกับข้อมูลในหน้าจอหลัก

  52. บังคับสั่งซื้อสินค้าจากผู้ขายรายหนึ่ง

    1. อัปเดตการดำเนินการ addToCart เพื่อซื้อจากผู้ขายรายหนึ่งตามคำสั่งซื้อ

  53. สร้างช่องค้นหาและหน้าจอค้นหา

    1. สร้างแถบค้นหาใน Header.js

    2. เพิ่มสไตล์

    3. จัดการส่งแบบฟอร์ม

    4. แก้ไข parse url เพื่อรับสตริงการสืบค้น

    5. อัปเดต API รายการผลิตภัณฑ์สำหรับการค้นหาตามชื่อ

  54. เพิ่มตัวกรองการค้นหาขั้นสูง 1. กรองตามหมวดหมู่ 2. กรองตามช่วงราคา 3. กรองตามคะแนนเฉลี่ย

  55. ทำการค้นหาขั้นสูงให้สมบูรณ์ 1. กรองตามราคา 2. กรองตามคะแนน 3. เรียงลำดับตามราคา, คะแนน, ...

  56. ให้คะแนนและวิจารณ์ผลิตภัณฑ์ 1. ให้คะแนนผลิตภัณฑ์ 2. สร้างการดำเนินการและตัวลด

  57. เลือกที่อยู่ใน Google Map 1. สร้างข้อมูลประจำตัวของ Google Map 2. อัปเดตไฟล์ .env ด้วย Google Api Key 3. สร้าง api เพื่อส่ง google api ไปยังส่วนหน้า 4. สร้างหน้าจอแผนที่ 5. ดึงข้อมูล google api 6. getUserLocation 7. ติดตั้ง @react- google-maps/api 8. ใช้ในหน้าจอการจัดส่ง 9. นำแผนที่ไปใช้กับหน้าจอชำระเงิน

  58. BugFix: ทำงานภายในเครื่องโดยไม่มีปัญหา

    1. เพิ่มข้อมูลผู้ขายลงใน data.js

    2. ข้อมูลผลิตภัณฑ์เมล็ดพันธุ์พร้อมข้อมูลผู้ดูแลระบบในฐานะผู้ขาย

    3. แก้ไข isSeller และ isAdmin ในการอัปเดตผู้ใช้

    4. ลบการรับรองความถูกต้องออกจากรายละเอียดผู้ใช้

  59. ดำเนินการแบ่งหน้า

    1. เพิ่มการแบ่งหน้าให้กับเราเตอร์ผลิตภัณฑ์ในแบ็กเอนด์

    2. ใช้หมายเลขหน้ากับการดำเนินการและตัวลดขนาดในส่วนหน้า

    3. แสดงหมายเลขหน้าในหน้าจอค้นหา

  60. ใบเสร็จการสั่งซื้อทางอีเมลโดย mailgun 1. สร้างบัญชี mailgun 2. เพิ่มและยืนยันโดเมนของคุณเป็น mailgun 3. ติดตั้ง mailgun-js 4. ตั้งค่าคีย์ api ในไฟล์ env 5. เปลี่ยนคำสั่งจ่ายเงินใน orderRouter 6. ส่งอีเมลไปที่

  61. สร้างหน้าจอแดชบอร์ด

    1. สร้างข้อมูลแผนภูมิในแบ็กเอนด์

    2. หน้าจอสร้างแผนภูมิ

  62. ใช้แชทสดกับลูกค้า

    1. ใช้ socket io เพื่อสร้างแบ็กเอนด์

    2. สร้างส่วนประกอบกล่องแชท

    3. สร้างหน้าจอสนับสนุน

  63. อัปเกรดเป็น React 17, เราเตอร์ 6, Mongoose 6

    1. แบ็กเอนด์

    2. ถอนการติดตั้งและติดตั้งแพ็คเกจทั้งหมด

    3. ลบตัวเลือกในการเชื่อมต่อพังพอน

    4. ห่อ mailgun ลองจับตามลำดับเราเตอร์

    5. ส่วนหน้า

    6. ถอนการติดตั้งและติดตั้งแพ็คเกจทั้งหมด

    7. ลบในช่องค้นหา

    8. ห่อทั้งหมดเข้า

    9. แทนที่ด้วย <องค์ประกอบเส้นทาง={}>

    10. แทนที่ด้วย <องค์ประกอบเส้นทาง={ }/>

    11. แทนที่และด้วย

    12. อัปเดต PrivateRoute, AdminRoute และ SellerRoute

    13. แทนที่ push() ด้วย Navigate() จาก useNavigate

    14. แทนที่ props.match.params.id ด้วย const params = useParams();

    15. แทนที่ props.location.search ด้วย const { search } = useLocation(); และ URLSearchParams

    16. แทนที่ props.match.path ด้วย const {pathname} = useLocation();

    17. ใส่ userInfo ใน useEffect ใน ChatBox, SupportScreen

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด