รวมทุกเรื่องเบื้องต้นที่ควรรู้ก่อนเริ่มเรียน React

React (บางครั้งเขียนเป็น React.js หรือ ReactJS) คือไลบรารี่จาวาสคริปที่ถูกมองว่าเป็นตัวช่วยให้สามารถสร้าง UI (User Interface หรือองค์ประกอบของเว็บที่เชื่อมต่อกับผู้ใช้งานโดยตรง) ได้แม่นยำและรวดเร็วมากยิ่งขึ้น และส่งผลให้การแสดงผลมีความเป็นระบบคงเส้นคงวามากขึ้นไปพร้อมๆ กัน สิ่งนี้ถูกนำมาใช้กันอย่างแพร่หลายในการเขียนโค้ดสำหรับเว็บไซต์และแอปพลิเคชันมีประโยชน์กับคนที่ทำงานในฐานะ Front-end จึงนับว่าเป็นหนึ่งในสิ่งที่คนทำงานในสายนักพัฒนาจำเป็นต้องเรียนรู้

ก่อนจะจากกันไป ทาง TechUp มีคอร์สสอนเขียนโปรแกรม ทักษะพื้นฐานสำหรับคนที่ต้องการทำงานในสายนักพัฒนาจากทางเรามาแนะนำ โดยหลักสูตรนี้จะเป็นการเตรียมความพร้อมในทักษะที่จำเป็นสำหรับการทำงาน ทั้ง Technical Skills, Soft Skills, English Skills และ Career Skills ภายในระยะเวลาเพียง 4 เดือนเท่านั้น พร้อมกับมีการันตีการช่วยหางานหลังเรียนจบอีกด้วย สนใจอ่านรายละเอียดคอร์สของเราได้เลยที่นี่

React มีจุดเริ่มต้นอย่างไร

React ถูกพัฒนาขึ้นโดย Facebook และถูกนำมาใช้งานอย่างเป็นทางการตั้งแต่ปี 2011

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

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

แล้ว React Native คืออะไร

React Native หมายถึง React Framework สำหรับสร้างแอปพลิเคชันบนมือถือที่จะใช้ภาษา JavaScript เป็นหลักในการเขียน เกิดจากการนำ React ซึ่งเป็น JavaScript Framework ของทาง Facebook ที่ใช้สำหรับการสร้างเว็บเบราว์เซอร์มาต่อยอดใช้กับแอปฯ สำหรับมือถือ เพื่อช่วยให้นักพัฒนาสร้างแอปพลิเคชันสำหรับระบบ iOS และระบบ Android ได้ในคราวเดียว

ความแตกต่างระหว่าง React กับ React Native

สิ่งที่แตกต่างกันคือ React Native มักถูกหยิบไปใช้ในการสร้างแอปพลิเคชันสำหรับมือถือ ทั้งสำหรับระบบ iOS, Android ส่วน React จะใช้สำหรับสร้างหน้าเว็บเพื่อใช้บนเบราว์เซอร์เป็นหลัก เมื่อต้องสร้างระบบ ทั้งสองจะใช้คอมโพเนนต์ซ้ำกันได้ แต่ Syntax (โครงสร้างของภาษาคอมพิวเตอร์) ที่ใช้เพื่อถอดองค์ประกอบของแต่ละคอมโพเนนต์จะมีความแตกต่างกัน

ทำความรู้จักกับ 3 องค์ประกอบของ React

1. Component: โค้ดที่แบ่งออกเป็นบล็อกเล็กๆ หลายอัน คอมโพเนนต์อันหนึ่งจะแทนที่ชิ้นส่วนของปุ่มหรือองค์ประกอบ UI ของหน้าเว็บ ซึ่งคอมโพเนนต์เหล่านี้สามารถนำมาใช้ซ้ำได้ตลอดการสร้าง ระบบ คอมโพเนนต์จะทำให้ส่วนต่างๆ ของหน้าเว็บทำงานอย่างเป็นอิสระต่อกัน
2. JSX: JSX เป็นส่วนขยายสำหรับการเขียนโค้ดภาษา JavaScript ทำให้นักพัฒนาสามารถเขียนโค้ดที่เหมือน HTML ภายในคอมโพเนนต์ แต่เบื้องหลังจะถูกแปลงเป็นภาษา JavaScript ได้เอง
3. Props: ใช้อธิบายวิธีการส่งผ่านข้อมูลจากคอมโพเนนต์หลักไปยังคอมโพเนนต์ย่อย เพื่อการแสดงผลบางประการที่แตกต่างกันไปในคอมโพเนนต์หลักชิ้นเดียวกันโดยไม่ต้องไปเขียนโค้ดขึ้นใหม่ทั้งหมด ทำให้สามารถใช้งานคอมโพเนนต์ได้อย่างหลากหลายมากขึ้น เช่น ปุ่มกดที่มีดีไซน์ UI เหมือนกันเกิดจากคอมโพเนนต์อันเดียวกัน แต่ Text บนปุ่มในแต่ละหน้าเว็บอาจไม่เหมือนกัน

ข้อดีและข้อเสียของการใช้ React

ข้อดี

• สามารถสร้างคอมโพเนนต์และนำมาใช้ใหม่ได้เสมอ หนึ่งในคุณสมบัติหลักของ React Component คือเราสามารถนำส่วนประกอบเหล่านั้นกลับมาใช้ใหม่ได้ หมายความว่านักพัฒนาจะเขียนโค้ดของคอมโพเนนต์ขึ้นมาแค่ครั้งเดียวและนำไปใช้ในการสร้างระบบได้เรื่อยๆ ซึ่งนี่จะทำให้โค้ดมีความเป็นระเบียบมากขึ้น แก้ไขได้ง่ายขึ้น และช่วยลดระยะเวลาในการประกอบ UI ของหน้าเว็บได้ด้วย
• มี Virtual DOM เข้ามาเพิ่มประสิทธิภาพของคอมโพเนนต์ React จะใช้ Virtual DOM (Document Object Model) เพื่อเพิ่มประสิทธิภาพการเรนเดอร์คอมโพเนนต์ ซึ่งหมายความว่าเมื่อมีการปรับปรุง UI บางส่วน DOM จะทำการคำนวณโค้ดเพื่ออัปเดตการแสดงผลเฉพาะส่วนที่มีการเปลี่ยนแปลงได้ทันที
• React ส่งเสริมการเขียนโค้ดแบบ Declarative ต้องทำความเข้าใจว่าการเขียนโค้ดจะมีรูปแบบหลักอยู่ 2 แบบคือ Imperative เป็นการเขียนที่ต้องใช้เวลามากกว่า ต้องทำความเข้าใจว่าชุดคำสั่งแต่ละแบบจะส่งผลอย่างไรและต้องเขียนชุดคำสั่งอย่างละเอียด และอีกแบบคือ Declarative ที่จะเน้นไปที่การดูว่าสุดท้ายแล้วต้องการให้ระบบออกมาเป็นอย่างไร ทำอะไรได้บ้างเท่านั้น ซึ่งนี่ทำให้ React เป็นเหมือนกับเครื่องทุ่นแรงทุ่นเวลาของเหล่า Front-end ไปในตัว

ข้อเสีย

• การอัปเดตไลบรารีที่เกิดขึ้นบ่อยจนเกินไป แม้ว่าการที่ React มีการพัฒนาอยู่เสมอจะส่งผลดีกับการนำไปใช้งานในเคสต่างๆ แต่ทุกการเปลี่ยนแปลงหมายถึงการบังคับให้นักพัฒนาต้องคอยอัปเดตวิธีการเขียนโค้ดไปด้วย การเปลี่ยนแปลงวิธีการนำไปใช้งานบ่อยครั้งจนขาดความเสถียรจะส่งผลกระทบอย่างมากกับบริษัทประเภท SaaS (Software as a Service) ที่ต้องผลิตซอฟต์แวร์ขายในท้องตลาด หากผลิตภัณฑ์ของตัวเองเกิดปัญหาอะไรขึ้นแล้วไม่สามารถแก้ไขได้เพราะนักพัฒนายังไม่ทราบวิธีก็ส่งผลเสียต่อชื่อเสียงของผลิตภัณฑ์

ตัวอย่าง React Library ที่เป็นที่นิยม

• Material UI

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

• Styled Components

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

• Enzyme

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

อยากทำงานเป็น React Developer ต้องเรียนรู้เรื่องอะไรบ้าง

สำหรับการทำงานเป็น React Developer นอกเหนือจากเรื่อง React ที่ต้องทำความเข้าใจจนเชี่ยวชาญ จะมีเนื้อหาที่ผู้เรียนยังต้องไปเรียนรู้เพิ่มเติมดังต่อไปนี้

• JavaScript
• HTML และ CSS
• UI Component
• Cloud Management
• Software Testing
• JSX

React เป็นเครื่องมือสำคัญสำหรับการทำงานพัฒนาเว็บไซต์และแอปพลิเคชัน จึงถือเป็นหนึ่งในเรื่องที่เหล่า Software Developer ต้องเรียนรู้ ในขณะนี้ทาง TechUp มีคอร์สที่จะสอนการเขียน Coding และทั้งยังรวมถึง Technical Skills, Soft Skills, English Skills และ Career Skills ให้ผู้เรียนมีความพร้อมในการทำงานเป็นนักพัฒนา การันตีว่าถึงแม้ตัวผู้เรียนจะไม่เคยมีประสบการณ์ในเรื่องนี้มาก่อนก็สามารถเรียนได้ หากใครสนใจลองดูรายละเอียดคอร์สของเราได้เลยที่ Link