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

คุณสามารถดูแอปได้แบบสด "ที่นี่" และที่เก็บ GitHub ที่มีโค้ดอยู่ "ที่นี่"

เช่นเดียวกับ "ความท้าทายครั้งก่อน" ฉันใช้ create-react-app เพื่อสร้างแอปพลิเคชันภายในไม่กี่วินาที จากนั้นฉันก็ดู Wikipedia API เพื่อดูว่ามันทำงานอย่างไร

แม้ว่าฉันน่าจะใช้ Axios เพื่อจัดการการเรียก API แต่ฉันใช้ Fetch API จากนั้นฉันก็วนซ้ำหน้าต่างๆ และแสดงหน้าเหล่านั้นแบบไดนามิกในรายการที่ไม่ได้ถูกจัดเรียง

มาร์กอัปประกอบด้วย container ซึ่งตั้งค่าเป็นความกว้าง 960px และเก็บ actions div พร้อมด้วยช่องป้อนข้อมูลและปุ่มสำหรับบทความแบบสุ่ม และยังมี ul สำหรับแสดงข้อความที่ตัดตอนมาจากวิกิพีเดียสำหรับแต่ละบทความที่ค้นหา

ฉันใช้เวลาส่วนใหญ่ในการออกแบบเพราะส่วน "การใช้งาน" นั้นง่ายมาก ฉันได้แรงบันดาลใจจากดีไซน์ "เลี้ยงบอล" นี้

สิ่งที่ควรทราบ:

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

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