ความท้าทายนี้ตรงไปตรงมา เราต้องสร้างแอปดูวิกิพีเดียง่ายๆ ที่ผู้ใช้สามารถค้นหาบทความวิกิพีเดียใดๆ หรือโดยการกดปุ่ม แอปก็จะเปลี่ยนเส้นทางไปยังบทความแบบสุ่มบนวิกิ
คุณสามารถดูแอปได้แบบสด "ที่นี่" และที่เก็บ GitHub ที่มีโค้ดอยู่ "ที่นี่"
เช่นเดียวกับ "ความท้าทายครั้งก่อน" ฉันใช้ create-react-app เพื่อสร้างแอปพลิเคชันภายในไม่กี่วินาที จากนั้นฉันก็ดู Wikipedia API เพื่อดูว่ามันทำงานอย่างไร
แม้ว่าฉันน่าจะใช้ Axios เพื่อจัดการการเรียก API แต่ฉันใช้ Fetch API จากนั้นฉันก็วนซ้ำหน้าต่างๆ และแสดงหน้าเหล่านั้นแบบไดนามิกในรายการที่ไม่ได้ถูกจัดเรียง
มาร์กอัปประกอบด้วย container
ซึ่งตั้งค่าเป็นความกว้าง 960px
และเก็บ actions
div พร้อมด้วยช่องป้อนข้อมูลและปุ่มสำหรับบทความแบบสุ่ม และยังมี ul
สำหรับแสดงข้อความที่ตัดตอนมาจากวิกิพีเดียสำหรับแต่ละบทความที่ค้นหา
ฉันใช้เวลาส่วนใหญ่ในการออกแบบเพราะส่วน "การใช้งาน" นั้นง่ายมาก ฉันได้แรงบันดาลใจจากดีไซน์ "เลี้ยงบอล" นี้
สิ่งที่ควรทราบ:
- แทนที่จะใช้ปุ่มค้นหา ฉันกำลังอัปเดตผลลัพธ์โดยจัดการเหตุการณ์
onChange
ของช่องป้อนข้อมูล ทำให้แอปตอบสนองแบบเรียลไทม์ เมื่อผู้ใช้กดแต่ละคีย์ ระบบจะเรียกใช้ฟังก์ชันซึ่งจะอัปเดตรายการบทความวิกิพีเดีย - ในไฟล์
package.json
สำหรับบิลด์แอปพลิเคชันด้วย create-react-app ฉันเพิ่ม:"homepage" : "./"
ซึ่งชุดนี้เป็นเส้นทางสัมพันธ์กับ"./"
สำหรับแอปพลิเคชันทั้งหมด สิ่งนี้สำคัญที่ควรทราบ เพราะหากคุณไม่ได้ตั้งค่า หลังจากทำงานในเทอร์มินัล:npm run build
เพื่อรับแอปพลิเคชันที่พร้อมสำหรับการผลิต คุณจะไม่สามารถดูตัวอย่างบนเครื่องของคุณได้หากคุณเปิดไฟล์index.html
ข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้ "ที่นี่"
หากต้องการข้อมูลเพิ่มเติมเกี่ยวกับความท้าทายนี้และวิธีที่คุณสามารถเข้าร่วมได้ โปรดตรวจสอบพื้นที่เก็บข้อมูล GitHub ของ P1xt ที่นี่