React คืออะไร? ทำไมคนถึงนิยมใช้กัน

สวัสดี บทความนี้ Matter Devs ได้นำเนื้อหาสำหรับคนที่เริ่มต้นอยากเรียนรู้เรื่อง React แต่ยังไม่รู้จัก หรือเคยได้ยินแต่ยังไม่เคยศึกษาว่า React คืออะไร? ทำไมคนถึงแนะนำให้ใช้งานกัน มีข้อดีข้อเสีย แตกต่างจากตัวอื่นๆยังไง บทความนี้มีคำตอบ

React คืออะไร? แล้วทำไมเราถึงต้องใช้งาน React?

React คือ Library ตัวหนึ่งที่ใช้ในการสร้าง User Interface (UI) หรือว่าหน้าจอบน Application ซึ่งเป็นส่วนประกอบที่แบ่งออกเป็นส่วนๆ หรือเรียกอีกอย่างว่า Component นั่นเอง React ได้ถูกสร้างโดย Facebook ถ้าเปรียบเทียบการใช้งาน React, Angular และ Vue ยอดการดาวน์โหลด React จะเป็นตัวที่คนใช้งานเยอะที่สุด ถ้าเทียบกับ Framework หรือ Library ตัวอื่นๆ

ข้อแตกต่างระหว่าง Framework กับ Library

Angular (Framework)

Framework นั่นจะประกอบด้วยส่วนต่างๆที่ Include มาให้เรียบร้อยแล้ว
ข้อดี เราสามารถเริ่มใช้งานได้เลย สะดวกไม่ต้องไปหาตัวอื่น
ข้อเสีย หากเราไม่อยากจะใช้ที่ Framework ให้มา หรือเราอยากจะใช้ตัวอื่น เราต้องทำการเปลี่ยนแปลง Framework นี้เยอะมาก กว่าจะใช้งานได้

React (Library)

Library ก็จะตรงข้ามกับ Framework ที่ไม่มีการ Include ใดๆเลย
ข้อดี อิสระเราสามารถเลือกทุกอย่างมาใช้งานได้ด้วยตัวเอง
ข้อเสีย เราต้องจัดการทุกอย่างด้วยตัวเอง

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

บริษัทชั้นนำที่ได้ถูกนำไปใช้งาน React มีบริษัทไหนบ้าง?

Atlassian
Dropbox
Facebook
Twitter
Instagram
Netflix
และอื่นๆอีกมากมาย

แนวคิดที่สำคัญของ React ที่แตกต่างจาก Framework หรือ Library ตัวอื่นๆ นั่นคือการจัดการการไหลของ Data
1. Two Way Data Flow จะนิยมใช้ในยุคเก่าๆ อย่างเช่นใน angular 1 สามารถมาได้หลายทิศทาง ไม่ว่าจากผู้ใช้เมื่อคลิกก็จะเกิด Data ขึ้น หรือที่เก็บข้อมูล Data จาก Application เราสามารถแก้ไขข้อมูลที่ตรงนั้นได้ ทำให้ Data ไหลไป ไหลมา หากเกิด Bug ที่จุดใดจุดหนึ่ง เราจะต้อง Debug ว่า Data นั้นถูกเปลี่ยนแปลงจากที่ไหน ทำให้การ Debug ยากขึ้น
2. One Way Data Flow จะเป็นที่นิยมมากในปัจุบัน ซึ่ง React ได้ถูกนำมาใช้ จะสามารถถูกเปลี่ยนแปลงได้แค่ทิศทางเดียวเท่านั้น

อีก แนวคิดหนึ่งที่สำคัญไม่แพ้กัน นั่นก็คือ การเขียนโปรแกรมของ React

1. Imperative programming ในยุคก่อน jQuery จะเขียนโปรแกรมในรูปแบบนี้ ที่บอกตัวโค้ด Line By Line ว่าเราต้องการอะไร แล้วใส่เนื้อหายังไง จะทำให้การเขียนโปรแกรมยาวมาก

2. Declarative programming เป็นรูปแบบที่ React ใช้งานอยู่ เราสามารถใช้ Tag ตัวนั้น แล้วใส่เนื้อหาเข้าไปได้เลย ไม่ต้องบอกว่าต้องสร้างยังไง ทำให้การเขียนโปรแกรมสั้นมาก และอ่านง่ายขึ้น สามารถดูการ Compiler จากเว็บ Babel

ตอนนี้เรารู้แนวคิดของ React ไปแล้วว่ามีข้อดีอะไรบ้าง งั้นเรามารู้จักเครื่องมือ ที่ใช้ใน React กันบ้าง

1. Node.js ใช้ในการ Install Package ต่างๆ เช่น React Package ที่เราจะนำมาใช้งาน

Node.js

2. React Developer Tool เป็น Extension ตัวหนึ่งที่ใช้ในการ Debug Applications ของเราได้ง่ายขึ้น

React Developer Tool

3. Visual Studio Code เป็นเครื่องมือที่ใช้ในการเขียนโปรแกรมฟรีที่นิยมใช้กันในปัจจุบัน

Visual Studio Code

4. Creat React App เป็น Package ตัวหนึ่งที่มีคู่มือวิธีการใช้งาน ว่าใช้งานยังไงบ้าง อยู่ด้านล่าง

Creat react app

เมื่อติดตั้งและรู้เครื่องมือกันเป็นที่เรียบร้อยแล้ว เรามาดูวิธีการสร้างไฟล์ที่จะใช้งานกัน เราจะอธิบาย 2 วิธีในการเปิดใช้งาน

วิธีที่ 1 สร้าง Folder ที่ไหนก็ได้ และคลิกขวาที่ Folder ที่ได้สร้างไว้ เลือก Services -> New Terminal at Folder เมื่อเปิดหน้าต่าง Terminal ปรากฏขึ้นมา เราก็จะพิมพ์คำสั่งตามคู่มือทีละคำสั่ง

npx create-react-app my-app

cd my-app

npm start

วิธีที่ 2 สร้าง Folder ที่ไหนก็ได้ แล้วลาก Folder มาวางไว้ใน Visual Studio Code เครื่องมือที่เราติดตั้งไว้ก่อนหน้านี้ แล้วเปิด terminal ใน vscode ด้วยคีย์ลัด command+shift+P พิมพ์ว่า view terminal หน้าต่าง Terminal ใน vscode ก็จะปรากฏขึ้น จากนั้นก็พิมพ์คำสั่งทีละคำสั่ง

npx create-react-app .

npm start

บางคนคุ้นเคยกับ npm แล้ว npm แตกต่างกับ npx ยังไง?

npm จะต้อง Install Pagekage ตัวนั้นลงเครื่องก่อน แล้วค่อยเรียกใช้งาน แต่ตัว npx เราสามารถเรียกใช้งานนั้นได้ทันที

เมื่อทำการติดตั้งเสร็จเรียบร้อยแล้ว เรามาดูโครงสร้างว่ามีอะไรบ้าง?

1. node_modules เป็น Folder ที่เก็บ pagekage ต่างๆ ที่เรารัน create-react-app เข้าไป

2. public เก็บพวกไฟล์ index.html ภาพและโลโก้ต่างๆ

3. src เป็นโฟล์เดอร์ที่เรานำมาใช้เยอะที่สุด ไว้สร้าง Application

4. .gitignore การทำงานของ Git

5. pagekage มีรายละเอียด Dependencies ที่เราติดตั้งเข้าไป และมี Script คำสั่งที่เราสามารถใช้รันได้

6. readme.md เป็น Document ที่ตัวโปรเจคใส่มาให้เรา

ถ้าจะเริ่มตั้งแต่ศูนย์ ก็สามารถลบ File ที่ไม่จำเป็น ใน Folder src หรือเรียกว่าซอส ลบไฟล์ ให้เหลือแค่ App.css, App.js, index.js และลบ Path ที่ Import จากไฟล์ที่ลบไป สุดท้ายลบโค้ดที่ไม่เกี่ยวข้องออกไป เมื่อลบหมดแล้ว จะเป็นไฟล์ขาวๆ ที่ไม่มีข้อมูลอะไรเลย งั้นเรามาเริ่ม ศึกษาโปรเจกต์ด้วยการแกะโค้ด React กันเลยดีกว่า

ขอบคุณ Course จาก PasaComputer