การสร้างแอปพลิเคชัน React ที่สามารถเข้าถึงได้ด้วยส่วนประกอบ React Aria

React Aria Components เป็นไลบรารีที่รวบรวมคอลเลกชันของส่วนประกอบที่ไม่ได้จัดรูปแบบซึ่งสร้างขึ้นบนตะขอของ React Aria

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

ทำความเข้าใจกับส่วนประกอบ React Aria

React Aria Components ให้การเข้าถึง การโต้ตอบของผู้ใช้ และพฤติกรรมตาม WAI-ARIA (Web Accessibility Initiative-เข้าถึงได้มากมาย แอปพลิเคชันอินเทอร์เน็ต) แนวทางปฏิบัติที่ดีที่สุด ต่างจากไลบรารี React Aria ซึ่งใช้ React hooks เพื่อสร้างส่วนประกอบของคุณ

ไลบรารี React Aria Components นำเสนออาร์เรย์องค์ประกอบในตัว เช่น ปุ่ม ช่องทำเครื่องหมาย และแถบเลื่อนที่ไม่ได้ตกแต่งด้วยสไตล์ใดๆ ดังนั้นจึงให้ความยืดหยุ่นแก่นักพัฒนาในการกำหนดรูปลักษณ์และบรรยากาศของซอฟต์แวร์ตามข้อกำหนดที่ต้องการ

ประโยชน์ของการใช้ส่วนประกอบ React Aria

การใช้ไลบรารี React Aria Components นำเสนอข้อดีมากมาย ครอบคลุม:

ส่วนประกอบ React Aria ปฏิบัติตามแนวทาง WAI-ARIA สำหรับการช่วยสำหรับการเข้าถึง ทำให้สามารถใช้งานฟังก์ชันและการใช้งานแอปพลิเคชันได้อย่างเต็มรูปแบบโดยบุคคลที่ใช้เทคโนโลยีช่วยเหลือ

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

React Aria นำเสนอแนวทางที่ครอบคลุมในการจัดการการโต้ตอบของผู้ใช้ผ่านวิธีการป้อนข้อมูลที่หลากหลาย เช่น แป้นพิมพ์ เมาส์ และอุปกรณ์สัมผัส

React Aria ให้การสนับสนุนที่ครอบคลุมสำหรับเค้าโครงภาษาจากขวาไปซ้าย (RTL) รวมถึงคุณสมบัติขั้นสูง เช่น การจัดรูปแบบวันที่และตัวเลข ซึ่งอำนวยความสะดวกในการพัฒนาแอปพลิเคชันเว็บข้ามวัฒนธรรมและหลายภาษา

การสร้างแอป React ด้วยส่วนประกอบ React Aria

ในการสร้างแอปพลิเคชัน React พื้นฐานโดยใช้ React Aria Components จำเป็นต้องสร้างโปรเจ็กต์ React ให้เป็นรากฐาน การใช้งาน React Aria Components ภายในแอปพลิเคชัน React สามารถทำได้โดยการใช้ Vite ซึ่งทำหน้าที่เป็นวิธีที่มีประสิทธิภาพในการสร้างและจัดการโปรเจ็กต์ดังกล่าว

การสร้างแอปพลิเคชัน React ของคุณ

หากต้องการสร้างโปรเจ็กต์ React โดยใช้ Vite ให้ดำเนินการคำสั่งถัดไปภายในอินเทอร์เฟซเทอร์มินัลของคุณ:

 npm init vite

การดำเนินการตามโค้ดที่ให้มาจะเริ่มต้นลำดับการสอบถามที่ออกแบบมาเพื่ออำนวยความสะดวกในการจัดตั้งโครงการ React ใหม่

ตัวอย่างเช่น:

เพื่อดำเนินโครงการต่อ จำเป็นต้องติดตั้งการขึ้นต่อกันที่จำเป็น เพื่อให้งานนี้สำเร็จ ให้รันโค้ดข้างต้นภายในสภาพแวดล้อมเทอร์มินัลของคุณ:

 cd react-aria-app

npm install

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

การติดตั้งส่วนประกอบ React Aria

หากต้องการติดตั้งไลบรารี React Aria Components โดยใช้ npm หรือ Yarn ผู้ใช้อาจดำเนินการคำสั่งเฉพาะภายในเทอร์มินัล โดยเฉพาะอย่างยิ่ง หากต้องการทำเช่นนั้นผ่านการใช้ npm คุณจะต้องพิมพ์คำสั่งต่อไปนี้ในเทอร์มินัล:

 npm install react-aria-components

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

 yarn add react-aria-components

ภายในบริบทของโครงการพัฒนาซอฟต์แวร์ที่เกี่ยวข้องกับการรวมไลบรารี React Aria Components การใช้คุณสมบัติของไลบรารีดังกล่าวเป็นไปได้แล้ว

การใช้ส่วนประกอบ React Aria

ไลบรารี React Aria Components มอบองค์ประกอบที่หลากหลายซึ่งช่วยปรับปรุงขั้นตอนการพัฒนาและเร่งฝีเท้าให้เร็วขึ้น เพื่อที่จะใช้ส่วนประกอบเหล่านี้ในโครงการของคุณ เพียงรวมส่วนประกอบเหล่านั้นลงในแอปพลิเคชันของคุณและแสดงไว้

ตัวอย่างเช่น:

 import React from "react";
import { Button, Popover, DialogTrigger, Dialog } from "react-aria-components";

function App() {
  return (
    <div>
      <DialogTrigger>
        <Button>Click Me</Button>
        <Popover>
          <Dialog>You clicked the button</Dialog>
        </Popover>
      </DialogTrigger>
    </div>
  );
}

export default App;

บล็อกโค้ดด้านบนนำเข้าส่วนประกอบ React หลายอย่าง ได้แก่"ปุ่ม",“Popover”,“DialogTrigger"และ"Dialog"จากไลบรารี"react-aria-components"ส่วนประกอบเหล่านี้รวมกันเป็นอินเทอร์เฟซที่เรียบง่ายพร้อมปุ่มที่เมื่อถูกคลิกจะทริกเกอร์การแสดงป๊อปโอเวอร์

ส่วนประกอบ DialogTrigger ทำหน้าที่เป็นตัวควบคุมสำหรับกำหนดการมองเห็นของกล่องโต้ตอบหรือป๊อปโอเวอร์ โดยที่การดำเนินการได้รับการอำนวยความสะดวกโดยองค์ประกอบ ปุ่ม ที่ฝังอยู่ภายใน เมื่อเปิดใช้งาน ปุ่มนี้จะทำให้หน้าจอ Popover และ Dialog ปรากฏขึ้นตามลำดับ

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

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

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

จัดแต่งทรงผมส่วนประกอบของคุณ

ส่วนประกอบ React Aria ได้รับการจัดเตรียมไว้ในสถานะที่ไม่มีการปรุงแต่ง ช่วยให้มีความยืดหยุ่นในการปรับแต่งรูปลักษณ์ผ่านการใช้เทคนิคการจัดสไตล์ที่ต้องการ เช่น การใช้ Cascading Style Sheets (CSS) ควบคุมพลังของ Tailwind CSS ผสมผสานส่วนประกอบที่มีสไตล์ หรือการเลือกใช้การออกแบบทางเลือกอื่น วิธีการเพื่อเพิ่มความสวยงาม

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

นี่คือตัวอย่าง:

 import React from "react";
import { Button, Popover, DialogTrigger, Dialog } from "react-aria-components";

function App() {
  return (
    <div>
      <DialogTrigger>
        <Button className="button">Click Me</Button>
        <Popover className="popover">
          <Dialog className="dialog">You clicked the button</Dialog>
        </Popover>
      </DialogTrigger>
    </div>
  );
}

export default App;

แน่นอน! ต่อไปนี้เป็นการใช้ถ้อยคำใหม่ที่สวยงามของประโยคนั้น: ในกรณีนี้ เรากำหนดคลาสที่กำหนดเองให้กับองค์ประกอบ Button, Popover และ Dialog แต่ละรายการโดยใช้แอตทริบิวต์ className ภายในโค้ด HTML ของเรา สิ่งนี้ช่วยให้เราสามารถใช้เทคนิคการจัดสไตล์ผ่านไฟล์ CSS แยกต่างหาก ทำให้มีความยืดหยุ่นมากขึ้นในการปรับแต่งรูปลักษณ์ของส่วนประกอบเหล่านี้ตามการตั้งค่าการออกแบบของเรา

 .button{
  margin-block-start: 1rem;
  border: none;
  color: #f2f2f2;
  background-color: #333333;
  padding: 0.7rem 0.8rem;
  border-radius: 12px;
  font-family: cursive;
}

.popover{
  padding: 1rem;
  background-color: antiquewhite;
  border-radius: 12px;
}

.dialog{
  outline: none;
}

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

หากคุณเลือกที่จะไม่ระบุแอตทริบิวต์คลาสเฉพาะสำหรับองค์ประกอบของคุณในเฟรมเวิร์ก React Aria Components โปรดมั่นใจได้ว่าไลบรารีจะให้การกำหนดคลาสเริ่มต้นสำหรับแต่ละองค์ประกอบ การจำแนกประเภทเริ่มต้นนี้มีรูปแบบ “react-aria-componentName” ซึ่ง “”componentName”” หมายถึงระบบการตั้งชื่อขององค์ประกอบเฉพาะที่กำลังจัดสไตล์

ตัวอย่างเช่น:

 .react-aria-Button{
  margin-block-start: 1rem;
  border: none;
  color: #f2f2f2;
  background-color: #333333;
  padding: 0.7rem 0.8rem;
  border-radius: 12px;
  font-family: cursive;
}

.react-aria-Popover{
  padding: 1rem;
  background-color: antiquewhite;
  border-radius: 12px;
}

.react-aria-Dialog{
  outline: none;
}

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

สร้างแอปพลิเคชัน React ที่เข้าถึงได้และโต้ตอบได้

React Aria Components เป็นเครื่องมือที่มีประสิทธิภาพสูงสำหรับการสร้างแอปพลิเคชันบน React ที่ครอบคลุมและไดนามิก โดยปฏิบัติตามมาตรฐาน Access Rich Internet Applications (WAI-ARIA) ของ World Wide Web Consortium ไลบรารี่ที่แข็งแกร่งนี้ประกอบด้วยองค์ประกอบที่หลากหลายซึ่งออกแบบมาเพื่อรองรับการโต้ตอบของผู้ใช้ที่หลากหลาย ในขณะเดียวกันก็รับประกันการเข้าถึงที่ราบรื่น สำหรับผู้ที่กำลังมองหาชุดส่วนประกอบที่ครอบคลุมพร้อมกับความคล่องตัวในกระบวนการพัฒนา React Aria Components คือตัวเลือกที่เหนือกว่า

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