เครื่องมือ AI สามารถช่วยฉันเขียนโค้ด React ได้หรือไม่?

ใช่แล้ว ผู้ช่วยอย่าง GitHub Copilot และ ChatGPT สามารถสร้างโครงสร้างคอมโพเนนต์ อธิบายข้อผิดพลาด และแปลงคอมโพเนนต์แบบคลาสเป็น Hooks ได้ ควรตรวจสอบโค้ดที่สร้างขึ้นเสมอ เนื่องจาก AI อาจแนะนำ API ที่ล้าสมัย เช่น ReactDOM.render

บทช่วยสอน ReactJS สำหรับผู้เริ่มต้น

⚡ สรุปอย่างชาญฉลาด

ReactJS เป็นหัวใจสำคัญของส่วนติดต่อผู้ใช้ (UI) ในเว็บไซต์และแอปพลิเคชันมือถือสมัยใหม่จำนวนนับไม่ถ้วน หน้านี้อธิบายว่าไลบรารีนี้คืออะไร วิธีการตั้งค่า และวิธีการทำงานร่วมกันของคอมโพเนนต์ JSX สเตท พรอพส์ และอีเวนต์

⚛️ Foundation: ReactJS เป็นไลบรารีโอเพนซอร์สที่ใช้คอมponent เป็นพื้นฐาน Javaไลบรารีสคริปต์ที่สร้างขึ้นที่ Facebook (ปัจจุบันคือ Meta) สำหรับสร้างส่วนติดต่อผู้ใช้แบบโต้ตอบที่รวดเร็ว
🧩 องค์ประกอบ ส่วนประกอบที่นำกลับมาใช้ซ้ำได้ ซึ่งเขียนในรูปแบบของฟังก์ชันหรือคลาส จะแบ่งตรรกะของ UI ออกเป็นส่วนย่อยๆ ที่เป็นอิสระและดูแลรักษาได้ง่าย
📝 เจเอสเอ็กซ์: A Javaส่วนขยายไวยากรณ์สคริปต์ช่วยให้คุณสามารถเขียนมาร์กอัปและนิพจน์ที่คล้ายกับ HTML ได้ภายในไฟล์เดียวกัน
🔄 รัฐและทรัพย์สิน: State ทำหน้าที่เก็บข้อมูลส่วนตัวที่เปลี่ยนแปลงได้ภายในคอมponent ในขณะที่ props ส่งข้อมูลแบบอ่านอย่างเดียวเข้าไป
⚙️ เส้นทางการตั้งค่า: แท็กสคริปต์ CDN เหมาะสำหรับการทดลองอย่างรวดเร็ว ในขณะที่แพ็กเกจ npm หรือ Vite เหมาะสำหรับโครงการจริง
🚀 การปฏิบัติสมัยใหม่: ปัจจุบัน Function components ที่ใช้ Hooks และ API createRoot ของ React 18+ เป็นมาตรฐานที่แนะนำแล้ว
💼 ผลกระทบต่ออาชีพ: ทักษะ React ยังคงเป็นหนึ่งในทักษะที่เป็นที่ต้องการมากที่สุดในประกาศรับสมัครงานตำแหน่งนักพัฒนา front-end ทั่วโลก

อ่านเพิ่มเติม

ReactJS คืออะไร?

ReactJS เป็นฟรอนต์เอนด์แบบโอเพ่นซอร์ส Javaไลบรารีสคริปต์สำหรับสร้างอินเทอร์เฟซผู้ใช้ ReactJS แพลตฟอร์มนี้ได้รับการดูแลโดย Meta (เดิมคือ Facebook) และชุมชนของนักพัฒนาและบริษัทต่างๆ มีการใช้งานอย่างแพร่หลายในฐานะพื้นฐานในการสร้างแอปพลิเคชันแบบหน้าเดียวและแอปพลิเคชันบนมือถือ ใช้งานง่ายมาก และช่วยให้ผู้ใช้สามารถสร้างส่วนประกอบ UI ที่นำกลับมาใช้ซ้ำได้

ก่อนที่คุณจะเขียนโค้ด React บรรทัดแรก การรู้ว่าไลบรารีนี้แตกต่างจาก React ทั่วไปอย่างไร จะช่วยได้มาก Javaสคริปต์ ส่วนถัดไปจะอธิบายถึงคุณสมบัติหลักของสคริปต์

คุณสมบัติของ ReactJS

เจเอสเอ็กซ์: JSX เป็นส่วนขยายของ Javaสคริปต์ แม้ว่าการใช้ JSX ใน React จะไม่ใช่ข้อบังคับ แต่ก็เป็นหนึ่งในคุณสมบัติที่ดีและใช้งานง่าย

ชิ้นส่วน ส่วนประกอบต่างๆ เปรียบเสมือนสิ่งบริสุทธิ์ Javaฟังก์ชันสคริปต์ช่วยให้การเขียนโค้ดง่ายขึ้นโดยการแบ่งตรรกะออกเป็นโค้ดอิสระที่สามารถนำกลับมาใช้ซ้ำได้ เราสามารถใช้คอมโพเนนต์เป็นฟังก์ชันและคอมโพเนนต์เป็นคลาสได้ คอมโพเนนต์ยังมีสถานะและพร็อพ ซึ่งทำให้ชีวิตง่ายขึ้น ภายในคอมโพเนนต์แบบคลาส สถานะและพร็อพจะถูกเก็บรักษาไว้

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

Javaนิพจน์สคริปต์: สามารถใช้นิพจน์ JavaScript ในไฟล์ JSX ได้โดยใช้เครื่องหมายวงเล็บปีกกา เช่น {}

ข้อดีของ ReactJS

ต่อไปนี้คือข้อดี/ประโยชน์ที่สำคัญของการใช้ ReactJS:

ReactJS ใช้ Virtual DOM ซึ่งใช้แคชโครงสร้างข้อมูลในหน่วยความจำ และจะมีการอัปเดตเฉพาะการเปลี่ยนแปลงครั้งสุดท้ายใน DOM ของเบราว์เซอร์เท่านั้น ทำให้แอปทำงานได้เร็วขึ้น
คุณสามารถสร้างคอมponent ตามที่คุณต้องการได้โดยใช้ฟีเจอร์คอมponent ของ React คอมponent เหล่านี้สามารถนำกลับมาใช้ซ้ำได้และยังช่วยในการบำรุงรักษาโค้ดอีกด้วย
ReactJS เป็นซอฟต์แวร์โอเพนซอร์ส Javaมีไลบรารีสคริปต์ จึงเริ่มต้นใช้งานได้ง่าย
ReactJS ได้รับความนิยมอย่างมากในระยะเวลาอันสั้น และเป็นหัวใจสำคัญของผลิตภัณฑ์ต่างๆ เช่น Facebook และอื่นๆ Instagramบริษัทชื่อดังหลายแห่ง เช่น Apple ก็ใช้เทคโนโลยีนี้เช่นกัน Netflixฯลฯ
Meta เป็นผู้ดูแลไลบรารี ReactJS ดังนั้นจึงได้รับการดูแลรักษาอย่างดีและมีการอัปเดตอย่างสม่ำเสมอ
ReactJS สามารถใช้ในการพัฒนา UI ที่หลากหลายสำหรับทั้งแอปเดสก์ท็อปและมือถือ
ง่ายต่อการแก้ไขและทดสอบ เนื่องจากโค้ดส่วนใหญ่เสร็จสิ้นแล้ว Javaต้นฉบับ แทนที่จะใช้ HTML

ข้อเสียของ ReactJS

ต่อไปนี้คือข้อเสีย/ข้อจำกัดของการใช้ ReactJS:

โค้ดส่วนใหญ่เขียนด้วย JSX กล่าวคือ HTML และ CSS เป็นส่วนหนึ่งของ JSX Javaสคริปต์ อาจทำให้สับสนได้มาก เนื่องจากเฟรมเวิร์กอื่นๆ ส่วนใหญ่ชอบใช้ keeping HTML แยกต่างหากจาก Javaโค้ดสคริปต์
ขนาดไฟล์ของ ReactJS ค่อนข้างใหญ่เมื่อเทียบกับไฟล์อื่นๆ

เมื่อทราบข้อดีข้อเสียแล้ว คุณก็พร้อมที่จะตั้งค่า React แล้ว วิธีที่เร็วที่สุดในการทดลองใช้คือการใช้งานโดยตรงจาก CDN ซึ่งเราจะกล่าวถึงเป็นอันดับแรก ส่วนการตั้งค่าโดยใช้ npm สำหรับโปรเจ็กต์จริงจะตามมาในภายหลัง

ใช้ ReactJS จาก CDN

ในการเริ่มต้นใช้งาน React เราต้องเพิ่ม ReactJS ลงในหน้าเว็บของเราก่อน คุณสามารถเริ่มต้นใช้งาน ReactJS ได้ง่ายๆ โดยใช้ CDN Javaไฟล์สคริปต์ ดังแสดงด้านล่าง

ไปที่เว็บไซต์เอกสาร React เวอร์ชันเก่าเพื่อดูลิงก์ CDN เช่น https://legacy.reactjs.org/docs/cdn-links.htmlและคุณจะได้รับไฟล์ที่จำเป็นตามที่อธิบายไว้ในภาพต่อไปนี้

สำหรับผู้พัฒนา

<script crossorigin src="https://unpkg.com/react@version/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.development.js"></script>

สำหรับผลิตภัณฑ์

<script crossorigin src="https://unpkg.com/react@version/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.production.min.js"></script>

แทนที่ รุ่น เลือกเวอร์ชัน React ที่คุณต้องการสำหรับทั้งไฟล์ react.development.js และ react-dom.development.js ในหน้านี้เราใช้เวอร์ชัน 16 ดังนั้นตัวอย่างด้านล่างจึงทำงานได้โดยไม่มีการเปลี่ยนแปลง

💡 หมายเหตุ: การสร้างบิลด์ UMD/CDN เหล่านี้เป็นวิธีการแบบเก่าที่ใช้ได้กับ React เวอร์ชันไม่เกิน 18 และยังคงใช้ได้ดีสำหรับการเรียนรู้ React 19 ไม่รองรับการสร้างบิลด์ UMD อีกต่อไปแล้ว และ React 18 ขึ้นไปได้เปลี่ยนมาใช้แบบอื่นแทน ReactDOM.render สีสดสวย createRoot — โปรดดูส่วนเกี่ยวกับเวอร์ชันของ React บริเวณท้ายหน้านี้

ในกรณีที่คุณวางแผนจะใช้ไฟล์ CDN โปรดตรวจสอบให้แน่ใจว่าได้คงแอตทริบิวต์ crossorigin ไว้เพื่อหลีกเลี่ยงปัญหาการเข้าถึงข้ามโดเมน โค้ด ReactJS ไม่สามารถทำงานได้โดยตรงในเบราว์เซอร์และจำเป็นต้องแปลงเป็นโค้ดธรรมดาโดยใช้ Babel Javaตรวจสอบสคริปต์ก่อนเรียกใช้งานในเบราว์เซอร์

นี่คือสคริปต์ BabelJS ที่สามารถใช้ได้:

<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

นี่คือตัวอย่างการใช้งาน ReactJS โดยใช้ไฟล์จาก CDN และสคริปต์ BabelJS

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, from Guru99 Tutorials!</h1>,
        document.getElementById('app')
      );
   </script>
  </body>
</html>

Output:

เราจะเจาะลึกรายละเอียดของโค้ดในบทต่อไป มาดูวิธีการทำงานร่วมกับไฟล์ CDN กันก่อน การใช้สคริปต์ Babel โดยตรงไม่ใช่แนวทางปฏิบัติที่ดี และผู้เริ่มต้นควรใช้มันเพื่อเรียนรู้ ReactJS เท่านั้น ในการใช้งานจริง คุณจะต้องติดตั้ง React โดยใช้แพ็กเกจ npm

การใช้แพ็คเกจ NPM

ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง Node.js แล้ว หากยังไม่ได้ติดตั้ง โปรดทำตามบทช่วยสอนนี้สำหรับการติดตั้ง Node.js (https://www.guru99.com/node-js-tutorial.html) การติดตั้ง.

เมื่อติดตั้ง Node.js เสร็จแล้ว ให้สร้างโฟลเดอร์ขึ้นมา รีแอคโปรเจ/.

หากต้องการเริ่มต้นด้วยการตั้งค่าโปรเจ็กต์ ให้รันคำสั่ง เริ่มต้น npm.

โครงสร้างโฟลเดอร์จะมีลักษณะดังนี้:

reactproj\
package.json

ตอนนี้เราจะติดตั้งแพ็คเกจที่เราต้องการ

นี่คือรายการแพ็กเกจสำหรับ ReactJS เรากำหนดเวอร์ชัน React ไว้ที่ 16 ดังนั้น... ReactDOM.render ตัวอย่างในหน้านี้ทำงานตรงตามที่แสดงไว้ทุกประการ:

npm install react@16 --save
npm install react-dom@16 --save
npm install react-scripts --save

เปิดหน้าต่าง Command Prompt แล้วรันคำสั่งข้างต้นภายในโฟลเดอร์ reactproj/

สร้างโฟลเดอร์ src / โฟลเดอร์นี้จะเก็บโค้ด JavaScript ทั้งหมด โค้ดทั้งหมดสำหรับโปรเจ็กต์ ReactJS จะอยู่ในโฟลเดอร์ src/ สร้างไฟล์ index.js และนำเข้า react และ react-dom ดังที่แสดงด้านล่าง

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

เราได้เขียนโค้ดพื้นฐานสำหรับ ReactJS แล้ว เราจะอธิบายรายละเอียดเพิ่มเติมในบทต่อไป เราต้องการแสดงผล สวัสดี จาก Guru99 บทช่วยสอนและกำหนดค่าเดียวกันนี้ให้กับองค์ประกอบ DOM ที่มี id เป็น “root” โดยนำมาจากไฟล์ index.html ซึ่งเป็นไฟล์เริ่มต้น ดังแสดงด้านล่าง

สร้างโฟลเดอร์ชื่อ public/ แล้วเพิ่มไฟล์ index.html เข้าไปในโฟลเดอร์นั้น ดังตัวอย่างด้านล่าง

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
  </head>
  <body>
    <div id = "root"></div>
   </body>
</html>

แพ็กเกจ react-scripts จะจัดการเรื่องการคอมไพล์โค้ดและเริ่มต้นเซิร์ฟเวอร์เพื่อแสดงไฟล์ HTML เช่น index.html คุณต้องเพิ่มคำสั่งในไฟล์ package.json ที่จะใช้ react-scripts ในการคอมไพล์โค้ดและเริ่มต้นเซิร์ฟเวอร์ ดังตัวอย่างด้านล่าง:

 "scripts": {
    "start": "react-scripts start"
  }

หลังจากติดตั้งแพ็คเกจทั้งหมดและเพิ่มคำสั่งข้างต้นแล้ว package.json สุดท้ายจะเป็นดังนี้:

แพ็คเกจ.json

{
  "name": "reactproj",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "react-scripts start"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "^3.1.1"
  }
}

หากต้องการเริ่มทดสอบ ReactJS ให้รันคำสั่ง:

npm run start

C:\reactproj>npm run start
> reactproj@1.0.0 start C:\reactproj
> react-scripts start

มันจะเปิดเบราว์เซอร์ด้วย URL http://localhost:3000/ ดังต่อไปนี้:

สาธารณะ/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

เราจะใช้กระบวนการเดียวกันในการดำเนินการ Javaไฟล์สคริปต์จะอยู่ในบทต่อไปด้วย เพิ่มไฟล์ .js และ .jsx ทั้งหมดของคุณลงในโฟลเดอร์ src/ โครงสร้างไฟล์จะเป็นดังนี้:

reactproj/
	 src/
	    index.js
	 node_modules/
	 public/
                index.html
	 package.json

วิธีสร้างการตั้งค่าโปรเจ็กต์ React ครั้งแรกของคุณ

นี่คือคำแนะนำทีละขั้นตอนในบทเรียน ReactJS นี้ เพื่อเริ่มต้นสร้างแอปพลิเคชัน React ตัวแรก

ขั้นตอน 1) นำเข้าแพ็คเกจการโต้ตอบ
1. ในการเริ่มต้นด้วย ReactJS เราต้องนำเข้าแพ็คเกจการโต้ตอบก่อนดังนี้

import React from 'react';
import ReactDOM from 'react-dom';

2. บันทึกไฟล์เป็น index.js ในโฟลเดอร์ src/

ขั้นตอน 2) เขียนง่ายๆ Code.
เราจะเขียนโค้ดง่ายๆ ในบทช่วยสอน React JS นี้ โดยเราจะแสดงข้อความ สวัสดี จาก Guru99 บทเรียน!

ReactDOM.render(

<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

ReactDOM.render จะเพิ่ม เพิ่มแท็กให้กับองค์ประกอบที่มี id เป็น root นี่คือไฟล์ HTML ที่เรามีอยู่:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

ขั้นตอน 3) รวบรวม Code.

ต่อไปในบทช่วยสอน React.js นี้ เราจำเป็นต้องคอมไพล์โค้ดเพื่อรับเอาต์พุตในเบราว์เซอร์

นี่คือโครงสร้างโฟลเดอร์:

reactproj/
     node_modules/
     src/
       index.js
     package.json
     public/
          index.html

เราได้เพิ่มคำสั่งในการคอมไพล์ไฟล์สุดท้ายใน package.json ดังนี้:

"scripts": {
    "start": "react-scripts start"
  },

ในการคอมไพล์ไฟล์สุดท้าย ให้รันคำสั่งต่อไปนี้:

npm run start

เมื่อคุณรันคำสั่งข้างต้น ระบบจะคอมไพล์ไฟล์และแจ้งให้คุณทราบหากมีข้อผิดพลาดใดๆ หากทุกอย่างเรียบร้อยดี ระบบจะเปิดเบราว์เซอร์และเรียกใช้งานหน้าเว็บ http://localhost:3000/

คำสั่ง: npm run start:

C:\reactproj>npm run start

> reactproj@1.0.0 start C:\reactproj
> react-scripts start

ขั้นตอน 4) ตรวจสอบเอาท์พุต
การขอ URL http://localhost:3000 จะเปิดในเบราว์เซอร์เมื่อโค้ดคอมไพล์เสร็จแล้ว ดังแสดงด้านล่าง:

วิธีการตั้งค่า React กับ Vite (แนวทางสมัยใหม่)

การตั้งค่า react-scripts ด้านบนมาจาก Create React App (CRA) ซึ่งเป็นเครื่องมือเริ่มต้นมาตรฐานมาหลายปี ทีม React ได้ประกาศยกเลิกการใช้งาน Create React App อย่างเป็นทางการในเดือนกุมภาพันธ์ 2025 ดังนั้นโครงการใหม่ควรใช้เครื่องมือสร้างโปรเจ็กต์ที่ทันสมัยกว่าแทน ตัวเลือกที่ได้รับความนิยมมากที่สุดในปัจจุบันคือ ชีวิตซึ่งเริ่มต้นได้เร็วกว่าและสร้างไฟล์ที่มีขนาดเล็กกว่า

ต่อไปนี้คือวิธีการสร้างโปรเจ็กต์ React ใหม่ด้วย Vite:

ขั้นตอน 1) เรียกใช้คำสั่ง scaffolding ในเทอร์มินัลของคุณ:

npm create vite@latest my-react-app -- --template react

ขั้นตอน 2) เข้าไปในโฟลเดอร์และติดตั้งส่วนประกอบที่จำเป็น:

cd my-react-app
npm install

ขั้นตอน 3) เริ่มเซิร์ฟเวอร์สำหรับการพัฒนา:

npm run dev

Vite ให้บริการแอปที่ http://localhost:5173/ โดยค่าเริ่มต้นจะโหลดใหม่ทันทีเมื่อคุณบันทึกไฟล์

ข้อแตกต่างที่สำคัญจากรูปแบบเดิมในหน้านี้:

ไฟล์ข้อมูลเริ่มต้นคือ src/main.jsx แทนที่จะใช้ src/index.js
โปรแกรมจะติดตั้ง React เวอร์ชันล่าสุด ซึ่งใช้... สร้างรูท แทนที่จะใช้ ReactDOM.render
ไฟล์ index.html อยู่ในไดเร็กทอรีหลักของโปรเจ็กต์ ไม่ได้อยู่ใน public/
สิ่งก่อสร้างถูกสร้างขึ้นด้วย npm run build ลงในโฟลเดอร์ dist/

สำหรับความต้องการด้าน Full-stack เช่น การกำหนดเส้นทางและการเรนเดอร์ฝั่งเซิร์ฟเวอร์ ทีม React ยังแนะนำเฟรมเวิร์กต่างๆ เช่น เน็กซ์.เจสทุกสิ่งที่คุณเรียนรู้ในบทด้านล่างนี้ ไม่ว่าจะเป็น JSX, คอมโพเนนต์, สเตท และพร็อพส์ สามารถนำไปใช้ได้โดยไม่เปลี่ยนแปลงในโปรเจ็กต์ Vite หรือ Next.js

JSX คืออะไร?

JSX เป็นส่วนขยายของ Javaสคริปต์ นี่คือสคริปต์แม่แบบที่จะช่วยให้คุณสามารถใช้ HTML ได้อย่างอิสระ Javaเขียนบทด้วยกัน

นี่คือตัวอย่างง่ายๆ ของโค้ด JSX

const h1tag = "<h1>Hello, from Guru99 Tutorials!</h1>";

ทำไมเราต้องมี JSX ใน React?

สำหรับส่วนติดต่อผู้ใช้ (UI) เราจำเป็นต้องใช้ HTML และแต่ละองค์ประกอบใน DOM จะมีเหตุการณ์ที่ต้องจัดการ การเปลี่ยนแปลงสถานะ ฯลฯ

ในกรณีของ React นั้น ช่วยให้เราสามารถใช้งาน HTML และ Javaเขียนสคริปต์ไว้ในไฟล์เดียวกันและจัดการการเปลี่ยนแปลงสถานะใน DOM อย่างมีประสิทธิภาพ

นิพจน์ใน JSX

นี่คือตัวอย่างง่ายๆ ของวิธีใช้นิพจน์ใน JSX

ในตัวอย่าง ReactJS ก่อนหน้านี้ เราเขียนไว้ประมาณนี้:

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

ต่อไปนี้เราจะแก้ไขโค้ดด้านบนเพื่อเพิ่มนิพจน์ นิพจน์จะใช้ภายในวงเล็บปีกกา {} และจะถูกขยายในระหว่างการทำงาน นิพจน์ใน React นั้นเหมือนกับ... Javaนิพจน์สคริปต์

index.js

import React from 'react';
import ReactDOM from 'react-dom';

const display = "Hello, from Guru99 Tutorials!";
const h1tag = "<h1>{display}</h1>";
ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

ตอนนี้ให้เราทดสอบแบบเดียวกันในเบราว์เซอร์

จากภาพหน้าจอข้างต้น คุณจะเห็นว่านิพจน์ {display} ไม่ได้รับการแทนที่ React ไม่รู้ว่าจะทำอย่างไรเมื่อมีการใช้นิพจน์ภายในไฟล์ .js

ให้เราเพิ่มการเปลี่ยนแปลงและสร้างไฟล์ .jsx ดังที่แสดงด้านล่าง:

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

const display = "Hello, to Guru99 Tutorials";
const h1tag =<h1>{display}</h1>;
export default h1tag;

เราได้เพิ่มโค้ดที่จำเป็นแล้ว และจะใช้ไฟล์ test.jsx ใน index.js เราต้องการให้ h1tag ตัวแปรที่จะใช้ภายในไฟล์ index.js ดังนั้นจึงมีการส่งออกตัวแปรเดียวกันดังที่แสดงไว้ข้างต้นในไฟล์ test.jsx

ต่อไปนี้คือโค้ดที่แก้ไขแล้วในไฟล์ index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import h1tag from './test.jsx';

ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

ในการใช้งานไฟล์ test.jsx ในไฟล์ index.js เราต้องนำเข้าไฟล์นั้นก่อน ดังที่แสดงด้านล่าง:

import h1tag from './test.jsx';

ตอนนี้เราสามารถใช้ h1tag ใน ReactDOM.render ดังที่แสดงด้านล่าง:

ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

นี่คือผลลัพธ์เมื่อเราตรวจสอบสิ่งเดียวกันในเบราว์เซอร์:

ส่วนประกอบใน ReactJS คืออะไร?

ส่วนประกอบต่างๆ เปรียบเสมือนสิ่งบริสุทธิ์ Javaฟังก์ชันสคริปต์ที่ช่วยให้การเขียนโค้ดง่ายขึ้น โดยการแบ่งตรรกะออกเป็นโค้ดอิสระที่สามารถนำกลับมาใช้ซ้ำได้

ส่วนประกอบเป็นฟังก์ชัน

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';
function Hello() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
}
const Hello_comp = <Hello />;
export default Hello_comp;

เราได้สร้างฟังก์ชันที่เรียกว่า สวัสดี ฟังก์ชันนี้จะส่งคืนแท็ก h1 ดังแสดงในภาพด้านบน ชื่อของฟังก์ชันทำหน้าที่เป็นองค์ประกอบ ดังแสดงในภาพด้านล่าง:

const Hello_comp = <Hello />;
export default Hello_comp;

ส่วนประกอบ สวัสดี ใช้เป็นแท็ก HTML เช่น มอบหมายให้กับ สวัสดี_คอม ตัวแปร และตัวแปรเดียวกันนี้จะถูกส่งออกไปโดยใช้คำสั่ง export

ต่อไปนี้เราจะใช้คอมโพเนนต์นี้ในไฟล์ index.js ดังที่แสดงด้านล่าง:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

นี่คือผลลัพธ์ในเบราว์เซอร์:

คลาสเป็นส่วนประกอบ

นี่คือตัวอย่าง ReactJS ที่ใช้คลาสเป็นส่วนประกอบ

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  render() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
  }
}
export default Hello;

เราสามารถใช้คอมโพเนนต์ Hello ในไฟล์ index.js ได้ดังนี้:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello />,
    document.getElementById('root')
);

ส่วนประกอบ Hello ถูกใช้เป็นแท็ก HTML กล่าวคือ -

นี่คือผลลัพธ์ของสิ่งเดียวกัน

คอมโพเนนต์คลาส เทียบกับ คอมโพเนนต์ฟังก์ชัน และฮุก

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

แง่มุม	ส่วนประกอบคลาส	ส่วนประกอบฟังก์ชันที่มีฮุก
สถานะ	this.state และ this.setState()	ฮุก useState()
ระยะเวลาการ	componentDidMount, componentDidUpdate, componentWillUnmount	Hook useEffect() ครอบคลุมทั้งสามอย่าง
วากยสัมพันธ์	โค้ดพื้นฐานเพิ่มเติม (ตัวสร้าง, การผูก, สิ่งนี้)	สั้นกว่า ไม่มีคำหลักนี้
สถานะ	รองรับรูปแบบเดิม	แนะนำสำหรับโค้ดใหม่

ต่อไปนี้คือตัวอย่างสถานะจากหน้านี้ที่เขียนใหม่โดยใช้ Hook useState:

import React, { useState } from 'react';

function Hello() {
  const [msg] = useState("Hello, from Guru99 Tutorials!");
  return <h1>{msg}</h1>;
}
export default Hello;

ทั้งสองเวอร์ชันให้ผลลัพธ์เหมือนกัน เรียนรู้ไวยากรณ์ของคลาสที่ใช้ในบทด้านล่าง จากนั้นฝึกแปลงตัวอย่างแต่ละตัวอย่างเป็น Hooks

สถานะใน ReactJS คืออะไร?

รัฐคือ Javaอ็อบเจ็กต์สคริปต์ คล้ายกับ props ที่เก็บข้อมูลที่จะใช้กับการเรนเดอร์ของ ReactJS ข้อมูลสถานะเป็นอ็อบเจ็กต์ส่วนตัวและถูกใช้ภายในคอมโพเนนต์ภายในคลาสเท่านั้น

ตัวอย่างของรัฐ

ต่อไปนี้เป็นตัวอย่างการใช้งานสถานะภายในคลาส

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
       msg: "Hello, from Guru99 Tutorials!"
    }
  }
  render() {
    return <h1>{this.state.msg}</h1>;
  }
}
export default Hello;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello />,
    document.getElementById('root')
);

นี่คือสิ่งที่เราได้รับเมื่อทดสอบในเบราว์เซอร์:

อุปกรณ์ประกอบฉากใน ReactJS คืออะไร

Props คือคุณสมบัติที่ใช้ภายในคอมโพเนนต์ โดยทำหน้าที่เสมือนอ็อบเจ็กต์หรือตัวแปรส่วนกลางที่สามารถใช้ภายในคอมโพเนนต์ได้

อุปกรณ์ประกอบฉากไปยังส่วนประกอบของฟังก์ชัน

นี่คือตัวอย่างการส่งอุปกรณ์ประกอบฉากไปยังส่วนประกอบของฟังก์ชัน

import React from 'react';
import ReactDOM from 'react-dom';
function Hello(props) {
    return <h1>{props.msg}</h1>;
}
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

ดังที่แสดงไว้ข้างต้น เราได้เพิ่ม msg คุณลักษณะของ ส่วนประกอบ สามารถเข้าถึงได้ในลักษณะเดียวกันดังนี้ พร็อพ ภายในฟังก์ชัน Hello ซึ่งเป็นอ็อบเจ็กต์ที่จะมี msg รายละเอียดคุณลักษณะและใช้เป็นการแสดงออก

ส่วนประกอบที่ใช้ใน index.js ดังนี้:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

นี่คือผลลัพธ์ในเบราว์เซอร์:

อุปกรณ์ประกอบฉากไปยังองค์ประกอบคลาส

ในการเข้าถึงพร็อพในคลาส เราสามารถทำได้ดังนี้:

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  render() {
    return <h1>{this.props.msg}</h1>;
  }
}
export default Hello;

การขอ msg คุณลักษณะถูกส่งผ่านไปยังองค์ประกอบใน index.js ดังนี้:

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello msg="Hello, from Guru99 Tutorials!" />,
    document.getElementById('root')
);

นี่คือผลลัพธ์ในเบราว์เซอร์:

ตรวจสอบด้วย: - บทช่วยสอน AngularJS สำหรับผู้เริ่มต้น: เรียนรู้ AngularJS ทีละขั้นตอน

วงจรชีวิตของส่วนประกอบ

หลังจากที่ได้เรียนรู้เกี่ยวกับคอมponent, state และ props แล้ว ขั้นตอนต่อไปคือการทำความเข้าใจว่า React เรียกใช้เมธอดของคอมponent เมื่อใด วงจรชีวิตของคอมponent แบ่งออกเป็นสามขั้นตอน ได้แก่ การเริ่มต้น (Initialization), การติดตั้ง (Mounting), การอัปเดต (Update) และการยกเลิกการติดตั้ง (UnMounting)

ต่อไปนี้เป็นคำอธิบายโดยละเอียดของแต่ละขั้นตอน

คอมponent ใน ReactJS ประกอบด้วยขั้นตอนดังต่อไปนี้:

การเขียนอักษรย่อ: นี่คือระยะแรกของวงจรชีวิตของส่วนประกอบ

ที่นี่จะมีอุปกรณ์ประกอบฉากเริ่มต้นและสถานะในระดับเริ่มต้น

การติดในขั้นตอนนี้ คอมโพเนนต์จะถูกแสดงผลภายใน DOM เราสามารถเข้าถึงเมธอดต่อไปนี้ได้ในสถานะการติดตั้ง:

render(): คุณมีเมธอดนี้สำหรับคอมโพเนนต์ทั้งหมดที่สร้างขึ้น โดยจะส่งคืนโหนด HTML
componentDidMount(): ฟังก์ชันนี้จะถูกเรียกทันทีหลังจากที่คอมโพเนนต์ถูกเพิ่มเข้าไปใน DOM แล้ว

บันทึกในสถานะนี้ ผู้ใช้จะโต้ตอบกับ DOM และ DOM จะได้รับการอัปเดต ตัวอย่างเช่น คุณป้อนข้อความลงในช่องข้อความ ดังนั้นคุณสมบัติของสถานะจึงได้รับการอัปเดต

ต่อไปนี้คือวิธีการที่มีให้ใช้งานในสถานะการอัปเดต:

shouldComponentUpdate(): ฟังก์ชันนี้จะถูกเรียกก่อนการเรนเดอร์ใหม่ ช่วยให้คุณตัดสินใจได้ว่าควรจะอัปเดตคอมโพเนนต์หรือไม่ การส่งคืนค่า true จะทำการเรนเดอร์คอมโพเนนต์ใหม่
componentDidUpdate(): เรียกใช้หลังจากคอมponent ได้รับการอัปเดตแล้ว

การยกเลิกการติดตั้ง: สถานการณ์นี้จะเกิดขึ้นเมื่อส่วนประกอบนั้นไม่จำเป็นอีกต่อไปหรือถูกถอดออกไปแล้ว

ต่อไปนี้คือเมธอดที่สามารถใช้งานได้ในสถานะที่ไม่ได้ติดตั้งอุปกรณ์:

componentWillUnmount(): ฟังก์ชันนี้จะถูกเรียกก่อนที่คอมโพเนนต์จะถูกลบหรือทำลาย

ตัวอย่างการใช้งานวิธีการวงจรชีวิต

ต่อไปนี้เป็นตัวอย่างการทำงานที่แสดงให้เห็นถึงวิธีการที่เรียกใช้ในแต่ละขั้นตอน

ตัวอย่าง: complife.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class COMP_LIFE extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }

  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }

  componentDidMount() {
    console.log('Mounting State : calling method componentDidMount');
  }

  shouldComponentUpdate() {
    console.log('Update  State : calling method shouldComponentUpdate');
    return true;
  }

  componentDidUpdate() {
    console.log('Update  State : calling method componentDidUpdate')
  }
  componentWillUnmount() {
    console.log('UnMounting State : calling method componentWillUnmount');
  }

  render() {
    return (
      <div>
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default COMP_LIFE;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import COMP_LIFE from './complife.jsx';

ReactDOM.render(
    <COMP_LIFE />,
    document.getElementById('root')
);

เมื่อคุณตรวจสอบผลลัพธ์ในเบราว์เซอร์:

ในคอนโซลของเบราว์เซอร์ คุณจะได้รับข้อความดังนี้:

เมื่อผู้ใช้ป้อนลงในกล่องข้อความ:

ในหน้าจอคอนโซล จะแสดงข้อความต่อไปนี้:

เมื่อคุณเข้าใจแล้วว่าคอมโพเนนต์จะแสดงผลและอัปเดตเมื่อใด ต่อไปเราจะนำสถานะและเหตุการณ์ไปใช้กับกรณีการใช้งานจริง นั่นคือการจัดการข้อมูลที่ผู้ใช้ป้อนผ่านแบบฟอร์ม

การทำงานกับแบบฟอร์ม

ใน ReactJS องค์ประกอบอินพุต HTML เช่น , และ <select /> มีสถานะของตัวเองและจำเป็นต้องได้รับการอัปเดตเมื่อผู้ใช้โต้ตอบ โดยใช้เมธอด setState()

ในบทนี้ เราจะมาดูวิธีการทำงานกับฟอร์มใน ReactJS กัน

นี่คือตัวอย่างการทำงาน:

แบบฟอร์ม.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.formSubmit = this.formSubmit.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }

  formSubmit(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <form>
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>
        <h2>{this.state.name}</h2>
        <input type="submit" value="Submit" onClick={this.formSubmit} />
      </form>
    );
  }
}

export default Form;

สำหรับช่องป้อนข้อมูล เราจำเป็นต้องรักษาสถานะไว้ ดังนั้น React จึงมีเมธอดพิเศษที่เรียกว่า `state` มาให้ใช้งาน เซ็ตสเตตซึ่งช่วยรักษาสถานะไว้เมื่อมีการเปลี่ยนแปลงเกิดขึ้น ในการใช้งานจริง มักเรียกอีกอย่างว่า event.preventDefault() ใช้คำสั่งภายใน formSubmit เพื่อป้องกันไม่ให้เบราว์เซอร์โหลดหน้าเว็บใหม่หลังจากกดส่ง

เราได้ใช้เหตุการณ์ onChange และ onClick กับช่องข้อความและปุ่มส่ง เมื่อผู้ใช้พิมพ์ในช่องข้อความ เหตุการณ์ onChange จะถูกเรียก และฟิลด์ชื่อภายในออบเจ็กต์สถานะจะได้รับการอัปเดต ดังที่แสดงด้านล่าง:

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Form from './form.jsx';

ReactDOM.render(
    <Form />,
    document.getElementById('root')
);

ผลลัพธ์ในเบราว์เซอร์จะเป็นดังนี้:

ขั้นตอน 1) กรุณาป้อนชื่อของคุณในช่องข้อความ:

ขั้นตอน 2) คลิกที่ปุ่มส่ง:

การทำงานกับเหตุการณ์ใน ReactJS

แบบฟอร์มเป็นเพียงแหล่งปฏิสัมพันธ์ของผู้ใช้แหล่งหนึ่งเท่านั้น การทำงานกับเหตุการณ์ใน ReactJS นั้นเหมือนกับที่คุณเคยทำในภาษาอื่น Javaสคริปต์ คุณสามารถใช้ตัวจัดการเหตุการณ์ทั้งหมดที่ใช้ในสคริปต์ได้ Javaสคริปต์ เมธอด setState() ใช้สำหรับอัปเดตสถานะเมื่อผู้ใช้โต้ตอบกับองค์ประกอบ HTML ใดๆ

ต่อไปนี้เป็นตัวอย่างการใช้งานอีเวนต์ใน ReactJS ที่ใช้งานได้จริง

events.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class EventTest extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }

  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <div>
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default EventTest;

สำหรับช่องป้อนข้อมูล เราจำเป็นต้องรักษาสถานะไว้ ดังนั้น React จึงมีฟังก์ชันสำหรับเรื่องนี้ เซ็ตสเตต วิธีการที่ช่วยรักษาสถานะเดิมไว้เมื่อมีการเปลี่ยนแปลงเกิดขึ้น

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

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import EventTest from './events.jsx';

ReactDOM.render(
    <EventTest />,
    document.getElementById('root')
);

นี่คือผลลัพธ์ในเบราว์เซอร์:

เมื่อผู้ใช้ป้อนชื่อ:

เมื่อผู้ใช้คลิกปุ่มคลิกที่นี่:

การทำงานกับ Inline CSS ใน ReactJS

เมื่อคอมponent ของคุณจัดการข้อมูลและเหตุการณ์ต่างๆ เสร็จแล้ว ขั้นตอนสุดท้ายคือการจัดสไตล์ให้กับคอมponent เหล่านั้น เราจะมาดูตัวอย่างการใช้งานจริงเพื่อทำความเข้าใจ CSS แบบอินไลน์ใน ReactJS กัน

addstyle.jsx

import React from 'react';
import ReactDOM from 'react-dom';

const h1Style = {
    color: 'red'
};

function Hello(props) {
    return <h1 style={h1Style}>{props.msg}</h1>;
}
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

ฉันได้เพิ่มสไตล์สี 'แดง' ให้กับแท็ก h1 แล้ว

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

ผลลัพธ์ในเบราว์เซอร์จะเป็นดังนี้:

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

การทำงานกับ CSS ภายนอกใน ReactJS

เรามาสร้างไฟล์ CSS ภายนอกกัน โดยสร้างโฟลเดอร์ชื่อ css/ แล้วเพิ่มไฟล์ style.css เข้าไปในนั้น

style.css

.h1tag {
color:red;
}

เพิ่ม style.css ลงในไฟล์ index.html ของคุณ

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

ต่อไปเรามาเพิ่มคลาสให้กับแท็ก h1 ในไฟล์ .jsx กัน

addstyle.jsx

import React from 'react';
import ReactDOM from 'react-dom';

let classforh1 = 'h1tag';

function Hello(props) {
    return <h1 className={classforh1}>{props.msg}</h1>;
}
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

แอตทริบิวต์ className จะระบุรายละเอียดของคลาส โปรดทราบว่า JSX ใช้ ชื่อคลาส แทนที่จะใช้แอตทริบิวต์ class ใน HTML เนื่องจาก class เป็นคำสงวนใน HTML Javaสคริปต์ ตอนนี้เรามาทดสอบในเบราว์เซอร์กัน

นี่คือสิ่งที่คุณจะเห็นเมื่อตรวจสอบแท็ก h1 ในเบราว์เซอร์:

คุณจะเห็นว่าคลาส “h1tag” ถูกเพิ่มเข้าไปในแท็ก h1 เรียบร้อยแล้ว

เหตุใด ReactDOM.render จึงถูกแทนที่ด้วย createRoot

ตัวอย่างทั้งหมดในหน้านี้ใช้ ReactDOM.render ในการเรียกใช้งานแอป ซึ่งถูกต้องสำหรับ React 16 และ 17 ซึ่งเป็นเวอร์ชันที่หลักสูตรนี้มุ่งเน้น React 18 ที่วางจำหน่ายในเดือนมีนาคม 2022 ได้แทนที่จุดเริ่มต้นนั้นด้วย API createRoot และ React 19 ได้ลบ ReactDOM.render ออกไปโดยสิ้นเชิง เหตุผลก็คือเรื่องการทำงานพร้อมกัน: createRoot ช่วยให้ React สามารถเตรียม UI หลายเวอร์ชันพร้อมกันได้ ขัดจังหวะการเรนเดอร์ที่มีลำดับความสำคัญต่ำ และรักษาการทำงานให้ต่อเนื่องping และแอนิเมชั่นก็ราบรื่น คุณสมบัติต่างๆ เช่น การจัดกลุ่มอัตโนมัติ การใช้ useTransition และการสตรีมแบบ Suspense ล้วนขึ้นอยู่กับสิ่งนี้

ไฟล์ index.js ที่ใช้ในหน้านี้ในรูปแบบที่ทันสมัยจะมีหน้าตาดังนี้:

import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(<h1>Hello, from Guru99 Tutorials!</h1>);

ทุกอย่างที่คุณได้เรียนรู้ที่นี่ — คอมโพเนนต์, JSX, สเตท, พร็อพ และอีเวนต์ — จะทำงานในลักษณะเดียวกันหลังจากแก้ไขเพียงบรรทัดเดียวที่จุดเริ่มต้น ความแตกต่างของเวอร์ชันแบบนี้เกิดขึ้นบ่อยครั้งใน คำถามสัมภาษณ์ React JSดังนั้นการทำความเข้าใจ API ทั้งสองแบบจึงเป็นสิ่งสำคัญ

คำถามที่พบบ่อย

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

ด้วยความแข็งแกร่ง Javaพื้นฐานการเขียนสคริปต์ ผู้เรียนส่วนใหญ่จะเข้าใจส่วนประกอบต่างๆ เช่น JSX, สถานะ (state) และพร็อพ (props) ได้ภายในสองถึงสี่สัปดาห์ของการฝึกฝนอย่างสม่ำเสมอ ส่วนการเตรียมพร้อมสำหรับการทำงานจริง ซึ่งรวมถึง Hooks, การกำหนดเส้นทาง (routing) และการเรียกใช้ API นั้น โดยทั่วไปจะใช้เวลาประมาณสองถึงสามเดือนในการสร้างโปรเจกต์ขนาดเล็ก

ReactJS เรนเดอร์ไปยัง DOM ของเบราว์เซอร์เพื่อสร้างเว็บไซต์ ในขณะที่ React Native ใช้โมเดลคอมโพเนนต์เดียวกันเพื่อสร้างแอปพลิเคชันเนทีฟสำหรับ iOS และ iOS Android ทักษะต่างๆ สามารถถ่ายทอดระหว่างทั้งสองได้ แต่ React Native จะแทนที่แท็ก HTML ด้วยส่วนประกอบ UI ดั้งเดิม

ใช่ครับ ผู้ช่วยเช่น นักบิน GitHub และ ChatGPT สามารถสร้างโครงสร้างพื้นฐานของคอมponent อธิบายข้อผิดพลาด และแปลง class component เป็น Hooks ได้ ควรตรวจสอบโค้ดที่สร้างขึ้นเสมอ เนื่องจาก AI อาจแนะนำ API ที่ล้าสมัย เช่น ReactDOM.render

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

ตรวจสอบด้วย: - คำถามและคำตอบสัมภาษณ์ตอบโต้ 70 อันดับแรก (อัปเดต)

บทช่วยสอน ReactJS สำหรับผู้เริ่มต้น

ReactJS คืออะไร?

คุณสมบัติของ ReactJS

ข้อดีของ ReactJS

ข้อเสียของ ReactJS

ใช้ ReactJS จาก CDN

สำหรับผู้พัฒนา

สำหรับผลิตภัณฑ์

การใช้แพ็คเกจ NPM

วิธีสร้างการตั้งค่าโปรเจ็กต์ React ครั้งแรกของคุณ

วิธีการตั้งค่า React กับ Vite (แนวทางสมัยใหม่)

JSX คืออะไร?

ทำไมเราต้องมี JSX ใน React?

นิพจน์ใน JSX

ส่วนประกอบใน ReactJS คืออะไร?

ส่วนประกอบเป็นฟังก์ชัน

คลาสเป็นส่วนประกอบ

คอมโพเนนต์คลาส เทียบกับ คอมโพเนนต์ฟังก์ชัน และฮุก

สถานะใน ReactJS คืออะไร?

ตัวอย่างของรัฐ

อุปกรณ์ประกอบฉากใน ReactJS คืออะไร

อุปกรณ์ประกอบฉากไปยังส่วนประกอบของฟังก์ชัน

อุปกรณ์ประกอบฉากไปยังองค์ประกอบคลาส

วงจรชีวิตของส่วนประกอบ

ตัวอย่างการใช้งานวิธีการวงจรชีวิต

การทำงานกับแบบฟอร์ม

การทำงานกับเหตุการณ์ใน ReactJS

การทำงานกับ Inline CSS ใน ReactJS

การทำงานกับ CSS ภายนอกใน ReactJS

เหตุใด ReactDOM.render จึงถูกแทนที่ด้วย createRoot

คำถามที่พบบ่อย

สรุปโพสต์นี้ด้วย:

ลงทะเบียนเพื่อรับจดหมายข่าว

ReactJS คืออะไร?

คุณสมบัติของ ReactJS

ข้อดีของ ReactJS

ข้อเสียของ ReactJS

บทความที่เกี่ยวข้อง

ใช้ ReactJS จาก CDN

สำหรับผู้พัฒนา

สำหรับผลิตภัณฑ์

การใช้แพ็คเกจ NPM

วิธีสร้างการตั้งค่าโปรเจ็กต์ React ครั้งแรกของคุณ

วิธีการตั้งค่า React กับ Vite (แนวทางสมัยใหม่)

JSX คืออะไร?

ทำไมเราต้องมี JSX ใน React?

นิพจน์ใน JSX

ส่วนประกอบใน ReactJS คืออะไร?

ส่วนประกอบเป็นฟังก์ชัน

คลาสเป็นส่วนประกอบ

คอมโพเนนต์คลาส เทียบกับ คอมโพเนนต์ฟังก์ชัน และฮุก

สถานะใน ReactJS คืออะไร?

ตัวอย่างของรัฐ

อุปกรณ์ประกอบฉากใน ReactJS คืออะไร

อุปกรณ์ประกอบฉากไปยังส่วนประกอบของฟังก์ชัน

อุปกรณ์ประกอบฉากไปยังองค์ประกอบคลาส

วงจรชีวิตของส่วนประกอบ

ตัวอย่างการใช้งานวิธีการวงจรชีวิต

การทำงานกับแบบฟอร์ม

การทำงานกับเหตุการณ์ใน ReactJS

การทำงานกับ Inline CSS ใน ReactJS

การทำงานกับ CSS ภายนอกใน ReactJS

เหตุใด ReactDOM.render จึงถูกแทนที่ด้วย createRoot

คำถามที่พบบ่อย

สรุปโพสต์นี้ด้วย:

ลงทะเบียนเพื่อรับจดหมายข่าว