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

ในทางตรงกันข้ามกับ ReactJS NodeJSมุ่งเน้นไปที่การทำงานฝั่งเซิร์ฟเวอร์และใช้เพื่อเขียนโค้ดไลบรารี JavaScript ที่ดำเนินการนอกอินเทอร์เน็ตเบราว์เซอร์

เหตุผลเบื้องหลังการรวม NodeJS & ReactJS

ตามที่ได้บอกไว้แล้วในหัวข้อข้างต้น NodeJS นั้นแตกต่างกันอย่างสิ้นเชิงในด้านฟังก์ชันการทำงานหรือความสามารถในการใช้งาน ReactJS - ในขณะที่ตัวหนึ่งรันบนฝั่งไคลเอ็นต์ส่วนอีกตัวทำงานบนฝั่งเซิร์ฟเวอร์

ตอนนี้รหัสและตรรกะทางธุรกิจบางอย่างไม่ทำงานที่ไคลเอนต์ (เช่นที่เบราว์เซอร์) มีข้อกำหนดบางประการที่ต้องดำเนินการตรวจสอบความถูกต้องเฉพาะหรือตรรกะทางธุรกิจที่ส่วนท้ายของเซิร์ฟเวอร์ ในสถานการณ์เช่นนี้ ReactJS จะรวมเข้ากับ NodeJS เพื่อให้คำขอที่ส่งโดย ReactJS ถูกขัดขวางโดย NodeJS ที่ส่วนท้ายของเซิร์ฟเวอร์ และดำเนินการตามกระบวนการตรวจสอบที่จำเป็น

การตั้งค่า React API ไปยังเซิร์ฟเวอร์ NodeJS

ขั้นตอนแรกในการตั้งค่าแอปพลิเคชัน React คือการติดตั้งเครื่องมือ "สร้างแอป React" ซึ่งสามารถช่วยในกระบวนการพัฒนาส่วนหน้า อย่างไรก็ตามแอปพลิเคชันนี้ไม่รองรับการดำเนินการฝั่งเซิร์ฟเวอร์ สำหรับสิ่งนี้ขั้นตอนต่อไปจะแสดงให้เห็นว่า 'เซิร์ฟเวอร์ Express Node' สามารถเชื่อมโยงแบบไดนามิกกับ React API ได้อย่างไร

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

ดังแสดงในรูปสภาพแวดล้อมโหนดถูกสร้างขึ้นในโค้ด มีปัจจัยสำคัญ 4 ประการที่ต้องได้รับการดูแล -

1. 'Node-env-run' - ฟังก์ชันนี้ช่วยในการโหลดตัวแปรสภาพแวดล้อมทั้งหมดที่เกี่ยวข้องกับไลบรารี NodeJS สำหรับการอ้างอิงเพิ่มเติม
2. 'Nodemon' - ฟังก์ชันนี้จะรีสตาร์ทเซิร์ฟเวอร์ NodeJS โดยอัตโนมัติเมื่อมีการเปลี่ยนแปลงใด ๆ เกิดขึ้นกับระบบที่มีอยู่
3. 'Npm-run-all' - ฟังก์ชันนี้ช่วยให้นักพัฒนาสามารถเรียกใช้สคริปต์ NodeJS หลายตัวพร้อมกันบนเซิร์ฟเวอร์
4. นอกเหนือจากฟังก์ชั่นเหล่านี้แล้วยังมีคุณสมบัติตัวบันทึกบางอย่างอีกด้วยซึ่งอ้างอิงเพื่อให้แน่ใจว่าการบันทึกเซิร์ฟเวอร์ถูกต้อง

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

เรียกใช้แอปพลิเคชัน React และเซิร์ฟเวอร์โหนดพร้อมกัน

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

เมื่อพร็อกซีเซิร์ฟเวอร์ชี้ไปที่พอร์ตที่ระบุ ขั้นตอนต่อไปคือการใช้สองฟังก์ชั่น - 'npm-run-all' (ซึ่งจะช่วยให้นักพัฒนาสามารถเรียกใช้ฟังก์ชันต่างๆบนเซิร์ฟเวอร์ได้) และ 'run-p' ซึ่งจะช่วยให้มั่นใจได้ว่ากระบวนการทำงานแบบขนานกัน สคริปต์ที่ใช้ในการดำเนินการนี้มีการระบุไว้ด้านล่างสำหรับการอ้างอิง -

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