React มีไลบรารีส่วนประกอบ ไลบรารีส่วนประกอบคือแผนการออกแบบที่จัดระเบียบส่วนประกอบต่างๆ เข้าด้วยกันเพื่อสร้างผ่านการผสมผสานหลายมิติ การออกแบบส่วนประกอบผ่านการถอดแยกชิ้นส่วน การเหนี่ยวนำ และการจัดโครงสร้างใหม่ขององค์ประกอบในฟังก์ชันและการแสดงออกทางภาพ จุดประสงค์คือการสร้างส่วนประกอบที่เป็นมาตรฐานสำหรับการตอบสนอง ได้แก่ Bulma, AntDesign, Bootstrap เป็นต้น
สภาพแวดล้อมการทำงานของบทช่วยสอนนี้: ระบบ Windows 10, รีแอคเวอร์ชัน 17.0.1, คอมพิวเตอร์ Dell G3
การออกแบบส่วนประกอบคือการแยกส่วน สรุป และจัดระเบียบองค์ประกอบในฟังก์ชันและการแสดงออกทางภาพใหม่ และสร้างส่วนประกอบที่เป็นมาตรฐานตามวัตถุประสงค์ของการนำกลับมาใช้ใหม่ แผนการออกแบบทั้งหมดถูกสร้างขึ้นผ่านการผสมผสานหลายมิติ และส่วนประกอบเหล่านี้ถูกจัดระเบียบไว้ด้วยกัน ถูกสร้างขึ้น
ไลบรารีส่วนประกอบปฏิกิริยาที่ใช้กันทั่วไป:
การออกแบบมด
ลิงค์โครงการ: Ant Design
ขนาดบันเดิล (จาก BundlePhobia): 1.2mB หลังการลดขนาด, 349.2kB หลังการลดขนาด + การบีบอัด gzip ลดขนาดด้วยการเขย่าต้นไม้
ข้อได้เปรียบ:
AntDesign มาพร้อมกับเอกสารสนับสนุนที่ครอบคลุม มีชุมชน รวมถึงโปรเจ็กต์แยกต่างหาก (AntDesignPro) พร้อมเทมเพลตที่สร้างไว้ล่วงหน้า
ไลบรารี UI ที่สามารถใช้เพื่อออกแบบแอปพลิเคชันแบ็กเอนด์/ภายในได้อย่างรวดเร็ว
ข้อบกพร่อง:
ขาดการเข้าถึง
มีขนาดใหญ่และคาดว่าจะมีผลกระทบอย่างมากต่อประสิทธิภาพ
ทำให้ CSS ของคุณเสียหาย (คาดว่าจะเพิ่ม !important เพื่อป้องกันไม่ให้จัดสไตล์ส่วนประกอบที่ไม่ใช่ Ant ของคุณ)
บูทสแตรป
จริงๆ แล้ว ฉันคิดว่า Bootstrap เป็นไลบรารี UI เป็นหลัก มันจะไม่ชนะรางวัลการออกแบบใดๆ เลย แต่สามารถใช้เพื่อทำโปรเจ็กต์ล้ำสมัยและผลิตภัณฑ์ขั้นต่ำที่ใช้งานได้ให้สำเร็จ
แต่ขึ้นอยู่กับสิ่งที่คุณต้องการใช้เพื่อ หากคุณยังใหม่กับ React นี่เป็นไลบรารี่ที่ยอดเยี่ยมสำหรับการเริ่มต้น สำหรับนักพัฒนาที่มีประสบการณ์มากขึ้น พวกเขาอาจพิจารณาองค์ประกอบสไตล์/อารมณ์
มีไลบรารียอดนิยมสองแห่งที่มีการผูก React สำหรับ Bootstrap โดยส่วนตัวแล้วฉันใช้เฉพาะ Reactstrap เท่านั้น
ลิงค์โครงการ: React Bootstrap
ขนาดบันเดิล (จาก BundlePhobia): 111kB หลังการลดขนาด, 34.4kB หลังการลดขนาด + gzip ลดขนาดด้วยการเขย่าต้นไม้
ลิงค์โครงการ: Reactstrap
ขนาดบันเดิล (จาก BundlePhobia): 152.1kB หลังการลดขนาด, 39.4kB หลังการลดขนาด + การบีบอัด gzip ลดขนาดด้วยการเขย่าต้นไม้
ข้อได้เปรียบ:
ไลบรารี Bootstrap พร้อม React Binding ที่ทุกคนชื่นชอบ
ปรับแต่งได้อย่างง่ายดายผ่าน CSS-in-JS;
ผ่านมายาวนานพอแล้วที่คุณไม่ต้องกังวลกับข้อบกพร่อง/ปัญหาต่างๆ
เริ่มต้นอย่างรวดเร็ว
ไม่มีการพึ่งพา jQuery เนื่องจากมีการใช้งานใหม่ทั้งหมดใน React
ข้อบกพร่อง:
นี่คือ Bootstrap: หากคุณไม่ได้ปรับแต่งมัน เว็บไซต์ของคุณก็จะดูเหมือนกับที่อื่น
บูลมา
Bulma แตกต่างจากไลบรารีอื่นๆ ที่แนะนำในบทความนี้ เนื่องจาก Bulma เป็นเฟรมเวิร์ก CSS ล้วนๆ และไม่ต้องใช้ JS คุณสามารถเลือกใช้คลาสจาก Bulma โดยตรง หรือใช้ไลบรารี wrapper เช่น react-bulma-components
ลิงค์โครงการ : บูลม่า
ลิงค์โครงการ: react-bulma-components
ขนาดบันเดิล (จาก BundlePhobia): ย่อขนาด 179kB, ย่อขนาด 20.1kB + บีบอัด gzip
ข้อได้เปรียบ:
มันจะไม่ทำให้เว็บไซต์ของคุณดูเหมือน Bootstrap;
เหมาะอย่างยิ่งสำหรับการเริ่มต้นใช้งานอย่างรวดเร็ว
คุณสมบัติที่ทันสมัย (Flexbox/Grid พื้นฐาน)
ข้อบกพร่อง:
การเข้าถึง: มีบางส่วน แต่ไม่เข้มงวดเท่ากับห้องสมุดอื่นๆ ที่ปฏิบัติตามแนวทาง WCAG
จักระ UI
ลิงค์โครงการ: ChakraUI
ขนาดแพ็คเกจ (จาก BundlePhobia): 326.2kB หลังการลดขนาด, 101.2kB หลังการลดขนาด + การบีบอัด gzip ลดขนาดด้วยการเขย่าต้นไม้
ข้อได้เปรียบ:
การเข้าถึง: ตามหลักเกณฑ์ WAI-ARIA ส่วนประกอบต่างๆ จะใช้แท็ก Aria;
ขับเคลื่อนโดยเซิร์ฟเวอร์ Discord;
ปรับแต่งได้ง่าย (พร้อมรองรับธีม);
โมดูลาร์สูง ดังนั้นการเขย่าต้นไม้จะเป็นการลบโค้ดที่คุณไม่ได้ใช้จริง ๆ
ข้อบกพร่อง:
ค่อนข้างใหม่
สังเกต:
มันใกล้เคียงกับ v1 มาก ดังนั้นโปรดระวังการเปลี่ยนแปลงที่เกิดขึ้นหลังจาก v0.8.0
UI วัสดุ
MaterialUI เป็นหนึ่งในห้องสมุดความรักและความเกลียดชังของฉัน มันช่วยให้ฉันผ่านเส้นตายของโครงการที่ตึงเครียดได้ในอดีต แต่สุดท้ายฉันก็จัดการมันให้เร็วที่สุดเสมอ
ในอดีต คุณสามารถปรับแต่งสไตล์ของ MaterialUI ได้ด้วยการเขียน JSS เท่านั้น แต่โชคดีที่ตอนนี้คุณสามารถแทนที่สไตล์ได้โดยใช้ styled-components และ Emotion
ลิงค์โครงการ: วัสดุ UI
ขนาดบันเดิล (จาก BundlePhobia): 325.7kB ย่อขนาด, 92kB ย่อขนาด + บีบอัด gizp, ลดลงจากการสั่นของต้นไม้
ข้อได้เปรียบ:
เอกสารครบถ้วน
ไลบรารี่ไอคอนมีขนาดใหญ่มาก
เรียบง่ายและใช้งานง่าย (สถานการณ์ที่จุดเริ่มต้น)
ข้อบกพร่อง:
ยากและเจ็บปวดในการปรับแต่ง แต่จำเป็น (เพื่อปรับปรุงภาพ)
ประสิทธิภาพการทำงาน: โหนด DOM มากเกินไปจะแสดงผล
แอปของคุณจะดูเหมือนผลิตภัณฑ์ของ Google (สำหรับบางคนอาจแสดงถึงรูปลักษณ์ที่เป็นมืออาชีพ)
UI ความหมาย
ลิงค์โครงการ: Semantic UI
ความหมาย-UI-ปฏิกิริยา
ขนาดแพ็คเกจ (จาก BundlePhobia): 300.8kB หลังการลดขนาด, 80.9kB หลังการลดขนาด + การบีบอัด gzip ลดขนาดด้วยการเขย่าต้นไม้
ข้อได้เปรียบ:
ประกอบได้ (ส่งส่วนประกอบที่ใช้เป็นเสา)
ง่ายต่อการปรับแต่ง
เอกสารที่เป็นประโยชน์
ผู้ใช้เป็นที่รู้จักดี (ใช้ภายในโดย Netflix และใช้โดยผลิตภัณฑ์ที่ออกโดย Amazon)
การสนับสนุน TypeScript
ข้อบกพร่อง:
ความไม่แน่นอนที่อาจเกิดขึ้นของโครงการโอเพ่นซอร์ส
ดูปัญหา:
https://github.com/Semantic-Org/Semantic-UI/issues/6109
https://github.com/Semantic-Org/Semantic-UI/issues/6413
ทางแยกที่ดำเนินการโดยชุมชน:
https://github.com/fomantic/Fomantic-UI
รางวัลชมเชย
เข้าถึง UI
ReachUI เป็นไลบรารีส่วนประกอบระดับต่ำที่ช่วยให้นักพัฒนาสามารถสร้างส่วนประกอบ React ที่สามารถเข้าถึงได้ในระบบการออกแบบของตน
ไม่มีขนาดแพ็คเกจเนื่องจากแต่ละส่วนประกอบจะถูกส่งออกแยกกันเป็นแพ็คเกจ npm ของตัวเอง
เรคิท
Reakit เป็นอีกหนึ่งไลบรารีส่วนประกอบระดับต่ำ ในทางเทคนิคแล้ว มันเป็นไลบรารี UI แต่ไม่มี CSS มาให้ ดังนั้นคุณยังคงต้องค้นหาวิธีแก้ปัญหาในการจัดแต่งทรงผม
ขนาดแพ็คเกจ (จาก BundlePhobia): 119.9kB หลังการลดขนาด, 32.1kB หลังการลดขนาด + การบีบอัด gzip ลดขนาดด้วยการเขย่าต้นไม้
รีเบส
ติดตาม Rebass มาสักระยะแล้ว เป็นไลบรารีส่วนประกอบที่มีประสิทธิภาพซึ่งไม่ได้มาพร้อมกับธีม แต่คุณสามารถเปลี่ยนธีมได้อย่างง่ายดาย สำหรับตัวอย่างการใช้งาน โปรดดูการสาธิต
ลิงค์โครงการ: Rebass
ขนาดมัด (จาก BundlePhobia): 43kB หลังการลดขนาด, 14.4kB หลังการลดขนาด + การบีบอัด gizp ลดขนาดด้วยการสั่นของต้นไม้