การติดตั้ง React.js บน Mac

ซอฟต์แวร์นี้เป็นไลบรารี JavaScript ส่วนหน้าแบบโอเพ่นซอร์สฟรี ในปี 2013 React.JS ก่อตั้งโดย Facebook

เป็นไลบรารีส่วนต่อประสานผู้ใช้ (UI) ที่ใช้ในการสร้างและจัดการส่วนประกอบ UI เป็นแพ็คเกจที่ช่วยให้นักพัฒนาสามารถสร้างแอพ SPA ที่ขับเคลื่อนด้วยข้อมูลที่มีประสิทธิภาพสูง

อิงตามการเขียนโปรแกรมเชิงฟังก์ชัน อาศัยแนวคิดเรื่องความไม่เปลี่ยนรูป และส่งเสริมสถาปัตยกรรมแบบคอมโพเนนต์ตามหลักการนำกลับมาใช้ซ้ำได้ครั้งเดียว

ในบทความนี้ เราจะพูดถึงขั้นตอนการติดตั้ง react บน mac หลังจากที่คุณเสร็จสิ้นขั้นตอนการติดตั้ง เราขอแนะนำให้คุณเข้าร่วมการฝึกอบรม React ออนไลน์

ให้เราสำรวจคำศัพท์ก่อน-

NodeJS และ NPM

• ก่อนอื่นคุณต้องติดตั้ง NodeJS และ NPM เพื่อติดตั้ง React บน Mac
• เป็นเอ็นจิ้น JavaScript ที่ให้คุณเรียกใช้นอกเบราว์เซอร์
• NPM (ตัวจัดการแพ็คเกจโหนด) ถูกใช้บนบรรทัดคำสั่ง คือการติดตั้งไลบรารี่อย่าง ReactJS
• คุณสามารถติดตั้ง NodeJS ผ่านเว็บไซต์ทางการได้ เมื่อคุณติดตั้ง NodeJS โปรแกรมจะดาวน์โหลด NPM ให้คุณด้วย
• หลังจากดาวน์โหลด NodeJS จากเว็บไซต์ของพวกเขาแล้ว ให้ค้นหาไฟล์ “.pkg” เพียงดับเบิลคลิกที่สิ่งนี้ มันจะเปิดป๊อปอัปสำหรับการติดตั้ง
• คุณจะถูกนำไปยังขั้นตอนการติดตั้ง คลิก "ติดตั้ง" หรือ "แก้ไขตำแหน่งการติดตั้ง"
• เมื่อกระบวนการเสร็จสมบูรณ์ คุณจะได้รับข้อความแจ้งขั้นสุดท้าย ติดตั้ง NodeJS และ NPM แล้ว

การติดตั้ง ReactJS บน MacOS

หลังจากติดตั้ง NodeJS และ NPM สามารถติดตั้ง ReactJS ได้ มันทำได้โดยดำเนินการ npm install- บันทึก react react-dom

สร้างโครงการ ReactJS

เนื่องจากเราได้ติดตั้ง ReactJS เราจึงสามารถสร้างไดเร็กทอรีโครงการตอบสนองใหม่ได้ ทำได้โดยการรัน npx create react project สร้างปฏิกิริยาแอป

ตอบสนอง- บทนำ

ก่อนดำเนินการติดตั้ง React-Lib บน Mac เราต้องทำความเข้าใจพื้นฐานเกี่ยวกับ React ก่อน

• React เป็นแพ็คเกจที่ช่วยนักพัฒนาเว็บและสถาปนิกในการตอบสนองความคาดหวังของลูกค้าที่ต้องการการไหลของข้อมูลสูงและ UI ที่ตอบสนองอย่างรวดเร็วในบริบทของข้อมูล
• มันถูกสร้างขึ้นบนสถาปัตยกรรมตามส่วนประกอบ หน้าเว็บสามารถแสดงด้วยองค์ประกอบหลักและองค์ประกอบย่อย
• ส่วนใหญ่อาศัย Virtual DOM ซึ่งทำหน้าที่เป็นเครื่องมือเพิ่มประสิทธิภาพสำหรับการดำเนินการ DOM
• หน้าเว็บ HTML มีแผนผัง DOM ซึ่งเบราว์เซอร์ใช้แสดงหน้าเว็บ

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

เบื้องหลัง เอกสาร HTML ผ่านการแปลงที่อนุญาตให้แชร์หน้าที่แก้ไขได้

ตามที่ระบุไว้ก่อนหน้านี้ ต้นไม้ DOM แสดงถึงเอกสาร HTML ในกรณีก่อนหน้านี้ DOM จำเป็นต้องมีการปรับเปลี่ยน ซึ่งรวมถึง การแทรกและการลบโหนด HTML เฉพาะ

ซึ่งช่วยในการแสดงข้อมูลสำคัญที่แสดงถึงสิ่งที่ผู้ใช้พยายามทำในบริบทของการแก้ไข

การตัดสินใจซื้อ

เราอาจเห็น DOM เป็นต้นไม้เพื่อให้เข้าใจได้ดีขึ้น

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

มีโทษหน่วยความจำที่เกี่ยวข้องกับการดำเนินการแทรกและลบนี้ใน HTML DOM ในแง่ของการดำเนินการอัปเดต DOM นั้น DOM เสมือนจะทำหน้าที่เป็นเครื่องมือเพิ่มประสิทธิภาพการทำงาน

โดยจะเก็บสำเนาไว้สองชุด: หนึ่งใน DOM จริง (react DOM) และหนึ่งในการอัปเดตที่ต้องทำ กระบวนการลดการปรับเปลี่ยนบน DOM ปฏิกิริยายังได้รับการวิจัยซึ่งเป็นส่วนหนึ่งของกระบวนการกระทบยอด

Node.js & npm

Node.js รันโค้ดของ JavaScript เป็นโอเพ่นซอร์สและข้ามแพลตฟอร์มไปยังสภาพแวดล้อมรันไทม์ JavaScript ขับเคลื่อนด้วยเครื่องยนต์ Chrome V8 เครื่องยนต์ Chrome V8 เขียนด้วย C ++ โหนดเข้ากันได้กับ Windows, Mac และ Linux

หลังจากติดตั้ง Node.js เราอาจเรียกใช้แอปที่ใช้ React ในระบบของเราในระหว่างการพัฒนา นอกจากนี้ยังช่วยให้เราสามารถปรับใช้โปรแกรมของเรากับเซิร์ฟเวอร์ที่ใช้งานจริงได้

Node.js มีคุณสมบัติดังต่อไปนี้:

• ใช้ JavaScript เป็นภาษาหลัก
• ไม่บล็อก I/O
• รองรับการเขียนโปรแกรมแบบอะซิงโครนัส
• สามารถจัดการคำขอเชื่อมต่อจำนวนมากโดยใช้เซิร์ฟเวอร์เดียว

Npmjs.org เป็นที่เก็บโค้ดออนไลน์ของโมดูลหลายพันโมดูล (npm) ที่ช่วยให้เราติดตั้งโมดูลโหนดโดยใช้คำสั่งง่ายๆ

บางโมดูลมีอยู่ในตัวเอง ในขณะที่บางโมดูลต้องการการพึ่งพาอาศัยกันเพื่อให้ทำงานได้อย่างถูกต้อง Node.js ช่วยให้เราดำเนินการอ่านและเขียนบนเซิร์ฟเวอร์ได้ นอกจากนี้ยังช่วยให้คุณสามารถทำงานกับฐานข้อมูลได้

แทนที่จะสร้างฟังก์ชันการทำงานตั้งแต่เริ่มต้น เราสามารถค้นหาโมดูลและนำกลับมาใช้ใหม่และเพิ่มฟังก์ชันการทำงานได้

การริเริ่มของนักพัฒนามักเกี่ยวข้องกับข้อจำกัดด้านเวลาและงบประมาณ เมื่อพูดถึงโหนด การพัฒนาตาม js, npmjs.org เป็นเส้นชีวิตสำหรับชุมชนนักพัฒนา

เพื่อสรุป

ในบทช่วยสอนนี้ เราได้เรียนรู้เกี่ยวกับ React.js และแนวทางสถาปัตยกรรมแบบอิงส่วนประกอบใน React.js นอกจากนี้เรายังได้รับภาพรวมระดับสูงของ DOM เสมือน

เราได้หารือเกี่ยวกับแนวคิดเรื่องการกระทบยอด การใช้ Node.js ในโลกของ JavaScript และความสามารถในการจัดการเอาต์พุต I/O ที่ไม่บล็อกเพื่อตอบสนองคำขอเชื่อมต่อไคลเอ็นต์พร้อมกัน

เราทดสอบสองเทคนิคในการติดตั้ง Node.js: หนึ่งใช้การจัดการแพ็คเกจและอีกวิธีหนึ่งใช้บรรทัดคำสั่ง

ในการเริ่มต้นอย่างรวดเร็วโดยใช้ React.js เราใช้โมดูล create-react-app เราอาจใช้บรรทัดคำสั่งเพื่อติดตั้ง React.js

เพื่อหลีกเลี่ยงไม่ให้รายละเอียดมากเกินไป เราใช้เทคนิค create-react-app สำหรับบทช่วยสอนนี้ เราเห็นแอปตอบสนองแรกของเราที่ทำงานหลังจากพัฒนา เราประเมินไฟล์สำคัญที่ใช้แอปอย่างรวดเร็วเพื่อทำความคุ้นเคยกับโค้ดจากมุมมองด้านการพัฒนา

อ่านเพิ่มเติม:

• Mac Viruses มีชีวิต ฆ่าพวกมันและอยู่ในความสงบ!