- ReactJS คืออะไร
- ทำไมต้องใช้ ReactJS
2.1 สถาปัตยกรรมตามส่วนประกอบ
2.2 เจเอสเอ็กซ์ (JSX)
2.3 DOM เสมือน (Virtual DOM)
2.4 การไหลของข้อมูลทิศทางเดียว (Unidirectional Data Flow) - แนวคิดสำคัญของ React
3.1 ส่วนประกอบ (Components)
3.2 Props
3.3 สถานะ (State)
3.4 ตะขอ (Hooks)
3.5 บริบท (Context)
3.6 วงจรชีวิตของส่วนประกอบ (Component Lifecycle)
3.7 เจเอสเอ็กซ์ (JSX)
3.8 DOM เสมือน (Virtual DOM)
3.9 กำหนดเส้นทาง React (React Router) - เริ่มต้นใช้งาน ReactJS
- ReactJS กับ TypeScript
ReactJS หรือที่มักเรียกกันว่า React เป็นไลบรารี JavaScript แบบโอเพ่นซอร์สสำหรับสร้างส่วนต่อประสานกับผู้ใช้ ซึ่งส่วนใหญ่ใช้สำหรับทำแอพทำเว็บหน้าเดียว ได้รับการดูแลโดย Facebook และชุมชนของนักพัฒนาแต่ละคนและบริษัทต่างๆ React ช่วยให้นักพัฒนาสร้างเว็บแอปพลิเคชันที่สามารถอัปเดตและแสดงผลได้อย่างมีประสิทธิภาพเพื่อตอบสนองต่อการเปลี่ยนแปลงข้อมูล คู่มือนี้ให้ข้อมูลเบื้องต้นและภาพรวมของ ReactJS พร้อมลิงก์ไปยังบทความเชิงลึกเกี่ยวกับ JavaScript และ TypeScript เพื่อการเรียนรู้เพิ่มเติม
1. ReactJS คืออะไร
React ถูกสร้างขึ้นครั้งแรกโดย Jordan Walke วิศวกรซอฟต์แวร์ของ Facebook ซึ่งเปิดตัวต้นแบบรุ่นแรกของ React ที่เรียกว่า “FaxJS” หลังจากใช้งานบนฟีดข่าวของ Facebook ในปี 2554 และ Instagram.com ในปี 2555 ก็ได้รับการเผยแพร่แบบโอเพ่นซอร์สที่ JSConf US ในเดือนพฤษภาคม 2556
React ใช้ JavaScript ซึ่งเป็นภาษาโปรแกรมระดับสูงอเนกประสงค์สำหรับทำแอพทำเว็บ หากคุณยังใหม่กับ JavaScript หรือต้องการทบทวนทักษะของคุณ โปรดดูคำแนะนำที่ครอบคลุมของเราเกี่ยวกับ JavaScript
React ยังรวบรวมพลังของ TypeScript ซึ่งเป็น superset ที่พิมพ์แบบคงที่ของ JavaScript TypeScript ขยาย JavaScript โดยการเพิ่มประเภทและคุณสมบัติอื่นๆ ทำให้เป็นเครื่องมือที่ทรงพลังสำหรับทำแอพทำเว็บขนาดใหญ่ที่แข็งแกร่ง
React มักถูกอธิบายว่าเป็น “V” ในรูปแบบ “MVC” (Model-View-Controller) เนื่องจากมันกำหนดเลเยอร์มุมมองในแอปพลิเคชัน การโฟกัสนี้ช่วยให้ React สามารถรวมเข้ากับรูปแบบสถาปัตยกรรมใด ๆ และสามารถใช้กับไลบรารี่หรือเฟรมเวิร์กอื่น ๆ เช่น Angular และ Vue
2. ทำไมต้องใช้ ReactJS
React มอบสิทธิประโยชน์มากมายที่ทำให้เป็นตัวเลือกยอดนิยมสำหรับนักพัฒนา:
2.1 สถาปัตยกรรมตามส่วนประกอบ
React เป็นไปตามสถาปัตยกรรมแบบส่วนประกอบ ซึ่งหมายความว่า UI ถูกแยกออกเป็นส่วนๆ อิสระที่สามารถใช้ซ้ำได้ซึ่งเรียกว่าส่วนประกอบ แต่ละองค์ประกอบมีตรรกะของตนเองและควบคุมการเรนเดอร์ของตนเอง คอมโพเนนต์สามารถซ้อนอยู่ภายในคอมโพเนนต์อื่นๆ เพื่อให้แอปพลิเคชันที่ซับซ้อนสามารถสร้างขึ้นจากบล็อกการสร้างแบบธรรมดาได้
2.2 เจเอสเอ็กซ์ (JSX)
React แนะนำ JSX ซึ่งเป็นส่วนขยายไวยากรณ์ที่คล้ายกับ XML ให้กับ JavaScript JSX ให้วิธีการจัดโครงสร้างการเรนเดอร์ส่วนประกอบโดยใช้ไวยากรณ์ที่นักพัฒนาหลายคนคุ้นเคย ไม่จำเป็นต้องใช้ JSX ในการทำแอพทำเว็บ React แต่แนะนำให้ใช้เนื่องจากความเรียบง่ายและสง่างาม
2.3 DOM เสมือน (Virtual DOM)
React ใช้ DOM เสมือน (Document Object Model) ซึ่งช่วยปรับปรุงประสิทธิภาพของแอป วัตถุ DOM เสมือนเป็นตัวแทนของวัตถุ DOM เช่นสำเนาที่มีน้ำหนักเบา React สร้าง DOM เสมือนและเผยแพร่ด้วย DOM จริง กระบวนการนี้เรียกว่าการกระทบยอดและเป็นกุญแจสู่ความสำเร็จในการปฏิบัติงานของ React
2.4 การไหลของข้อมูลทิศทางเดียว (Unidirectional Data Flow)
ใน React การไหลของข้อมูลเป็นแบบทิศทางเดียว (one-way) ซึ่งหมายความว่าเมื่อออกแบบแอป React คุณมักจะซ้อนส่วนประกอบลูกภายในส่วนประกอบหลัก หลักการนี้ทำให้แอปพลิเคชันคาดการณ์ได้มากขึ้นและแก้ไขจุดบกพร่องได้ง่ายขึ้น เนื่องจากข้อมูลจะผ่านแอปพลิเคชันไปในทิศทางเดียว
3. แนวคิดสำคัญของ React
หากต้องการเรียนรู้และใช้ React อย่างมีประสิทธิภาพ สิ่งสำคัญคือต้องเข้าใจแนวคิดพื้นฐานของมัน นี่คือภาพรวมของเหล่านี้:
3.1 ส่วนประกอบ (Components)
ส่วนประกอบเป็นหน่วยการสร้างของแอปพลิเคชัน React ใดๆ คอมโพเนนต์คือโค้ดที่มีอยู่ในตัวเองซึ่งอธิบายถึงส่วนหนึ่งของ UI สามารถใช้ซ้ำได้และสามารถซ้อนอยู่ภายในส่วนประกอบอื่นๆ
3.2 Props
Props (ย่อมาจาก properties) เป็นวิธีที่ส่วนประกอบพูดคุยกัน ทำให้สามารถส่งผ่านข้อมูลจากคอมโพเนนต์หนึ่งไปยังอีกคอมโพเนนต์ได้ เช่นเดียวกับการใช้ข้อมูลนั้น
3.3 สถานะ (State)
สถานะคือโครงสร้างข้อมูลที่เริ่มต้นด้วยค่าเริ่มต้นเมื่อคอมโพเนนต์เมาต์และกลายพันธุ์เมื่อเวลาผ่านไป (ส่วนใหญ่เกิดจากเหตุการณ์ของผู้ใช้) เป็นหน่วยความจำของส่วนประกอบ ช่วยให้ส่วนประกอบ React สร้างและจัดการข้อมูลของตนเองได้
3.4 ตะขอ (Hooks)
Hooks เป็นส่วนเสริมใหม่ใน React 16.8 ที่ให้คุณใช้ state และฟีเจอร์ React อื่นๆ ได้โดยไม่ต้องเขียนคลาส Hooks เป็นฟังก์ชันที่ “เชื่อมต่อ” สถานะ React และคุณสมบัติวงจรชีวิตจากส่วนประกอบของฟังก์ชัน ตะขอที่ใช้บ่อยที่สุดคือuseState, useEffect, useContextและ
Hook useStateช่วยให้คุณเพิ่มสถานะให้กับส่วนประกอบของฟังก์ชัน useEffectHook ช่วยให้คุณแสดงผลข้างเคียงในส่วนประกอบของฟังก์ชัน และ Hook useContext ช่วยให้คุณสมัครรับบริบท React โดยไม่ต้องแนะนำการซ้อนในโค้ดของคุณ
3.5 บริบท (Context)
Context API ของ React ให้วิธีการส่งข้อมูลผ่านแผนผังส่วนประกอบโดยไม่ต้องส่งอุปกรณ์ประกอบฉากด้วยตนเองในทุกระดับ ในแอปพลิเคชัน React ทั่วไป ข้อมูลจะถูกส่งจากบนลงล่าง (พาเรนต์ไปยังลูก) ผ่านอุปกรณ์ประกอบฉาก แต่การใช้งานดังกล่าวอาจยุ่งยากสำหรับอุปกรณ์ประกอบฉากบางประเภท (เช่น ค่ากำหนดโลแคล ธีม UI) ที่คอมโพเนนต์จำนวนมากภายในแอปพลิเคชันต้องการ
3.6 วงจรชีวิตของส่วนประกอบ (Component Lifecycle)
การทำความเข้าใจวงจรชีวิตของส่วนประกอบ React เป็นสิ่งสำคัญ React มีวิธีวงจรชีวิตหลายวิธีที่คุณสามารถแทนที่เพื่อรันโค้ดในช่วงเวลาใดเวลาหนึ่งในกระบวนการ เมธอด เช่นcomponentDidMount, componentDidUpdate และ componentWillUnmount เป็นส่วนหนึ่งของวงจรชีวิต
3.7 เจเอสเอ็กซ์ (JSX)
JSX ย่อมาจาก JavaScript XML ช่วยให้เราเขียน HTML ใน React ได้ ทำให้เขียนและเพิ่ม HTML ใน React ได้ง่ายขึ้น JSX เป็นส่วนสำคัญของ React เป็นส่วนขยายทางไวยากรณ์สำหรับ JavaScript แต่เป็นทางเลือกที่จะใช้ในการพัฒนา React แม้ว่าจะถูกนำไปใช้อย่างกว้างขวางในชุมชน
3.8 DOM เสมือน (Virtual DOM)
คุณสมบัติหลักประการหนึ่งของ React คือการใช้ DOM เสมือน React สร้างแคชโครงสร้างข้อมูลในหน่วยความจำ คำนวณผลต่างที่เกิดขึ้น จากนั้นอัปเดต DOM ที่แสดงผลของเบราว์เซอร์อย่างมีประสิทธิภาพ สิ่งนี้ทำให้นักพัฒนาสามารถเขียนโค้ดได้ราวกับว่าทั้งหน้าถูกเรนเดอร์ในการเปลี่ยนแปลงแต่ละครั้ง ในขณะที่ไลบรารี React จะเรนเดอร์ส่วนประกอบย่อยที่เปลี่ยนแปลงจริงเท่านั้น
3.9 กำหนดเส้นทาง React (React Router)
React Router เป็นไลบรารีการกำหนดเส้นทางมาตรฐานสำหรับ React ซึ่งเปิดใช้งานการนำทางระหว่างมุมมองของส่วนประกอบต่างๆ ในแอปพลิเคชัน React อนุญาตให้เปลี่ยน URL ของเบราว์เซอร์ และทำให้ UI ซิงค์กับ URL
4. เริ่มต้นใช้งาน ReactJS
ในการเริ่มต้นใช้งาน React คุณต้องมีความเข้าใจพื้นฐานของ JavaScript และแนวคิดของมัน คุณไม่จำเป็นต้องเป็นผู้เชี่ยวชาญ แต่ยิ่งคุณรู้จัก JavaScript มากเท่าไหร่ คุณก็จะเข้าใจและทำงานกับ React ได้ง่ายขึ้นเท่านั้น
คุณสามารถรวม React ในโครงการของคุณด้วยวิธีใดวิธีหนึ่งจากสองวิธี: ผ่าน CDN (เครือข่ายการจัดส่งเนื้อหา) หรือโดยการตั้งค่าสภาพแวดล้อมการพัฒนาท้องถิ่น
วิธีที่เร็วที่สุดในการเริ่มต้นคือการใช้สภาพแวดล้อม React ออนไลน์บนแพลตฟอร์ม เช่น CodeSandbox หรือ Stackblitz
หากคุณต้องการตั้งค่าสภาพแวดล้อมการพัฒนาท้องถิ่น คุณสามารถใช้ Node.js และเครื่องมือบรรทัดคำสั่ง Create React App สร้างแอป React เป็นสภาพแวดล้อมที่กำหนดค่าไว้ล่วงหน้าพร้อมทุกสิ่งที่คุณต้องการสำหรับการสร้างแอป React ไม่มีไฟล์คอนฟิกูเรชัน และมีเพียงไม่กี่คำสั่งที่คุณต้องรู้เพื่อเริ่มสร้างแอป React ของคุณ
5. ReactJS กับ TypeScript
React สามารถใช้กับ TypeScript ซึ่งเป็น superset ที่พิมพ์แบบคงที่ของ JavaScript TypeScript แนะนำการพิมพ์แบบคงที่เพื่อตรวจจับข้อผิดพลาดระหว่างการพัฒนา ทำให้เป็นตัวเลือกยอดนิยมสำหรับแอปพลิเคชันขนาดใหญ่ ตรวจสอบคำแนะนำที่ครอบคลุมของเราเกี่ยวกับ TypeScript สำหรับข้อมูลเพิ่มเติม
React เป็นเครื่องมืออันทรงพลังที่อยู่ในมือของนักพัฒนาเว็บ ความยืดหยุ่นและประสิทธิภาพทำให้เป็นตัวเลือกที่ยอดเยี่ยมสำหรับการใช้งานทั้งขนาดเล็กและขนาดใหญ่ ไม่ว่าคุณกำลังทำแอพทำเว็บเชิงโต้ตอบที่เรียบง่ายหรือเว็บแอปที่ซับซ้อน React สามารถช่วยคุณสร้างโซลูชันที่สวยงามและมีประสิทธิภาพได้
แม้ว่าคู่มือนี้จะให้ภาพรวมในระดับสูง แต่การเรียนรู้ที่แท้จริงมาจากการนำแนวคิดเหล่านี้ไปใช้ เริ่มทำงานในโการทำแอพทำเว็บขนาดเล็ก ค่อยๆ เพิ่มความซับซ้อนเมื่อคุณคุ้นเคยกับ React มากขึ้น จับคู่สิ่งนี้ใช้งานได้จริง