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

ReactJS คืออะไร?

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

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

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

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

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

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

ข้อดีของ ReactJS

นี่คือข้อดี/ข้อดีที่สำคัญของการใช้ ReactJS:

ReactJS ใช้ dom เสมือนที่ใช้แคชโครงสร้างข้อมูลในหน่วยความจำ และเฉพาะการเปลี่ยนแปลงขั้นสุดท้ายเท่านั้นที่จะได้รับการอัปเดตใน dom ของเบราว์เซอร์ ทำให้แอปเร็วขึ้น
คุณสามารถสร้างส่วนประกอบที่คุณเลือกได้โดยใช้คุณสมบัติส่วนประกอบการโต้ตอบ ส่วนประกอบต่างๆ สามารถนำมาใช้ซ้ำได้ และยังมีประโยชน์ในการบำรุงรักษาโค้ดอีกด้วย
Reactjs เป็นไลบรารี javascript แบบโอเพ่นซอร์ส ดังนั้นจึงง่ายต่อการเริ่มต้น
ReactJS ได้รับความนิยมอย่างมากในช่วงเวลาสั้นๆ และดูแลโดย Facebook และ Instagram ถูกใช้โดยบริษัทชื่อดังหลายแห่งเช่น Apple Netflixฯลฯ
Facebook ดูแลรักษา ReactJS ซึ่งเป็นไลบรารี่ ดังนั้นจึงได้รับการดูแลและอัปเดตอย่างดี
ReactJS สามารถใช้ในการพัฒนา UI ที่หลากหลายสำหรับทั้งแอปเดสก์ท็อปและมือถือ
ง่ายต่อการแก้ไขและทดสอบ เนื่องจากโค้ดส่วนใหญ่เสร็จสิ้นแล้ว Javascript แทนที่จะเป็น Html

ข้อเสียของ ReactJS

นี่คือข้อเสีย/ข้อเสียของการใช้ ReactJS:

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

ใช้ ReactJS จาก CDN

ในการเริ่มทำงานกับ react เราต้องติดตั้ง reactjs ก่อน คุณสามารถเริ่มต้นใช้งาน reactjs ได้อย่างง่ายดายโดยใช้ไฟล์จาวาสคริปต์ CDN ดังที่แสดงด้านล่าง

ไปที่เว็บไซต์อย่างเป็นทางการของ reactjs เพื่อรับลิงก์ CDN เช่น https://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.developement.js คุณสามารถโฮสต์ไฟล์ไว้ที่ฝั่งของคุณเพื่อเริ่มทำงานกับ reactjs

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

นี่คือสคริปต์ 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

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

เมื่อคุณติดตั้ง nodejs แล้ว ให้สร้างโฟลเดอร์ รีแอคโปรเจ/.

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

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

reactproj\
package.json

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

นี่คือรายการแพ็คเกจสำหรับ reactjs:

npm install react --save-dev
npm install react-dom --save-dev
npm install react-scripts --save-dev

เปิดพรอมต์คำสั่งและรันคำสั่งด้านบนภายในโฟลเดอร์ reactproj/

สร้างโฟลเดอร์ src / โดยที่โค้ด js ทั้งหมดจะมาในโฟลเดอร์นั้น โค้ดทั้งหมดสำหรับโปรเจ็กต์ reactjs จะอยู่ในโฟลเดอร์ src/ สร้างไฟล์ index.js และเพิ่ม import 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 Tutorials และเช่นเดียวกันกับองค์ประกอบ dom ที่มีรหัส "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",
  "devDependencies": {
    "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>

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

reatproj/
	 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) เขียนโค้ดง่ายๆ
เราจะเขียนโค้ดง่ายๆ ในบทช่วยสอน React JS นี้ โดยเราจะแสดงข้อความ “สวัสดีจาก Guru99 Tutorials!”

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) รวบรวมรหัส

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

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

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

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

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

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

npm run start

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

คำสั่ง: npm run start:

C:\reactproj>npm run start

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

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

JSX คืออะไร?

JSX เป็นส่วนขยายของ JavaScript ซึ่งเป็นสคริปต์เทมเพลตที่ให้คุณใช้ HTML ได้ Javascript ร่วมกัน

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

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

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

สำหรับ UI เราจำเป็นต้องมี Html และแต่ละองค์ประกอบใน dom ก็จะมีเหตุการณ์ที่ต้องจัดการ การเปลี่ยนแปลงสถานะ ฯลฯ

ในกรณีของ React มันช่วยให้เราสามารถใช้ Html และ javascript ในไฟล์เดียวกัน และดูแลการเปลี่ยนแปลงสถานะใน 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 จะเหมือนกับนิพจน์ใน JavaScript

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;

เราได้เพิ่มโค้ดที่จำเป็นแล้วและจะใช้ไฟล์ text.jsx ใน index.js เราต้องการ h1tag ตัวแปรที่จะใช้ภายใน script.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 คืออะไร?

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

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

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 เช่น และมอบหมายให้ สวัสดี_คอม ตัวแปรและสิ่งเดียวกันถูกส่งออกโดยใช้การส่งออก

ให้เราใช้ส่วนประกอบนี้ในไฟล์ 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 Component ในไฟล์ index.js ได้ดังนี้:

index.js

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

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

Component Hello ใช้เป็นแท็ก Html เช่น -

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

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

สถานะเป็นวัตถุจาวาสคริปต์ที่คล้ายกับอุปกรณ์ประกอบฉากที่มีข้อมูลที่จะใช้กับการเรนเดอร์ 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 คืออะไร

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

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

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

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 ทีละขั้นตอน

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

วงจรชีวิตของส่วนประกอบแบ่งออกเป็นระยะการเริ่มต้น การติดตั้ง การอัปเดต และการยกเลิกการติดตั้ง

นี่คือคำอธิบายโดยละเอียดเกี่ยวกับแต่ละองค์ประกอบ

ส่วนประกอบใน reactjs มีขั้นตอนต่อไปนี้:

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

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

การติด:ในระยะนี้ ส่วนประกอบจะถูกเรนเดอร์ภายใน DOM โดยเราจะได้สัมผัสกับวิธีการต่อไปนี้ในสถานะการติดตั้ง

componentDidMount(): สิ่งนี้เรียกว่าเมื่อเพิ่งเพิ่ม Component ลงใน dom

render(): คุณมีวิธีการนี้สำหรับส่วนประกอบทั้งหมดที่สร้างขึ้น มันส่งคืนโหนด Html

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

ต่อไปนี้เป็นวิธีการที่มีอยู่ในสถานะการอัปเดต:

shouldComponentUpdate() : เรียกว่าเมื่อมีการอัพเดตส่วนประกอบ

componentDidUpdate() : หลังจากอัพเดตส่วนประกอบแล้ว

การยกเลิกการติดตั้ง: สถานะนี้จะเข้ามาในรูปภาพเมื่อไม่จำเป็นต้องใช้หรือถอด Component

ต่อไปนี้เป็นวิธีการที่มีอยู่ในสถานะยกเลิกการติดตั้ง:

Component willUnmount(): เรียกเมื่อ Component ถูกลบหรือทำลาย

ตัวอย่างการทำงาน

นี่คือตัวอย่างการทำงานที่แสดงวิธีการเรียกในแต่ละสถานะ

ตัวอย่าง: 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;

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

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

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) กรอกชื่อของคุณในช่องข้อความ:

คลิกที่ปุ่มส่ง

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

การทำงานกับเหตุการณ์ใน reactjs นั้นเหมือนกับที่คุณทำใน javascript คุณสามารถใช้ตัวจัดการเหตุการณ์ทั้งหมดที่ใช้ในจาวาสคริปต์ เมธอด 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;

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

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

มาดูตัวอย่างการทำงานเพื่อทำความเข้าใจการทำงานของ inline 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>
    <script src = "out/script.min.js"></script>
  </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 จะได้รับรายละเอียดของคลาส ตอนนี้มาทดสอบในเบราว์เซอร์กัน

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

คุณจะเห็นว่าการเพิ่ม class=” h1tag” ลงในแท็ก h1 สำเร็จแล้ว

สรุป

ReactJS เป็นฟรอนต์เอนด์แบบโอเพ่นซอร์ส Javaไลบรารีสคริปต์สำหรับสร้างอินเทอร์เฟซผู้ใช้ ซึ่งดูแลโดย Facebook และบริษัทต่างๆ มากมายใช้ไลบรารีสคริปต์นี้เพื่อพัฒนาอินเทอร์เฟซผู้ใช้ในปัจจุบัน
คุณสมบัติหลักของ ReactJS ประกอบด้วย JSX ส่วนประกอบ (ส่วนประกอบเชิงฟังก์ชันและส่วนประกอบตามคลาส) วงจรชีวิตของส่วนประกอบ อุปกรณ์ประกอบฉาก และการสนับสนุนสถานะสำหรับส่วนประกอบ การทำงานกับนิพจน์จาวาสคริปต์
การตั้งค่าโปรเจ็กต์ของ ReactJS อธิบายได้โดยใช้ไฟล์ CDN และการใช้แพ็คเกจ npm เพื่อสร้างโปรเจ็กต์
JSX เป็นส่วนขยายของจาวาสคริปต์ เป็นสคริปต์เทมเพลตที่คุณจะมีพลังในการใช้ Html และ javascript ร่วมกัน
คอมโพเนนต์เป็นเหมือนฟังก์ชันจาวาสคริปต์ล้วนๆ ที่ช่วยทำให้โค้ดง่ายขึ้นโดยการแบ่งลอจิกออกเป็นโค้ดอิสระที่สามารถนำมาใช้ซ้ำได้
สถานะเป็นวัตถุจาวาสคริปต์ที่คล้ายกับอุปกรณ์ประกอบฉากที่มีข้อมูลที่จะใช้กับการเรนเดอร์ reactjs ข้อมูลสถานะเป็นวัตถุส่วนตัวและถูกใช้ภายในส่วนประกอบภายในชั้นเรียน
อุปกรณ์ประกอบฉากเป็นคุณสมบัติที่จะใช้ภายในส่วนประกอบ
วงจรชีวิตของส่วนประกอบแบ่งออกเป็นระยะการเริ่มต้น การติดตั้ง การอัปเดต และการยกเลิกการติดตั้ง
ในองค์ประกอบอินพุต reactjs html เช่น - และ <select /> มีสถานะของตนเองและจำเป็นต้องได้รับการอัปเดตเมื่อผู้ใช้โต้ตอบโดยใช้เมธอด setState()
การทำงานกับเหตุการณ์ใน reactjs นั้นเหมือนกับที่คุณทำใน javascript คุณสามารถใช้ตัวจัดการเหตุการณ์ทั้งหมดที่ใช้ในจาวาสคริปต์ เมธอด setState() ใช้เพื่ออัปเดตสถานะเมื่อผู้ใช้โต้ตอบกับองค์ประกอบ Html ใด ๆ
ReactJS ช่วยให้คุณสามารถทำงานกับ CSS ภายนอกและ CSS แบบอินไลน์ได้โดยใช้นิพจน์ JavaScript

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

ReactJS คืออะไร?

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

ข้อดีของ ReactJS

ข้อเสียของ ReactJS

ใช้ ReactJS จาก CDN

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

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

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

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

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

JSX คืออะไร?

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

นิพจน์ใน JSX

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

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

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

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

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

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

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

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

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

ตัวอย่างการทำงาน

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

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

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

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

สรุป

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