React คืออะไร

React คือ JavaScript Library ที่ใช้สำหรับการสร้าง User Interface ฝั่ง Front-end สร้างขึ้นมาโดยทีมของ Facebook และใช้งานภายในตั้่งแต่ปี 2011 หลังจากนั้นจึงเปิดเป็น Open source ในปี 2013

นอกจากเราจะมี React เป็น Library สำหรับการสร้าง Web Application แล้วเรายังมี React Native สำหรับพัฒนา Native Mobile Application ซึ่งใช้ Syntax แบบเดียวกันเรียกว่าเรียนครั้งเดียวพัฒนาได้ทั้ง Web และ Mobile เลย

ข้อดีของ React

1. Improved User Experience

การใช้ React จะทำให้ Application ของเรากลายเป็น Single Page Application(SPA) ซึ่งจะ load หน้า HTML ลงมาหน้าเดียวหลังจากนั้นจะใช้ JavaScript ไปดึงข้อมูลจาก API มา update หน้า Web ทั้งหมด ซึ่งการเป็น SPA จะเพิ่ม User Experience ให้กับ User มากขึ้น

2. Reuseable Components

React เป็นต้นกำเนิดของ Reuseable Component ซึ่งเป็นต้นแบบของทั้ง Angular และ VueJS ซึ่ง React จะใช้การสร้าง Component เล็กๆขึ้นมาแล้วนำไปแสดงผลรวมกันกลายเป็น 1 หน้าใน Web Application ซึ่งแนวคิดแบบนี้จะทำให้เราสามารถนำ Components ที่เราเคยสร้างไว้กลับมาใช้ใหม่ได้เรื่อยๆ

3. Efficient Development Process

React จะช่วยให้เราพัฒนา Application เร็วขึ้นมากๆ เนื่องจากมี Component ที่เป็น Open-source ทำให้เราสามารถนำ Component ต่างๆเหล่านั้นมาใช้งานได้เลย โดยที่เราไม่ต้องมาสร้างใหม่ตั้งแต่ต้น รวมทั้งเครื่องมือในการ Debug ต่างๆเช่น React Developer Tools ที่ตะช่วยให้เราค้นหาปัญหาได้เร็วขึ้น

4. SEO-Friendly

การทำ SEO เราต้่องการผลลัพธ์จาก Server เป็น HTML เพราะ Google ต้องการรู้ว่าเรากำลังแสดงผลอะไร ซึ่งต้องใช้ Server-Side Rendering(SSR) ซึ่งจะ Render HTML ออกมาจาก Server ซึ่งจะทำให้หน้า Web ของเราติด Search-Engine ได้ด้วย

5. Easy Integration

เราสามารถเชื่อมต่อกับ API หลังบ้านได้ง่ายมากๆด้วย Axios ซึ่งเป็น Library ยอดนิยมที่มีคนใช้เยอะมากๆ และด้วยการที่ React เป็น Single Page Application(SPA) ทำให้เราเป็นอิสระจาก API ที่ฝั่ง Back-end ซึ่งพัฒนามาจาก Technologies ใดๆก็ได้

เริ่มต้นสร้าง React Application

เราสามารถเริ่มต้นสร้าง React Application ได้ด้วยตำสั่งต่างๆ ดังนี้

สร้าง React Application ขึ้นมาด้วย npx(คุณต้องติดตั้ง NodeJs ก่อน)
```
$ npx create-react-app hell-react
```
เปลี่ยน directory ไปที่ hello-react
```
$ cd hell-react
```
Start react application ขึ้นมาด้วยคำสั่ง
```
$ npm start 
```
หลังจากนั้นเข้าไปที่ URL http://localhost:3000 ก็จะได้ React Application ขึ้นมาดังรูป

หน้าแรกของ React Application

React ทำงานยังไง?

หลังจากที่เราสร้าง React Application ขึ้นมาแล้วเราจะได้โครงสร้างของไฟล์ตามนี้

├── hello-react
│   ├── node_modules
│   ├── public
│   |   ├── index.html
│   |   ├── manifest.json
│   |   ├── ...
│   ├── src
│   |   ├── App.js
│   |   ├── App.css
│   |   ├── index.js
│   |   ├── index.css
│   |   ├── ...
│   ├── .gitignore
│   ├── package-lock.json
│   ├── package.json
│   ├── README.md

ซึ่งไฟล์ที่มีความสำคัญๆที่เราต้องทำความรู้จักไว้คือ

public/index.html ไฟล์นี้่จะเป็นผลลัพธ์ที่เราจะนำไปใช้งานจริงซึ่งจาก template ที่เราสร้างขึ้นมาจาก create-react-app จะนำ react component ที่ render ออกมาไปวางไว้ที่

1
2
3
4
5
6
7
8
9


<html>
    <head>
        ....
    </head>
    <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="root"></div>
    </body>
</html>

src/App.js เป็น default component ที่ react create ขึ้นมาให้ดูเป็นตัวอย่างเราจะใช้หรือไม่ใช้ก็ได้ ซึ่ง content ใน App.js จะเป็นดังนี้

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


import logo from './logo.svg';
import './App.css';

function App() {
    return (
        <div className="App">
            <header className="App-header">
                <img src={logo} className="App-logo" alt="logo" />
                ...
            </header>
        </div>
    );
}

export default App;

ใน บรรทัดที่ื 2 จะเป็นการ load stylesheet ของ component นี้เข้ามาใช้งาน และในบรรทัดที่ 6 เป็นการกำหนด className เพื่อจัดรูปแบบการแสดงผล(className จะเหมือนกับ Class ใน CSS ปกติ เนื่องจาก Class เป็น reserved word ใน React เราเลยต้องใช้ ClassName แทน)

หลังจากนั้นในบรรทัดที่ 15 จะเป็นการ export component นี้ออกไปใช้งาน ซึ่งเราจะไปเรียกใช้งาน Component App ในไฟล์ index.js ต่อไป

src/index.js ไฟล์นี้จะเป็นจุดเริ่มต้นของ Javascript โดยใน index.js จะมีเนื้อหาดังนี้

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

reportWebVitals();

ในไฟล์นี้จะเป็นเหมือน template ซึ่งตอนนี้เราจะมี component แค่ตัวเดียวคือ <App />(ในบรรทัดที่ 10) ซึ่งจะได้ผลลัพธ์มาจากการ render html ออกมาจากไฟล์ App.js แล้วหลังจากนั้นก็จะนำผลลัพธ์ที่ได้จาก index.js ไปวางไว้ใน div ที่มี id เป็น root ซึ่งอยู่ใน index.html

และถ้าเราต้องการที่จะวัด performance ของ react application เราสามารถใส่ parameters เข้าไปใน reportWebVitals() ในบรรทัดที่ 14 ได้ เช่น ถ้าเราต้องการให้แสดงผลใน log เราจะใส่ console.log เข้าไปใน reportWebVitals() แบบนี้

reportWebVitals(console.log);

WebVitals คือชุดของตัววัด performace ของ Website ซึ่งจะมีตัววัดหลายตัว เช่น Largest Contentful Paint(LCP) จะดูว่า Content ของเราใช้เวลาในการ load เท่าไหร่ ยิ่งใช้เวลาในการ load content น้อยก็ยิ่งดี และนอกจาก LCP ยังมีตัววัดอื่นๆอีกที่จะบอกว่า Web ของเรามีประสิทธิภาพเป็นอย่างไร(Webvitals มีผลกับการจัดอันดับใน Google ด้วยนะ)

ถ้าต้องการให้ส่งข้อมูลเข้าไปยัง Google Analytics เพื่อเพิ่มรายละเอียดของการวัด เราจะต้องเพิ่ม function เข้าไปแบบนี้

function sendToAnalytics({ id, name, value }) {
    ga('send', 'event', {
        eventCategory: 'Web Vitals',
        eventAction: name,
        eventValue: Math.round(name === 'CLS' ? value * 1000 : value), // values must be integers
        eventLabel: id, // id unique to current page load
        nonInteraction: true, // avoids affecting bounce rate
    });
}

reportWebVitals(sendToAnalytics);

ดุวิธีการส่งค่าวัดไปยัง Google Analytics เพิ่มเติมได้ที่ https://github.com/GoogleChrome/web-vitals

React StrictMode

React StructMode คือการแสดง Warning ของ Elements ที่อยู่ภายใต้ StrictMode เราจะครอบ StrictMode เฉพาะ Element ที่เราสนใจเท่านั้น

การใช้ StrictMode จะมีผลเฉพาะบน Development Environment เท่านั้น จะไม่มีผลใดๆบน Production

JavaScript XML(JSX)

ในการทำงานกับ React ต้องรู้จักกับ JSX ซึ่ง JSX คือ Syntax ที่ใกล้เคียงกับ HTML ทำให้เราสามารถเขียน HTML ลงไปใน Component ต่างๆของ React ได้

ตัวอย่าง ถ้่าเราสร้าง Component โดยไม่ใช้ JSX เราจะต้องเขียนแบบนี้

1
2
3
4


const myElement = React.createElement('h1', {}, 'I do not use JSX!');

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

ซึ่งจะเห็นว่าอ่านยากมากๆ ซึ่งถ้าเราเปลี่ยนเป็น JSX จะเป็นแบบนี้

1
2
3
4


const myElement = <h1>Hello JSX!</h1>;

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

ซึ่งจะเหมือนกับเราเขียน HTML ธรรมดา ดังนั้นจะง่ายกว่าการ createElement มากๆ

เขียน Expression ใน JSX

เราสามารถเขียน Expression ลงใน JSX ได้ด้วยการใส่ {} เข้าไปแบบนี้ิ

const myElement = <h1>React latest version is {10 + 8}</h1>;

ใส่ HTML หลายๆบรรทัด

เราสามารถใช้ () ครอบ HTML เพื่อให้เขียนได้มากกว่า 1 บรรทัด แบบนี้

1
2
3
4
5
6
7


const myElement = (
  <ul>
    <li>Angular</li>
    <li>React</li>
    <li>VueJS</li>
  </ul>
);

ถึงแม้ว่าเราจะสามารถใส่ HTML ได้หลายบรรทัดแต่ JSX จะกำหนดให้เรามี root element ได้แค่เพียงตัวเดียวเท่านั้น ซึ่งถ้าต่้องการใส่หลายๆ element ให้ครอบด้วย <div /> แบบนี้

1
2
3
4
5
6


const myElement = (
  <div>
    <p>HTML Block ที่ 1</p>
    <p>HTML Block ที่ื 2</p>
  </div>
);

หรือถ้าเราไม่อยากจะแทรก <div /> เข้าไปใน DOM เราสามารถใช้ React.Fragment แทนได้ โดย React จะไม่เพิ่ม element ใดๆเข้าไปใน DOM

const myElement = (
  <React.Fragment>
    <p>HTML Block ที่ 1</p>
    <p>HTML Block ที่ื 2</p>
  </React.Fragment>
);

หรือเราสามารถเขียนสั้นๆได้แบบนี้

const myElement = (
  <>
    <p>HTML Block ที่ 1</p>
    <p>HTML Block ที่ื 2</p>
  </>
);

JSX ต้องปิด Tag เสมอ

เนื่องจาก JSX คือ Javascript XML เราจึงต้องเขียน JSX ให้ถูกต้องตามข้อกำหนดของ XML เช่นการปิด Tag ถ้าเป็น Tag เดี่ยวจะต้องมีการปิด Tag(ต้องมี / ก่อนปิด Tag) แบบนี้

const myElement = <input type="text" />;

การสร้างเงื่อนไขด้วย if statement

ใน React เราสามารถใช้ if ได้ในการระบุเงื่อนไขของการแสดงผลได้แต่ไม่ได้รวมอยุ่ใน JSX เราสามารถเลือกเขียนแบบเต็มๆก็ได้

const isDisplay = true;
let text = "Hello react";
if (isDisplay) {
  text = "Show this message when isDisplay is true";
}

const myElement = <h1>{text}</h1>;

หรือเราจะเขียนแบบสั้นๆได้แบบนี้

const isPaid = true;

const myElement = <h1>{ isDisplay ? "Paid" : "Ordered"}</h1>;

ซึ่งส่วนใหญ่การเขียนแบบสั้นจะอ่านง่ายมากกว่า

การ Deploy React

การนำ React ไปใช้งานเราจะต้องทำการ build react application ของเราออกมาด้วยคำสั่ง

$ npm run build

หรือใช้ yarn ในการ build โดยใช้คำสั่ง

$ yarn build

React Developer Tools

React Developer Tools คือเตรื่องมือที่ช่วย Debug การทำงานของ React ซึ่งจะช่วยให้เราค้นหสปัญหาได้เร็วขึ้น เราสามารถใช้งาน React Developer Tools ทั้งแบบติดตั้งเป็น Extension บน Browser หรือจะติดตั้งแบบ Standalone ผ่าน npm หรือ yarn ก็ได้่ ลองอ่านวิธีการติดตั้งและใช้งาน React Developer Tools ได้ที่นี่