What is React ?

What and Why React.js ?

7 min readOct 31, 2021

--

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

Brief history of JavaScript

ก่อนที่จะเป็นภาษา JavaScript ที่ถูกนำมาใช้งานครั้งแรกในปี 1995 นั้น เดิมมีชื่อว่า Live Script ที่ถูกพัฒนาโดยบริษัท Netscape Communications Corporation ต่อมา Netscape ได้ร่วมมือกับบริษัท Sun Microsystems เพื่อปรับปรุงระบบของ browser ให้สามารถทำงานร่วมกับภาษา Java จึงได้มีการเปลี่ยนชื่อจาก LiveScript เป็น JavaScript นั่นเอง

What is JavaScript ?

คือ programming language ที่ทำให้ browser สามารถดำเนินการภายในเครื่อง (local) และโต้ตอบกับผู้ใช้งานแบบง่าย ๆ ได้ (dynamic) เช่น เมื่อ user ใช้เมาส์คลิก, กดแป้นพิมพ์, กรอกข้อความในแบบฟอร์ม เป็นต้น โดยไม่จำเป็นต้องสื่อสารกับ remote web server ตลอดเวลา

Web page events & DHTML

การทำเว็บไซต์แบบเดิมจะใช้เทคนิค DHTML (Dynamic HTML) ที่รวม HTML, JavaScript และ CSS (Cascading Style Sheets) เข้าไว้ด้วยกันเพื่อสร้าง dynamic effect (เช่น ข้อความเคลื่อนไหว, แสดง/ซ่อน element) ตาม user’s action

โดยจะมีภาษา Backend (อย่าง PHP, Perl) ทำหน้าที่ในการดึงข้อมูลจาก database แล้วส่งไปยัง browser

ด้วยเทคนิคนี้จะทำให้การทำงานทั้งหมดจะอยู่ที่ server ส่งผลให้ server ทำงานหนัก เนื่องจากต้องส่ง payload ของหน้าเว็บทั้งหมด (ไม่ว่าจะเป็น workflow ในระบบ หรือการนำข้อมูลที่ได้จาก database มาจัดวางใน HTML template) ไปยัง user

ประกอบกับขนาดเว็บที่ใหญ่ขึ้นจากการใส่ interactive content & video media จึงทำให้เกิดแนวคิดที่จะทำให้ user สามารถรับ-ส่งข้อมูลได้เร็วขึ้น (server ทำงานเบาลง) โดยการเก็บ HTML template ไว้ใน JavaScript บน Web Browser แทนแล้วให้ server ทำหน้าที่แค่ส่งข้อมูลให้กับ JavaScript เพื่อนำไปจัดการและแสดงผลแทน

Modern JavaScript (In 2014)

เมื่อปี 2004 เราเรียกเทคนิค AJAX ว่าเป็น Modern JavaScript ซึ่งเป็นเทคนิคที่ใช้ JavaScript ส่ง request ไปขอข้อมูลจาก server หลังจาก server ส่งข้อมูลมา JavaScript ก็จะนำข้อมูลนั้นมาแสดงผล

AJAX: Asynchronous JavaScript and XML คือ เทคนิคที่ใช้ในการพัฒนาแอปพลิเคชันใน client-side เพื่อให้สามารถโต้ตอบกับผู้ใช้งานได้ดีขึ้น โดยรับ-ส่งข้อมูลใน background ทำให้ไม่ต้อง reload/refresh ใหม่ทั้งหน้าเว็บเมื่อมีการเปลี่ยนแปลง ส่งผลให้มีการตอบสนองของหน้าเว็บที่เร็วขึ้นนั่นเอง

React ที่เป็น library จึงเข้ามาช่วยจัดการดึงข้อมูล และการแสดงผลบน Web Browser ให้ง่ายขึ้น เรียกได้ว่าเป็นการกระจายงานเพื่อแบ่งเบาภาระให้กับ server นั่นเอง

What is React / React. js / ReactJS ?

Official website: React
คือ JavaScript front-end library ที่ถูกสร้างโดย Facebook สำหรับใช้สร้าง UI component ซึ่งมีพื้นฐานมาจากแนวคิด “MVC” หรือ Model View Controller

View

จากแต่ก่อนเวลาเราจะเขียนหน้าเว็บ เราก็จะเขียนโดยใช้ HTML เช่น

<div>
  <h1>Hello World</h1>
</div>

แต่ใน React เราจะสร้างหน้าเว็บโดยใช้สิ่งที่เรียกว่า Component ลองนึกภาพว่า Component เป็น block ส่วนย่อย ๆ ของหน้าเว็บที่เราจะสร้างขึ้นมา

ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('root'))

โดย ReactDOM.render() เป็นฟังก์ชันที่จะ render Component ที่เราสร้างจาก react ใน element ที่มี id ชื่อ root (ซึ่งหากเราสร้าง React project ผ่าน meteor create <projectName> เราสามารถหา id ของ react ได้ในไฟล์ client/main.html )

นั่นหมายความว่า ถ้าเรามี HTML ตามตัวอย่างด้านบน

<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
</html>

React ก็จะ render หน้า HTML ทั้งหมดเป็น

<!DOCTYPE html>
<html>
  <body>
    <div id="root">
      <h1>Hello, world!</h1>
    </div>
  </body>
</html>

ทำให้เราสามารถเพิ่ม dynamic ให้กับหน้าเว็บของเราได้มากขึ้นด้วยการเขียน HTML ใน JavaScript แทนการเขียน HTML ใน HTML ทำให้เกิดภาษา JSX นั่นเอง!

Why JSX ?

JSX is an extension of the JavaScript language based on ES6, and is translated into regular JavaScript at runtime.

Allow us to write HTML elements in JavaScript code
Can write expressions inside curly braces { }
Write HTML on multiple lines, put the HTML inside parentheses

1st Advantage

1. Comparison between JSX and without JSX | From React JSX (w3schools.com)

2nd Advantage

2. Expressions in JSX From | React JSX (w3schools.com)

3rd Advantage

3. Inserting a Large Block of HTML | From React JSX (w3schools.com)

เป็น Declarative โดยมีการเตรียม function ต่าง ๆ ไว้ให้เราเลือกใช้

Ref: Declarative vs. Imperative | stackoverflow

What is Declarative ?

โจทย์: มีเด็กนักเรียน 5 คนอยู่ในห้อง โดยแต่ละคนมีเลขที่กำกับ หากเราต้องการเฉพาะนักเรียนที่มีเลขคี่ เราจะทำอย่างไร ?

let students = [ 1, 2, 3, 4, 5 ];

Declarative = Tell only what we want

var results = students.filter((number) => number % 2 != 0);

Imperative = Tell how it’s done

let results = [];
students.forEach( (student) => {
    if(student % 2 != 0) {
        result.push(student);
    }
}

เป็น component-based หมายถึงเราสามารถเขียน code แบ่งออกเป็น Component ส่วนเล็ก ๆ โดยแต่ละส่วนก็จะจัดการ State ของตัวเองไป จากนั้นจึงค่อยนำแต่ละ Component มาประกอบกันเป็นแอพใหญ่

ซึ่งคล้ายกับแนวคิด OOP เพราะมีการ Encapsulate ส่วนที่เป็น code ไว้

support server-side ทำให้เราสามารถ render เว็บที่เขียนจากฝั่ง server ได้ด้วย ซึ่งจะช่วยในเรื่องของ SEO ให้สามารถเข้ามาอ่านเว็บเรา และจัดอันดับบน Google ได้ดีกว่าแบบที่ render จากฝั่ง client

Why React?

Simplicity: To learn & build web (and mobile application) with special syntax called JSX
Easy to learn: Just need basic knowledge of CSS and HTML
Native Approach: Can be used to create mobile app with React Native
Data Binding: Single-Way data flow through one control point, so it’s easier to debug self-contained components of large React app

Testability: React view can be treated as functions of state
Trusted by great companies: Facebook, Bloomberg, Uber, Airbnb, Discord, Skype, Pinterest, etc.
It’s hot and trending

Vue jobs, React jobs, Angular jobs — สำรวจ — Google เทรนด์

Strong community support

Angular vs React vs Vue: Which Framework to Choose in 2021 (codeinwp.com)

Virtual DOM — เป็นสิ่งที่ทำให้ React ทำงานได้เร็วขึ้น จากการ re-render เฉพาะ Component ที่ state มีการเปลี่ยนแปลง

What is the DOM ?

The Document Object Model (DOM) is a programming interface for web documents | developer.mozilla
When a web page is loaded, the browser creates a Document Object Model of the page | W3Schools

หลังจากที่ browser อ่านไฟล์ HTML เสร็จแล้วก็จะทำการสร้าง tree (DOM) เพื่อใช้ในการเข้าถึงและจัดการแต่ละ tag / element ใน document

จากรูปข้างล่าง เราจะเรียก body เป็น parent node และเรียก h1, section และ footer เป็น child node โดยมี html เป็น root node

What problem does virtual DOM solve ?

Get th.peeranut’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

เนื่องจากในปัจจุบัน DOM มีขนาดใหญ่โตขึ้นจากการเพิ่ม dynamic เข้าไปใน web เพื่อให้ app เป็น Single Page Applications (SPAs) มากขึ้น

ทำให้เมื่อมีการแก้ไข/อัพเดตค่าใน node (เช่น การขยับ node นึงไปทางขวา) Browser จะใช้เวลาในการ re-render (แสดงผลการเปลี่ยนแปลง) ที่นานเนื่องจากต้องทำการ re-render ทั้ง document

The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM | reactjs.org

แต่สำหรับ VDOM ที่ copy regular DOM มาเก็บไว้ใน memory แล้วตั้งชื่อเป็น virtual DOM นั้นจะทำการ re-render เฉพาะ node ที่มีการเปลี่ยนแปลง โดยจะเกิดการอัพเดตใน virtual DOM ก่อนซึ่งมีหลักการงานคร่าว ๆ ดังนี้ (ดังรูป)

เมื่อมีการเปลี่ยนแปลงของ state (ข้อมูล) เช่น การขยับ node นึงไปทางขวา virtual DOM จะประเมินว่า parent node และ child node ใดมีการอัพเดตบ้าง
Browser นำ virtual DOM มาเปรียบเทียบกับ regular DOM (ที่ Browser กำลังแสดงผล)
Browser ทำการ re-render เฉพาะ node ที่เปลี่ยนไป

How does virtual DOM work ? | learning-react-native

Concept พื้นฐานเกี่ยวกับ React ที่เราจำเป็นต้องรู้มีอยู่ 3 concepts หลัก ๆ คือ

Component — ส่วนเล็ก ๆ ที่สามารถรวมกันเป็น UI ที่ซับซ้อนได้ เพราะมีการทำงานที่เป็นอิสระต่อกัน และสามารถนำมาใช้ซ้ำได้
[Concept หลักของ React: component-based]
Props — ข้อมูลที่ถูกส่งต่อจาก Component จากชั้นบนไปชั้นล่าง
[ทำให้ Data flow React เป็นแบบ Unidirectional / ไหลไปทางเดียว นั่นเอง]
State — ข้อมูลที่อยู่ภายใน Component

Component

โดยการเขียน Component เปรียบเสมือนกับการเขียน HTML รวมกับ JavaScript โดยใน React จะรองรับการเขียนแบบ JSX (JavaScript XML) ซึ่งใช้ในการแสดงผลหน้าเว็บไซต์ (หน้าตาคล้ายกับ HTML) แต่ต่างกันตรงที่การเขียนแบบ JSX จะสามารถเขียน HTML tag ใน JavaScript code ได้เลย

XML คือ markup language ที่คล้ายกับ HTML แต่ต่างกันตรงที่ XML ใช้สำหรับ define other languages (ติดต่อระหว่างระบบที่แตกต่างกัน เช่น OS ต่างกัน) ซึ่งมี syntax พื้นฐานของเอกสาร XML คือต้องมี root element แค่ตัวเดียว <See more>

ใน React สามารถเขียน code ได้หลายแบบ เช่น

With JSX
Without JSX
With webpack
With Babel
with ES6 — ในปัจจุบันใช้ ES6 แทน ES5 แล้ว

React Component Example

เราสามารถเขียน component แยกออกเป็นส่วนต่าง ๆ อย่างเช่น Header, Footer, Button โดยแยกออกเป็นคนละไฟล์ แล้วค่อยนำมารวมกันได้

From Why React Uses a Component-Based Architecture | by Imran Farooq

From medium.com/@sirimainson/concepts-หลักของ-react-982d5c8d23f0

จาก UI ตัวอย่างเราสามารถแบ่งได้ 2 Components คือ MenuBar (กรอบสีแดง) และ Container (กรอบสีเขียว) สำหรับแสดง Title และปุ่มกด

จากนั้นนำ Component ต่าง ๆ มาประกอบกันเพื่อแสดงในไฟล์ App

React Props Example

ย่อมาจากคำว่า properties ซึ่ง props สามารถส่งข้อมูลระหว่าง component โดยเรียกผ่าน this.props.name_of_parameter เช่น this.props.name ดังรูป

จาก code จะสังเกตได้ว่า

class Container จะ render class Greeting โดยส่ง Lisa ผ่าน props name
โดย class Greeting ก็จะ render คำว่า Hi แล้วตามด้วย props name นั่นเอง

React State Example

คือ ส่วนที่ส่ง/เก็บ/เปลี่ยนแปลงข้อมูลภายใน Component เช่น การกดปุ่มเพื่อนับเลข

จากตัวอย่างจะเห็นว่า

มีการกำหนด state ให้มีค่า count เริ่มต้นที่ 0
สร้างฟังก์ชัน _countNumber() สำหรับเพิ่มค่า count ทีละ 1 ผ่านคำสั่ง this.setState
render ค่า count ปัจจุบันโดยรับค่ามาจาก this.state.count
เมื่อมีการกดปุ่มจะให้ไปทำคำสั่งในฟังก์ชัน _countNumber()