ปฏิกิริยาคืออะไร? แอนท์ดีไซน์คืออะไร?

React เป็นเฟรมเวิร์กการพัฒนา JavaScript ที่เปิดตัวโดย Facebook สำหรับการสร้างส่วนต่อประสานผู้ใช้ โดยส่วนใหญ่จะใช้เพื่อสร้าง UI ทำให้ง่ายต่อการสร้าง UI แบบโต้ตอบ Ant Design เป็นองค์ประกอบ UI ที่พัฒนาโดยทีมงาน Alibaba Ant Financial โดยใช้ React ส่วนใหญ่จะใช้สำหรับระบบระดับกลางและส่วนหลัง สร้างขึ้นโดยใช้ TypeScript และจัดเตรียมไฟล์คำจำกัดความประเภทที่สมบูรณ์

สภาพแวดล้อมการทำงานของบทช่วยสอนนี้: ระบบ Windows7, เวอร์ชัน react18, คอมพิวเตอร์ Dell G3

ปฏิกิริยาคืออะไร?

React เป็นไลบรารี JavaScript ที่ใช้ในการสร้างอินเทอร์เฟซผู้ใช้ มีต้นกำเนิดมาจากโครงการภายในของ Facebook เนื่องจากบริษัทไม่พอใจกับเฟรมเวิร์ก JavaScript MVC ทั้งหมดในตลาด จึงตัดสินใจเขียนเฟรมเวิร์กของตัวเองเพื่อสร้างเว็บไซต์ Instagram หลังจากที่สร้างมันขึ้นมา ฉันพบว่าชุดของสิ่งนี้มีประโยชน์มาก ดังนั้นจึงถูกเปิดซอร์สในเดือนพฤษภาคม 2013

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

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

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

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

คุณสมบัติ

การออกแบบที่เปิดเผย: React ใช้กระบวนทัศน์ที่เปิดเผย ซึ่งทำให้ง่ายต่อการอธิบายแอปพลิเคชัน

มีประสิทธิภาพ: React ลดการโต้ตอบกับ DOM ให้เหลือน้อยที่สุดโดยการจำลอง DOM

ยืดหยุ่น: React เล่นได้ดีกับไลบรารีหรือเฟรมเวิร์กที่รู้จัก

JSX: JSX เป็นส่วนขยายของไวยากรณ์ JavaScript React development ไม่จำเป็นต้องใช้ JSX แต่เราขอแนะนำ

ส่วนประกอบ: การสร้างส่วนประกอบผ่าน React ช่วยให้นำโค้ดกลับมาใช้ซ้ำได้ง่ายขึ้น และสามารถนำไปใช้ในการพัฒนาโปรเจ็กต์ขนาดใหญ่ได้ดี

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

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

แอนท์ดีไซน์คืออะไร?

Ant Design เป็นองค์ประกอบ UI ที่พัฒนาโดยทีมงาน Alibaba Ant Financial โดยใช้ React ส่วนใหญ่จะใช้สำหรับการใช้ระบบระดับกลางและส่วนหลัง

เว็บไซต์อย่างเป็นทางการ: https://ant.design/index-cn

ลักษณะ:

ภาษาเชิงโต้ตอบและสไตล์ภาพที่ดึงมาจากผลิตภัณฑ์ระดับกลางและส่วนหลังระดับองค์กร

ส่วนประกอบ React คุณภาพสูงพร้อมใช้งานทันทีตั้งแต่แกะกล่อง

สร้างโดยใช้ TypeScript โดยจัดเตรียมไฟล์คำจำกัดความประเภทที่สมบูรณ์

ระบบเครื่องมือการพัฒนาและออกแบบลิงค์แบบเต็ม

เริ่มต้นเลย

ขอแนะนำ Ant Desig

Ant Design คือระบบการออกแบบที่ให้บริการผลิตภัณฑ์ระดับองค์กร ไลบรารีส่วนประกอบคือการใช้งาน React ซึ่งได้รับการเผยแพร่เป็นแพ็คเกจ npm เพื่อให้นักพัฒนาติดตั้งและใช้งาน

คุณสามารถใช้ npm หรือ thread เพื่อการพัฒนาได้ ไม่เพียงแต่คุณสามารถแก้ไขจุดบกพร่องในสภาพแวดล้อมการพัฒนาได้อย่างง่ายดายเท่านั้น คุณยังสามารถจัดแพ็คเกจและปรับใช้ในสภาพแวดล้อมการผลิตได้อย่างปลอดภัย โดยเพลิดเพลินกับประโยชน์มากมายที่มาจากระบบนิเวศและห่วงโซ่เครื่องมือทั้งหมด

$ npm ติดตั้ง antd --save$ Yarn เพิ่ม antd

ใน umi คุณสามารถเปิดปลั๊กอิน antd ได้โดยการกำหนดค่า antd ในชุดปลั๊กอิน umi-plugin-react ปลั๊กอิน antd จะช่วยคุณแนะนำ antd และใช้การคอมไพล์ตามความต้องการ

กำหนดค่าในไฟล์ config.js:

ส่งออกเริ่มต้น { ปลั๊กอิน: [ ['umi-plugin-react', { dva: true, // เปิดใช้งานฟังก์ชัน dva antd: true // เปิดใช้งานฟังก์ชัน Ant Design}] ]};

ทดสอบทักษะของคุณ

ต่อไป เราจะเริ่มใช้ส่วนประกอบ antd โดยนำส่วนประกอบของแท็บมาเป็นตัวอย่าง ที่อยู่: https://ant.design/components/tabs-cn/ ผลกระทบ:

อ้างถึงตัวอย่างที่เป็นทางการ ใช้มัน และสร้างไฟล์ MyTabs.js:

นำเข้า React จาก 'react'import {Tabs} จาก 'antd'const TabPane = Tabs.TabPane;const callback = (key) => { console.log(key);}class MyTabs ขยาย React.Component { render() { return ( <Tabs defaultActiveKey="1" onChange={callback}> <TabPane tab="Tab 1" key="1">เนื้อหาของบานหน้าต่างแท็บ 1</TabPane> <TabPane tab="Tab 2" key="2" >เนื้อหาของบานหน้าต่างแท็บ 2</TabPane> <TabPane tab="Tab 3" key="3">เนื้อหาของบานหน้าต่างแท็บ 3</TabPane> </Tabs> ) }}ส่งออก MyTabs เริ่มต้น;

ผล:

ณ จุดนี้ เราได้เข้าใจการใช้พื้นฐานของส่วนประกอบ antd แล้ว