หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ข้อมูลเว็บไซต์
ดาวน์โหลด

ReactJS-ToDoList

การแนะนำ

โปรเจ็กต์นี้ใช้ Front-End สำหรับเว็บแอปพลิเคชัน To-Do List แบบธรรมดา โดยใช้ไลบรารี React JS และยังมี Styled Components ที่แทนที่ CSS ล้วนๆ
ประกอบด้วยหน้าเข้าสู่ระบบและ UI ทั่วไปของแอป
ตรรกะการตรวจสอบสิทธิ์การเข้าสู่ระบบและฐานข้อมูลงานสำหรับผู้ใช้แต่ละรายไม่ได้ถูกนำมาใช้ เนื่องจากโปรเจ็กต์นี้มีวัตถุประสงค์เพื่อเป็นการศึกษา Front-End เท่านั้น

สาธิต

สาธิต.mp4

แรงบันดาลใจ

หน้าเข้าสู่ระบบได้รับแรงบันดาลใจในการออกแบบนี้โดย Jordan Hughes หน้าแรกได้รับแรงบันดาลใจในการออกแบบนี้โดย Mik Skuza

คุณสมบัติ

• หน้าเข้าสู่ระบบ รวมถึงปุ่มลงชื่อเข้าใช้ซึ่งเปลี่ยนเส้นทางไปยังแอปพลิเคชันหลัก
• UI แอปพลิเคชันพร้อมแถบนำทางด้านข้างและพื้นที่สำหรับรายการสิ่งที่ต้องทำ;
• เพิ่มงานใหม่ ตั้งชื่อและคุณสมบัติหมวดหมู่;
• ลบงาน โดยมีกิริยาช่วยเพื่อยืนยันการดำเนินการ
• ตรวจสอบงานว่าเสร็จสิ้นผ่านช่องทำเครื่องหมาย;
• กรองงานที่แสดงในรายการสิ่งที่ต้องทำด้วย "เสร็จสิ้น", "ยังไม่เสร็จ" หรือ "ทั้งหมด";
• กรองงานที่แสดงในรายการสิ่งที่ต้องทำตามหมวดหมู่ โดยการเลือกบนแถบด้านข้าง
• การอนุญาต: ผู้ใช้ไม่สามารถเข้าถึงหน้าแรกก่อนเข้าสู่ระบบ และหน้าเข้าสู่ระบบหลังจากเข้าสู่ระบบแล้ว

หมายเหตุ: ในปัจจุบัน ฟังก์ชัน "แก้ไขงาน" และการเพิ่มหรือลบหมวดหมู่ไม่ได้ถูกนำมาใช้ เนื่องจากฉันคิดว่ามันคงไม่มีส่วนช่วยในการเรียนรู้ส่วนตัวของฉันมากนัก และจะใช้เวลานานมาก บางทีฉันอาจจะใช้สิ่งนี้ในภายหลัง

การใช้งาน

หากคุณต้องการลองโครงการนี้ด้วยตัวเอง:

  1. ติดตั้ง Node บนเครื่องของคุณผ่าน https://nodejs.org/en/
  2. ติดตั้ง Yarn บนเครื่องของคุณผ่านคำสั่งเทอร์มินัล: sudo npm install -g yarn
  3. ติดตั้ง Git บนเครื่องของคุณผ่าน https://git-scm.com/downloads
  4. โคลนที่เก็บนี้ไปยังเครื่องของคุณ (เพิ่มเติมเกี่ยวกับวิธีการทำเช่นนี้ที่นี่)
  5. รัน yarn install บนเทอร์มินัล ภายในโฟลเดอร์ที่คุณดาวน์โหลดโปรเจ็กต์ เพื่อติดตั้งการอ้างอิงที่ใช้ทั้งหมด
  6. Run yarn start รันโปรเจ็กต์บนเบราว์เซอร์ของคุณ
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด