ข้อตกลงโฟลเดอร์ฮุกและการวางการทดสอบไว้ใกล้กัน
สร้างข้อตกลงง่าย ๆ สำหรับฮุก (เติม use* ไว้ข้างหน้า เก็บตรรกะบริสุทธิ์) วางฮุกในโฟลเดอร์ฟีเจอร์ และวางการทดสอบไว้ข้างหน่วยที่ตรวจสอบ
ข้อตกลงโฟลเดอร์ฮุกและการวางการทดสอบไว้ใกล้กัน เป็นบทเรียน React Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน React Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส React Academy มีบทเรียนทั้งหมด 3 บทเรียน
ทำไมต้องมีแนวทางการใช้ฮุก
เป้าหมาย: ทำให้ฮุกเป็นระเบียบและทดสอบได้
- คำนำหน้า: use*
- ใช้ตรรกะบริสุทธิ์ภายในฮุก และวางส่วนติดต่อผู้ใช้ไว้ภายนอก
- วางการทดสอบไว้ใกล้หน่วย
แนวคิดการจัดวางโฟลเดอร์
- features/counter/useCounter.js
- features/counter/CounterPanel.jsx
- features/counter/useCounter.test.jsx
- ui/Button.jsx
รูปแบบฮุก: useCounter
ฮุกส่งคืน สถานะ + การดำเนินการ; ควรรักษาส่วนติดต่อการใช้งานให้เล็กและคาดเดาได้
<div id="root"></div>รูปแบบฮุก: การใช้ useToggle ซ้ำ
ฮุกขนาดเล็กนำกลับมาใช้ซ้ำได้ง่าย คอมโพเนนต์สองตัวใช้พฤติกรรมของ useToggle ร่วมกัน
<div id="root"></div>การทดสอบจำลอง: useCounter
เก็บไฟล์การทดสอบขนาดเล็กไว้ถัดจากฮุก เช่น useCounter.test.jsx ในที่นี้เราจำลองการตรวจสอบยืนยัน
<div id="root"></div>เคล็ดลับและรายการตรวจสอบ
- ตั้งชื่อฮุกด้วย use*
- รักษาฮุกให้ บริสุทธิ์ (ไม่มี DOM) และให้ส่งคืนส่วนติดต่อการใช้งานขนาดเล็ก
- วางการทดสอบไว้ใกล้กัน ถัดจากฮุกหรือคอมโพเนนต์
การตรวจสอบพื้นฐานเรื่องการวางไว้ใกล้กัน
สรุป
สรุป: วางฮุกขนาดเล็กที่บริสุทธิ์ไว้ในโฟลเดอร์ฟีเจอร์ ให้ส่งคืนส่วนติดต่อการใช้งานที่เรียบง่าย และเก็บการทดสอบไว้ถัดจากหน่วยเหล่านั้น เพื่อให้สิ่งเหล่านี้เคลื่อนย้ายไปด้วยกันระหว่างการรีแฟกทอริง
คำถามที่พบบ่อย
บทเรียน “ข้อตกลงโฟลเดอร์ฮุกและการวางการทดสอบไว้ใกล้กัน” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ข้อตกลงโฟลเดอร์ฮุกและการวางการทดสอบไว้ใกล้กัน” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส React Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส React Academy มีบทเรียนทั้งหมด 3 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ข้อตกลงโฟลเดอร์ฮุกและการวางการทดสอบไว้ใกล้กัน”
สร้างข้อตกลงง่าย ๆ สำหรับฮุก (เติม use* ไว้ข้างหน้า เก็บตรรกะบริสุทธิ์) วางฮุกในโฟลเดอร์ฟีเจอร์ และวางการทดสอบไว้ข้างหน่วยที่ตรวจสอบ คุณปฏิบัติ React Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน React Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน React Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 3 บทเรียน
บทเรียน “ข้อตกลงโฟลเดอร์ฮุกและการวางการทดสอบไว้ใกล้กัน” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน React Academy นี้ได้ไหม
ได้ บทเรียน React Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- โฟลเดอร์ฟีเจอร์และคอมโพเนนต์ UI กับคอมโพเนนต์ประกอบ
- ข้อตกลงโฟลเดอร์ฮุกและการวางการทดสอบไว้ใกล้กัน
- แนวทางการปรับโครงสร้างโค้ด