โต้ตอบบทช่วยสอนระดับกลาง: 3 ขั้นตอน

2024 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2024-01-30 13:04

ตอบโต้บทช่วยสอนระดับกลาง

ดูสินค้าสำเร็จรูปได้ที่นี่

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

คุณจะสร้างรายการสิ่งที่ต้องทำอย่างง่ายด้วย React.js และเรียนรู้เกี่ยวกับส่วนที่ซับซ้อนมากขึ้นของปฏิกิริยา ข้อกำหนดเบื้องต้น (แนะนำเป็นอย่างยิ่ง) กรอกคู่มือเริ่มต้น react.js ความรู้เกี่ยวกับ HTMLความรู้เกี่ยวกับคำสั่งเชลล์ CSSBasic ความรู้ที่ดีใน JavaScript

เสบียง

ซอฟต์แวร์ทั้งหมดจะกล่าวถึงในบทช่วยสอน

คุณจะต้องใช้คอมพิวเตอร์ที่ติดตั้งซอฟต์แวร์ต่อไปนี้:

• npm/เส้นด้าย
• IDE ที่รองรับ js
• เว็บเบราว์เซอร์

ขั้นตอนที่ 1: ตอบโต้บทช่วยสอนระดับกลาง

เริ่มต้น

ทำไมต้อง React.js?

ด้วย React.js ประเด็นคือการใช้รหัสซ้ำ ตัวอย่างเช่น สมมติว่าคุณมีแถบนำทางที่คุณมีใน 100 หน้า หากคุณต้องการเพิ่มหน้าใหม่ คุณต้องเปลี่ยนแถบนำทางในทุกหน้า ซึ่งหมายความว่าคุณต้องทำสิ่งเดียวกันสำหรับ 100 หน้า แม้จะใช้งานมาโครก็เป็นเรื่องที่น่าเบื่อหน่าย

การติดตั้งซอฟต์แวร์/แพ็คเกจที่จำเป็น

คุณจะต้องการ:

npm/เส้นด้าย

ติดตั้งอย่างไร:

1. ไปและติดตั้ง LTS ล่าสุดของ Node.js
2. ไม่บังคับ: หากคุณต้องการให้เส้นด้ายเป็นผู้จัดการแพ็คเกจของคุณ ให้ติดตั้งไหมพรมโดยพิมพ์ลงใน powershell npm install -g yarn
3. เปิด powershell/cmd.exe
4. ไปที่ไดเร็กทอรีที่คุณต้องการสร้างโครงการของคุณใน
5. พิมพ์ npx create-react-app

คุณได้เสร็จสิ้นขั้นตอนการตั้งค่า เพื่อทดสอบ ให้เปิด powershell ไปที่ไดเร็กทอรีโปรเจ็กต์ของคุณ แล้วพิมพ์ npm start คุณควรโหลดหน้าเว็บในเบราว์เซอร์เริ่มต้นของคุณ

ขั้นตอนที่ 2: ขั้นตอนที่ 1: เริ่มต้นใช้งาน

ในการเริ่มต้น ให้ลบไฟล์ต่อไปนี้ออกจากไดเร็กทอรี /src ของคุณ:

• App.test.js
• index.css
• logo.svg
• serviceWorker.js
• setupTests.js

เราไม่ต้องการไฟล์เหล่านี้

มาจัดระเบียบระบบไฟล์ของเราด้วย สร้างไดเร็กทอรีเหล่านี้ใน /src/:

• js
• css

ใส่ App.js ลงใน js dir และ App.css ลงใน css dir

ต่อไป มาจัดระเบียบการพึ่งพากันใหม่

ใน index.js ให้ลบการนำเข้าสำหรับ serviceWorker และ index.css ลบ serviceWorker.register(). Reroute เส้นทางสำหรับ App.

ใน App.js ให้ลบการนำเข้าสำหรับ logo.svg เนื่องจากเราไม่ต้องการมันอีกต่อไป เปลี่ยนเส้นทาง App.css ลบฟังก์ชัน App() และการส่งออกสำหรับ App

ใน React เรามี 2 วิธีในการกำหนดองค์ประกอบ เรามีฟังก์ชั่นและคลาส ฟังก์ชันมีไว้สำหรับไอเท็มที่ซับซ้อนน้อยกว่า และคลาสมักใช้สำหรับส่วนประกอบที่ซับซ้อนกว่า เนื่องจากรายการสิ่งที่ต้องทำนั้นซับซ้อนกว่า HTML จำนวนมาก เราจะใช้ไวยากรณ์ของคลาส

เพิ่มสิ่งนี้ในรหัสของคุณ:

pastebin.com/nGXeCpaH

html จะอยู่ภายใน 2 divs

มากำหนดองค์ประกอบกัน

pastebin.com/amjd0jnb

สังเกตว่าเรากำหนดมูลค่าในสถานะอย่างไร เราต้องการสิ่งนี้ในภายหลัง

ในฟังก์ชันการแสดงผล แทนที่ hi ด้วย {this.state.value}

เรากำลังแสดงค่าที่ส่งผ่านจากสถานะที่เรากำหนด

มาทดสอบกัน!

ในฟังก์ชันการแสดงผลของ App ให้แทนที่ด้วยสิ่งนี้:

pastebin.com/aGLX4jVE

ควรแสดงค่า: "test"

มาดูกันว่าเราสามารถแสดงผลหลายงานได้หรือไม่!

แทนที่จะให้ React แสดงผลเพียงองค์ประกอบเดียว เราสามารถสร้างอาร์เรย์ของและบอกให้ react แสดงผลอาร์เรย์แทน

เปลี่ยนฟังก์ชันการแสดงผลของสิ่งนี้:

pastebin.com/05nqsw71

สิ่งนี้ควรแสดงผล 10 งานที่แตกต่างกัน สังเกตว่าเราเพิ่มคีย์อย่างไร คีย์เหล่านี้ถูกใช้เป็นตัวระบุสำหรับการตอบสนองและเรา หากเราต้องการ

ตอนนี้รายการงานของเราใช้งานได้แล้ว เราพบวิธีโหลดงาน นี่คือที่ที่รัฐของเราเข้ามา

มาเพิ่มตัวสร้างให้กับไฟล์.

pastebin.com/9jHAz2AS

ในตัวสร้างนี้ เราย้าย taskArray ออกจากฟังก์ชันการเรนเดอร์ไปยังสถานะ ลบ taskArray และ for loop ในฟังก์ชันการแสดงผล เปลี่ยน taskArray ใน div เป็น this.state.taskArray

ถึงตอนนี้ โค้ด App.js ของคุณควรมีลักษณะดังนี้:

pastebin.com/1iNtUnE6

ขั้นตอนที่ 3: การเพิ่มวิธีการเพิ่มและลบวัตถุ

มาเพิ่มวิธีการเพิ่มและลบวัตถุกัน มาวางแผนกัน

เราต้องการอะไร?

• ช่องทางให้ผู้ใช้เพิ่มอ็อบเจกต์
• ที่สำหรับเก็บสิ่งของ
• วิธีการดึงวัตถุ

เราจะใช้อะไร

• องค์ประกอบ
• Localstorage API ที่มี JSON

เริ่มจากองค์ประกอบอินพุตกันก่อน

ด้านล่าง {this.state.taskArray} ให้เพิ่มอินพุตและปุ่มลงในโค้ดของคุณ

เพิ่ม

ตอนนี้ควรมีการป้อนข้อความและปุ่มเพิ่ม

ตอนนี้ไม่ทำอะไรเลย ให้เพิ่ม 6 วิธีในวิธีแอปของเรา

เราต้องการวิธีการเมื่อคลิกปุ่ม และเมื่อมีคนพิมพ์ข้อมูลเข้า เรายังต้องการวิธีสร้างอาร์เรย์งาน ตลอดจนบันทึก โหลด และลบงาน

มาเพิ่ม 6 วิธีเหล่านี้:

ปุ่มคลิก ()

อินพุตประเภท (evt)

สร้างTaskArray()

บันทึกงาน(งาน)

getTasks()

ลบงาน(id)

มาเพิ่มตัวแปรนี้ในสถานะของเราด้วย:

ป้อนข้อมูล

เราต้องผูกหน้าที่ของเรากับสิ่งนี้ด้วย

pastebin.com/syx465hD

มาเริ่มเพิ่มฟังก์ชันกัน

เพิ่ม 2 คุณลักษณะให้กับสิ่งที่ชอบ:

สิ่งนี้ทำให้เมื่อผู้ใช้พิมพ์อะไรในอินพุต มันจะรันฟังก์ชัน

เพิ่มแอตทริบิวต์ onClick ให้กับ Add ดังนี้:

เพิ่ม

เมื่อผู้ใช้คลิกปุ่ม ฟังก์ชันจะทำงาน

เมื่อส่วน html เสร็จแล้ว มาเริ่มใช้งานกันต่อ

ฉันได้เขียนอินเทอร์เฟซ localStorage API ไว้ล่วงหน้าแล้ว ดังนั้นให้แทนที่ฟังก์ชัน saveTasks, getTasks และ removeTask ด้วยสิ่งนี้:

pastebin.com/G02cMPbi

มาเริ่มกันที่ฟังก์ชัน inputTyped

เมื่อผู้ใช้พิมพ์ เราจำเป็นต้องเปลี่ยนค่าภายในของอินพุต

ลองทำโดยใช้ฟังก์ชัน setState ที่ให้มากับ react

this.setState({input: evt.target.value});

ด้วยวิธีนี้ เราจะได้ค่าของอินพุต

เมื่อเสร็จแล้ว เราสามารถทำงานกับฟังก์ชัน buttonClick

เราจำเป็นต้องเพิ่มงานลงในรายการงาน ก่อนอื่นเราดึงรายการงานจาก localStorage แก้ไขแล้วบันทึก จากนั้นเราจะเรียกการแสดงใหม่ของ taskList เพื่ออัปเดต

var taskList = this.getTasks();

taskList.tasks.push(this.state.input);

this.saveTasks(รายการงาน);

this.generateTaskArray();

เราได้รับงาน ดันค่าที่ป้อนเข้าไปในงาน แล้วบันทึก จากนั้นเราสร้างอาร์เรย์งาน

ตอนนี้ มาทำงานกับฟังก์ชัน generateTaskArray() กัน

เราจำเป็นต้อง:

• รับงาน
• สร้างอาร์เรย์ของส่วนประกอบงาน
• ส่งผ่านองค์ประกอบงานเพื่อแสดงผล

เราสามารถรับงานและเก็บไว้ในตัวแปรด้วย getTasks()

var งาน = getTasks().tasks

เราต้องสร้างอาร์เรย์และเติมข้อมูล

pastebin.com/9gNXvNWe

มันควรจะทำงานในขณะนี้

รหัสแหล่งที่มา:

github.com/bluininja1234/todo_list_instructables

ไอเดียพิเศษ:

ฟังก์ชั่นการลบ (ง่ายมาก เพิ่ม onclick และลบโดยใช้ removeTask จากดัชนีคีย์)

CSS (ง่าย ๆ เขียนเองหรือใช้บูตสแตรป)