react ui interactions

แรงบันดาลใจของ UI สำหรับ React

ตอบสนองการโต้ตอบของ UI

คอลเลกชันของแนวคิด UI ที่บรรจุลงในชุดของโครงการ React ขนาดเล็ก แนวคิดเบื้องหลังคือการใช้ประโยชน์จากแนวทางปฏิบัติของชุมชนล่าสุดเพื่อให้รูปแบบที่เป็นประโยชน์สำหรับโครงการในโลกแห่งความเป็นจริงของคุณ โดยการนำเสนอ องค์ประกอบ UI เฉพาะคุณจะได้เรียนรู้โซลูชันพื้นฐานและขั้นสูงที่ครอบคลุม: ภาพเคลื่อนไหวและการเปลี่ยนภาพ, ไมโครอินเทอร์แอคชั่น, การตอบสนอง, การนำทาง, การดึงข้อมูล, การจัดการสถานะ, การจัดการสถานะ

แรงจูงใจ

การสร้างเว็บแอปพลิเคชันต้องแก้ปัญหา UI มากมาย มีห้องสมุดมากมายที่ช่วยในการแก้ปัญหา pricular แต่บ่อยครั้งที่คุณจะได้รับการแก้ปัญหาของคุณเอง ในกรณีนี้ที่เก็บนี้ช่วยให้คุณค้นพบรูปแบบที่เป็นประโยชน์สำหรับความท้าทายทั่วไปในขณะที่ทำงานกับส่วนต่อประสานผู้ใช้ อย่างที่คุณอาจสังเกตเห็นโครงการเขียนด้วย React ฉันแค่รู้สึกสะดวกสบายในการใช้มัน อย่างไรก็ตามฉันคิดว่าโซลูชันที่นำเสนอที่นี่สามารถใช้งานได้สำเร็จในเฟรมเวิร์กตามองค์ประกอบอื่น ๆ

หลักการ

• โดยตรง - รวบรวมรหัสที่ชัดเจนและตั้งอยู่ร่วมซึ่ง ง่ายต่อการลบ และย้ายจากที่หนึ่งไปยังอีกที่หนึ่ง นี่คือการเพิ่มประสิทธิภาพสำหรับการเปลี่ยนแปลงเนื่องจากการเปลี่ยนแปลงเป็นสิ่งที่จะเกิดขึ้นในที่สุด รหัสเป็นโดยตรงและเฉพาะเจาะจงซึ่งทำให้ง่ายต่อการคัดลอกและปรับให้เข้ากับความต้องการของคุณ
• - ง่าย - วิธีเดียวที่จะบรรลุความยืดหยุ่นคือการทำให้สิ่งต่าง ๆ ง่ายและเปลี่ยนแปลงได้ง่ายเท่าที่จะทำได้ ตามการเพิ่มขึ้นของ "แย่กว่านั้นดีกว่า"

  การออกแบบจะต้องง่ายทั้งในการใช้งานและอินเทอร์เฟซ มันสำคัญกว่าที่อินเทอร์เฟซจะง่ายกว่าการใช้งาน

• - ไม่มีคลาส - เฉพาะส่วนประกอบที่ใช้งานได้
• ❣ hooks - ใช้ hooks ตลอดทาง (มีให้เป็นปฏิกิริยา 16.7.0 -alpha)
• - การแยกรหัส - ใช้ React.lazy พร้อมกับ import() และปล่อยให้ webpack ทำงาน
• ⏱ Suspense - React Suspense สำหรับการแยกรหัส
• - CSS-in-JS- มันขึ้นอยู่กับส่วนประกอบที่มีสไตล์สำหรับรูปลักษณ์และความรู้สึก
• - ส่งเสริมค่าเริ่มต้น - การกำหนดค่าน้อยที่สุดเท่าที่จะทำได้ ใช้ค่าเริ่มต้นทุกที่ที่ทำได้

วิธีใช้

• เพียงแค่คัดลอกและวางสิ่งที่คุณต้องการ
• ได้รับแรงบันดาลใจ ค้นหาโซลูชัน UI ที่คุณชอบและปรับให้เข้ากับสภาพแวดล้อมของคุณ

การพึ่งพาอาศัยกัน

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

• Reach Router เพราะมันเป็นแบบตรงไปตรงมา, คอมโพสิตและทำสิ่งที่ควรทำโดยตรง ไม่มีอะไรเพิ่มเติม
• Styled Components เพียงแค่ CSS ใน JS พร้อมเอกสารที่ยอดเยี่ยม ทำไมไม่ emotion ? ฉันไม่รู้. หากมีเหตุผลที่ฉันควรรู้โปรดแจ้งให้เราทราบ!
• React Spring เนื่องจาก UI สมัยใหม่มักถูกสร้างขึ้นจากแอนิเมชั่นที่มีความหมายทุกอย่างที่กระตุ้นให้ใช้มันยอดเยี่ยม เมื่อเร็ว ๆ นี้ห้องสมุดมี Hooks API ที่ดีซึ่งเล่นโดยตรงกับ DOM เพื่อประสิทธิภาพที่ดีขึ้น

ถูกกฎหมาย

ลิขสิทธิ์ใบอนุญาต MIT © 2019- ปัจจุบัน Mike Skowronek