Hướng dẫn ReactJS cho người mới bắt đầu

ReactJS là gì?

Phản ứng là một giao diện người dùng nguồn mở JavaThư viện tập lệnh để xây dựng giao diện người dùng. Phản ứng Nền tảng này được duy trì bởi Meta (trước đây là Facebook) và một cộng đồng các nhà phát triển cá nhân và các công ty. Nó được sử dụng rộng rãi làm nền tảng để xây dựng các ứng dụng một trang (SPA) và ứng dụng di động. Nó rất dễ sử dụng và cho phép người dùng tạo ra các thành phần giao diện người dùng có thể tái sử dụng.

Trước khi viết dòng mã React đầu tiên, bạn nên hiểu sự khác biệt giữa thư viện này và các thư viện React thông thường. JavaKịch bản. Phần tiếp theo sẽ trình bày chi tiết các tính năng cốt lõi của nó.

Tính năng của ReactJS

JSX: JSX là một phần mở rộng của JavaMặc dù việc sử dụng JSX trong React không bắt buộc, nhưng đây là một trong những tính năng tốt và dễ sử dụng.

Linh kiện : Linh kiện giống như nguyên chất JavaCác hàm script giúp đơn giản hóa việc viết mã bằng cách chia nhỏ logic thành các đoạn mã độc lập có thể tái sử dụng. Chúng ta có thể sử dụng các component như các hàm và các component như các lớp. Các component cũng có state và props, giúp việc lập trình dễ dàng hơn. Bên trong một class component, state và props được quản lý.

DOM ảo: React tạo ra một DOM ảo, tức là một bộ nhớ đệm cấu trúc dữ liệu trong bộ nhớ. Chỉ những thay đổi cuối cùng mới được cập nhật sau đó trong DOM của trình duyệt, giúp việc hiển thị vẫn nhanh chóng.

JavaBiểu thức kịch bản: Các biểu thức JavaScript có thể được sử dụng trong các tệp JSX bằng cách sử dụng dấu ngoặc nhọn, ví dụ: {}.

Ưu điểm của ReactJS

Dưới đây là những ưu điểm/lợi ích quan trọng khi sử dụng ReactJS:

• ReactJS sử dụng DOM ảo, tận dụng bộ nhớ đệm cấu trúc dữ liệu trong bộ nhớ, và chỉ những thay đổi cuối cùng mới được cập nhật trong DOM của trình duyệt. Điều này giúp ứng dụng chạy nhanh hơn.
• Bạn có thể tạo các thành phần theo ý muốn bằng cách sử dụng tính năng thành phần của React. Các thành phần này có thể được tái sử dụng và cũng rất hữu ích trong việc bảo trì mã.
• ReactJS là một ngôn ngữ lập trình mã nguồn mở. JavaThư viện mã nguồn, vì vậy rất dễ để bắt đầu sử dụng.
• ReactJS đã trở nên rất phổ biến trong một thời gian ngắn và được sử dụng trong các sản phẩm như Facebook và... InstagramNó được nhiều công ty nổi tiếng sử dụng, ví dụ như Apple. Netflix, Vv
• Meta chịu trách nhiệm duy trì thư viện ReactJS, vì vậy nó được bảo trì tốt và luôn được cập nhật.
• ReactJS có thể được sử dụng để phát triển giao diện người dùng phong phú cho cả ứng dụng dành cho máy tính để bàn và thiết bị di động.
• Dễ dàng gỡ lỗi và kiểm tra vì hầu hết việc mã hóa được thực hiện trong JavaScript thay vì sử dụng HTML.

Nhược điểm của ReactJS

Dưới đây là những nhược điểm/hạn chế khi sử dụng ReactJS:

• Hầu hết mã được viết bằng JSX, tức là HTML và CSS là một phần của nó. JavaTập lệnh. Điều này có thể khá khó hiểu, vì hầu hết các framework khác đều thích giữ nguyên...ping HTML tách biệt khỏi JavaMã lệnh.
• Kích thước tệp của ReactJS tương đối lớn.

Hiểu rõ những ưu nhược điểm, bạn đã sẵn sàng thiết lập React. Cách nhanh nhất để thử là trực tiếp từ CDN, điều mà chúng ta sẽ đề cập đầu tiên; các thiết lập dựa trên npm cho các dự án thực tế sẽ được trình bày sau đó.

Sử dụng ReactJS từ CDN

Để bắt đầu làm việc với React, trước tiên chúng ta cần thêm ReactJS vào trang của mình. Bạn có thể dễ dàng bắt đầu sử dụng ReactJS với CDN. JavaCác tập tin kịch bản, như được hiển thị bên dưới.

Hãy truy cập trang tài liệu React cũ để lấy các liên kết CDN, ví dụ: https://legacy.reactjs.org/docs/cdn-links.htmlVà bạn sẽ nhận được các tệp cần thiết được giải thích trong hình ảnh bên dưới.

Dành cho nhà phát triển

<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>

Đối với sản phẩm

<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>

Thay thế phiên bản Hãy chọn phiên bản React bạn muốn sử dụng cho cả react.development.js và react-dom.development.js. Chúng tôi sử dụng phiên bản 16 trên trang này để các ví dụ bên dưới chạy mà không cần thay đổi.

Trong trường hợp bạn dự định sử dụng các tệp CDN, hãy đảm bảo giữ lại thuộc tính crossorigin để tránh các vấn đề về truy cập chéo tên miền. Mã ReactJS không thể được thực thi trực tiếp trong trình duyệt và cần được biên dịch bằng Babel thành mã thuần túy. JavaĐoạn mã trước khi được thực thi trong trình duyệt.

Đây là tập lệnh BabelJS có thể được sử dụng:

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

Dưới đây là ví dụ hoạt động của ReactJS sử dụng các tệp CDN và tập lệnh 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>

Đầu ra:

Chúng ta sẽ đi sâu vào chi tiết mã nguồn ở chương tiếp theo; trước tiên hãy xem cách hoạt động với các tệp CDN. Sử dụng trực tiếp script Babel không phải là một cách làm tốt, và người mới bắt đầu chỉ nên sử dụng nó để học ReactJS. Trong môi trường sản xuất, bạn sẽ phải cài đặt React bằng gói npm.

Sử dụng gói NPM

Hãy đảm bảo bạn đã cài đặt Node.js. Nếu chưa cài đặt, hãy tham khảo hướng dẫn cài đặt Node.js này (https://www.guru99.com/node-js-tutorial.html) cài đặt.

Sau khi cài đặt Node.js, hãy tạo một thư mục. Reacproj/.

Để bắt đầu thiết lập dự án, hãy chạy lệnh khởi tạo npm.

Cấu trúc thư mục sẽ trông như thế này:

reactproj\
package.json

Bây giờ chúng ta sẽ cài đặt các gói mà chúng ta cần.

Đây là danh sách các gói dành cho ReactJS. Chúng tôi cố định React ở phiên bản 16 nên... ReactDOM.render Các ví dụ trên trang này hoạt động chính xác như được hiển thị:

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

Mở cửa sổ dòng lệnh và chạy các lệnh trên bên trong thư mục reactproj/.

Tạo một thư mục src / Đây là nơi chứa tất cả mã JavaScript. Toàn bộ mã cho dự án ReactJS sẽ nằm trong thư mục src/. Tạo một tệp index.js và nhập react và react-dom, như hình bên dưới.

chỉ mục.js

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

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

Chúng ta đã viết xong mã cơ bản cho ReactJS. Chúng ta sẽ giải thích chi tiết hơn ở chương tiếp theo. Chúng ta muốn hiển thị Xin chào, từ Guru99 hướng dẫnVà điều tương tự cũng được áp dụng cho phần tử DOM có id là “root”. Nó được lấy từ tệp index.html, là tệp khởi đầu, như được hiển thị bên dưới.

Tạo thư mục public/ và thêm tệp index.html vào đó như hình bên dưới.

index.html

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

Gói `react-scripts` sẽ đảm nhiệm việc biên dịch mã và khởi động máy chủ để hiển thị tệp HTML, tức là `index.html`. Bạn cần thêm lệnh vào tệp `package.json` để sử dụng `react-scripts` để biên dịch mã và khởi động máy chủ, như hình bên dưới:

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

Sau khi cài đặt tất cả các gói và thêm lệnh trên, package.json cuối cùng có dạng như sau:

Gói.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"
  }
}

Để bắt đầu kiểm thử ReactJS, hãy chạy lệnh sau:

npm run start

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

Nó sẽ mở trình duyệt với URL http://localhost:3000/ như hình dưới đây:

công khai/index.html

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

Chúng ta sẽ sử dụng quy trình tương tự để thực hiện JavaCác tập tin kịch bản cũng sẽ được đề cập trong các chương tiếp theo. Thêm tất cả các tập tin .js và .jsx của bạn vào thư mục src/. Cấu trúc thư mục sẽ như sau:

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

Cách tạo thiết lập dự án React đầu tiên của bạn

Dưới đây là hướng dẫn từng bước trong bài hướng dẫn ReactJS này để bắt đầu xây dựng ứng dụng React đầu tiên.

Bước 1) Nhập các gói phản ứng.
1. Để bắt đầu với ReactJS, trước tiên chúng ta cần nhập các gói phản ứng như sau.

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

2. Lưu tệp tin với tên index.js trong thư mục src/.

Bước 2) Viết đơn giản Code.
Chúng tôi sẽ viết một mã đơn giản trong hướng dẫn này React JS, trong đó chúng tôi sẽ hiển thị thông báo “Xin chào, từ Guru99 bài hướng dẫn!

ReactDOM.render(

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

ReactDOM.render sẽ thêm Thêm thẻ vào phần tử có id là "root". Đây là file HTML mà chúng ta đang có:

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

Bước 3) Biên dịch Code.

Tiếp theo trong Hướng dẫn React.js này, chúng ta cần biên dịch mã để lấy đầu ra trên trình duyệt.

Đây là cấu trúc thư mục:

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

Chúng tôi đã thêm các lệnh để biên dịch tệp cuối cùng trong pack.json như sau:

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

Để biên dịch tập tin cuối cùng, hãy chạy lệnh sau:

npm run start

Khi bạn chạy lệnh trên, nó sẽ biên dịch các tệp và thông báo cho bạn nếu có bất kỳ lỗi nào. Nếu mọi thứ đều ổn, nó sẽ mở trình duyệt và chạy trang tại địa chỉ đó. http://localhost:3000/

Lệnh: npm run bắt đầu:

C:\reactproj>npm run start

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

Bước 4) Kiểm tra đầu ra.
URL http://localhost:3000 Sau khi mã được biên dịch, nó sẽ mở trong trình duyệt như hình bên dưới:

Hướng dẫn thiết lập React với Vite (Phương pháp hiện đại)

Cấu hình react-scripts ở trên đến từ Create React App (CRA), vốn là công cụ khởi đầu tiêu chuẩn trong nhiều năm. Nhóm React đã chính thức ngừng hỗ trợ Create React App vào tháng 2 năm 2025, vì vậy các dự án mới nên sử dụng một công cụ xây dựng hiện đại hơn. Lựa chọn phổ biến nhất hiện nay là Sống, khởi động nhanh hơn và tạo ra các bản dựng nhỏ hơn.

Dưới đây là cách tạo một dự án React mới với Vite:

Bước 1) Chạy lệnh scaffolding trong terminal của bạn:

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

Bước 2) Di chuyển vào thư mục và cài đặt các thư viện cần thiết:

cd my-react-app
npm install

Bước 3) Khởi động máy chủ phát triển:

npm run dev

Vite cung cấp ứng dụng tại http://localhost:5173/ Theo mặc định, nó sẽ tải lại ngay lập tức khi bạn lưu tệp.

Những điểm khác biệt chính so với thiết lập cũ trên trang này:

• Tệp đầu vào là src/main.jsx thay vì src/index.js.
• Nó cài đặt phiên bản React mới nhất, sử dụng... tạoRoot thay vì ReactDOM.render.
• Tệp index.html nằm trong thư mục gốc của dự án, chứ không phải trong thư mục public/.
• Các bản dựng được tạo ra bằng npm run build vào thư mục dist/.

Đối với các nhu cầu toàn diện như định tuyến và hiển thị phía máy chủ, nhóm React cũng khuyến nghị sử dụng các framework như... Tiếp theo.jsTất cả những gì bạn học được trong các chương bên dưới — JSX, các thành phần, trạng thái và thuộc tính — đều được áp dụng nguyên vẹn trong dự án Vite hoặc Next.js.

JSX là gì?

JSX là một phần mở rộng của JavaScript. Đây là một mẫu script cho phép bạn sử dụng HTML và... JavaCùng nhau viết kịch bản.

Đây là một ví dụ đơn giản về mã JSX.

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

Tại sao chúng ta cần JSX trong React?

Đối với giao diện người dùng (UI), chúng ta cần HTML, và mỗi phần tử trong DOM sẽ có các sự kiện cần được xử lý, thay đổi trạng thái, v.v.

Trong trường hợp của React, nó cho phép chúng ta sử dụng HTML và JavaViết mã trong cùng một tệp và xử lý các thay đổi trạng thái trong DOM một cách hiệu quả.

Biểu thức trong JSX

Đây là một ví dụ đơn giản về cách sử dụng biểu thức trong JSX.

Trong các ví dụ ReactJS trước đây, chúng ta đã viết những đoạn mã tương tự như sau:

chỉ mục.js

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

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

Bây giờ chúng ta sẽ thay đổi đoạn mã trên để thêm biểu thức. Biểu thức được sử dụng bên trong dấu ngoặc nhọn {} và chúng được mở rộng trong quá trình thực thi. Biểu thức trong React cũng giống như... JavaBiểu thức kịch bản.

chỉ mục.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')
);

Bây giờ chúng ta hãy kiểm tra điều tương tự trên trình duyệt.

Như bạn có thể thấy trong ảnh chụp màn hình ở trên, biểu thức {display} không được thay thế. React không biết phải làm gì khi một biểu thức được sử dụng bên trong một tệp .js.

Bây giờ chúng ta hãy thêm các thay đổi và tạo tệp .jsx, như hiển thị bên dưới:

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;

Chúng tôi đã thêm đoạn mã cần thiết và sẽ sử dụng tệp test.jsx trong index.js. Chúng tôi muốn... thẻ h1 Biến này được sử dụng bên trong index.js, vì vậy nó được xuất ra như đã hiển thị ở trên trong test.jsx.

Đây là đoạn mã đã được chỉnh sửa trong file index.js:

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

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

Để sử dụng tệp test.jsx trong index.js, trước tiên chúng ta phải nhập nó như hình bên dưới:

import h1tag from './test.jsx';

Bây giờ chúng ta có thể sử dụng h1tag trong ReactDOM.render như hiển thị bên dưới:

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

Đây là kết quả khi chúng tôi kiểm tra tương tự trên trình duyệt:

Thành phần trong ReactJS là gì?

Các thành phần giống như nguyên chất JavaCác hàm kịch bản giúp đơn giản hóa việc viết mã bằng cách chia nhỏ logic thành các đoạn mã độc lập có thể tái sử dụng.

Thành phần là chức năng

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;

Chúng tôi đã tạo ra một chức năng gọi là Xin chào Hàm này trả về một thẻ h1, như hình trên. Tên của hàm đóng vai trò như một phần tử, như hình dưới đây:

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

Thành phần Xin chào được sử dụng như một thẻ HTML, tức là, , được giao cho Xin chào_comp Biến này được xuất ra bằng lệnh `export`.

Bây giờ chúng ta hãy sử dụng thành phần này trong tệp index.js như hình bên dưới:

chỉ mục.js

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

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

Đây là đầu ra trong trình duyệt:

Lớp dưới dạng thành phần

Đây là một ví dụ về ReactJS sử dụng một lớp làm thành phần.

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;

Chúng ta có thể sử dụng thành phần Hello trong tệp index.js như sau:

chỉ mục.js

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

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

Thành phần Hello được sử dụng như một thẻ HTML, tức là, .

Đây là đầu ra tương tự.

Thành phần lớp so với thành phần hàm và các hook

Bạn đã thấy cả hai cách viết component, vậy bạn nên sử dụng cách nào? Trang này hướng dẫn về class component vì chúng làm rõ các khái niệm về state và vòng đời, điều này rất hữu ích cho người mới bắt đầu và vẫn còn xuất hiện trong các codebase cũ. Tuy nhiên, kể từ khi React 16.8 giới thiệu Hooks, function component cũng có thể lưu trữ state, và chúng là kiểu viết được khuyến nghị cho tất cả các code mới.

Yếu tố	Thành phần lớp	Thành phần chức năng với các Hook
Tiểu bang	this.state và this.setState()	Sử dụng Hook State()
Vòng đời	componentDidMount, componentDidUpdate, componentWillUnmount	Hook useEffect() bao gồm cả ba trường hợp trên.
cú pháp	Thêm các đoạn mã mẫu (constructor, bind, this)	Ngắn gọn hơn, không có từ khóa này
Trạng thái	Được hỗ trợ, kiểu cũ	Được đề xuất cho mã mới

Đây là ví dụ về trạng thái từ trang này được viết lại bằng Hook `useState`:

import React, { useState } from 'react';

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

Cả hai phiên bản đều cho ra cùng một kết quả. Hãy tìm hiểu cú pháp lớp được sử dụng trong các chương bên dưới, sau đó thực hành chuyển đổi từng ví dụ sang Hooks.

Trạng thái trong ReactJS là gì?

Một trạng thái là một JavaĐối tượng Script, tương tự như props, chứa dữ liệu được sử dụng với hàm render của ReactJS. Dữ liệu trạng thái là một đối tượng riêng tư và được sử dụng bên trong các component thuộc cùng một class.

Ví dụ về Nhà nước

Dưới đây là một ví dụ thực tế về cách sử dụng state bên trong một lớp.

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;

chỉ mục.js

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

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

Đây là những gì chúng tôi nhận được khi kiểm tra nó trên trình duyệt:

Đạo cụ trong ReactJS là gì?

Props là các thuộc tính được sử dụng bên trong một component. Chúng hoạt động như các đối tượng hoặc biến toàn cục có thể được sử dụng bên trong component đó.

Đạo cụ cho thành phần chức năng

Dưới đây là một ví dụ về việc truyền props cho một thành phần hàm.

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;

Như hình trên, chúng tôi đã thêm vào msg thuộc về thành phần. Có thể truy cập thành phần đó như sau: đạo cụ bên trong hàm Hello, đó là một đối tượng sẽ có msg chi tiết thuộc tính và nó được sử dụng như một biểu thức.

Thành phần này được sử dụng trong index.js như sau:

chỉ mục.js

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

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

Đây là đầu ra trong trình duyệt:

Đạo cụ cho thành phần lớp

Để truy cập các props trong một lớp, chúng ta có thể thực hiện như sau:

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 thuộc tính được truyền cho thành phần trong index.js như sau:

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')
);

Đây là đầu ra trong trình duyệt:

Cũng kiểm tra:- Hướng dẫn AngularJS cho người mới bắt đầu: Tìm hiểu AngularJS từng bước

Vòng đời của một thành phần

Sau khi đã nắm rõ các khái niệm về component, state và props, bước tiếp theo là hiểu khi nào React gọi các phương thức của component. Vòng đời của một component được chia thành các giai đoạn Khởi tạo, Gắn kết, Cập nhật và Gỡ bỏ.

Dưới đây là giải thích chi tiết về từng giai đoạn.

Một component trong ReactJS trải qua các giai đoạn sau:

Khởi tạo: Đây là giai đoạn đầu tiên của vòng đời thành phần.

Ở đây nó sẽ có các props mặc định và trạng thái ở cấp độ ban đầu.

Gắn kếtỞ giai đoạn này, thành phần được hiển thị bên trong DOM. Chúng ta có thể truy cập các phương thức sau trong trạng thái gắn kết:

• render(): Bạn có phương thức này cho tất cả các thành phần đã tạo. Nó trả về nút HTML.
• componentDidMount(): Phương thức này được gọi ngay sau khi thành phần được thêm vào DOM.

Cập nhậtỞ trạng thái này, người dùng tương tác với DOM và nó được cập nhật. Ví dụ, bạn nhập nội dung vào ô văn bản, do đó các thuộc tính trạng thái được cập nhật.

Sau đây là các phương pháp có sẵn trong trạng thái cập nhật:

• shouldComponentUpdate(): được gọi trước khi render lại; nó cho phép bạn quyết định xem component có nên được cập nhật hay không. Trả về true sẽ render lại component.
• componentDidUpdate(): được gọi sau khi thành phần được cập nhật.

Ngắt kết nối: Trạng thái này xuất hiện khi thành phần đó không còn cần thiết hoặc đã bị loại bỏ.

Sau đây là phương pháp có sẵn ở trạng thái chưa được gắn kết:

• componentWillUnmount(): được gọi ngay trước khi thành phần bị xóa hoặc bị hủy.

Ví dụ thực tế về các phương pháp vòng đời sản phẩm

Dưới đây là một ví dụ thực tế minh họa các phương thức được gọi ở mỗi giai đoạn.

Ví dụ: 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;

chỉ mục.js

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

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

Khi bạn kiểm tra kết quả trên trình duyệt:

Trong bảng điều khiển trình duyệt, bạn sẽ nhận được:

Khi người dùng nhập vào hộp văn bản:

Trên bảng điều khiển, các thông báo sau sẽ được hiển thị:

Giờ bạn đã biết khi nào một thành phần được hiển thị và cập nhật, hãy cùng áp dụng trạng thái và sự kiện vào một trường hợp sử dụng thực tế: xử lý dữ liệu đầu vào của người dùng thông qua các biểu mẫu.

Làm việc với biểu mẫu

Trong ReactJS, các phần tử input HTML như , và <select /> có trạng thái riêng và cần được cập nhật khi người dùng tương tác, bằng cách sử dụng phương thức setState().

Trong chương này, chúng ta sẽ tìm hiểu cách làm việc với các biểu mẫu trong ReactJS.

Đây là một ví dụ hoạt động:

biểu mẫu.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;

Đối với các trường nhập liệu, chúng ta cần duy trì trạng thái, vì vậy React cung cấp một phương thức đặc biệt gọi là... setState, giúp duy trì trạng thái mỗi khi có sự thay đổi. Trong một ứng dụng thực tế, nó cũng được gọi là event.preventDefault() Bên trong formSubmit, hãy ngăn trình duyệt tải lại trang khi gửi biểu mẫu.

Chúng tôi đã sử dụng các sự kiện onChange và onClick trên hộp văn bản và nút gửi. Khi người dùng nhập liệu vào hộp văn bản, sự kiện onChange được gọi và trường tên bên trong đối tượng trạng thái được cập nhật, như hình bên dưới:

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

chỉ mục.js

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

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

Đầu ra trong trình duyệt như sau:

Bước 1) Nhập tên của bạn vào ô văn bản:

Bước 2) Nhấp vào nút gửi:

Làm việc với các sự kiện trong ReactJS

Biểu mẫu chỉ là một trong những nguồn tương tác người dùng. Làm việc với các sự kiện trong ReactJS cũng tương tự như cách bạn đã làm trong các hệ điều hành khác. JavaTập lệnh. Bạn có thể sử dụng tất cả các trình xử lý sự kiện được sử dụng trong đó. JavaĐoạn mã. Phương thức setState() được sử dụng để cập nhật trạng thái khi người dùng tương tác với bất kỳ phần tử HTML nào.

Dưới đây là một ví dụ thực tế về cách sử dụng sự kiện trong ReactJS.

sự kiện.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;

Đối với các trường nhập liệu, chúng ta cần duy trì trạng thái, vì vậy React cung cấp chức năng đó. setState phương pháp này giúp duy trì trạng thái bất cứ khi nào có sự thay đổi.

Chúng tôi đã sử dụng các sự kiện chúng tôi thay đổi và trong một cái nhấp chuột Trên hộp văn bản và nút bấm. Khi người dùng nhập liệu vào hộp văn bản, thì... chúng tôi thay đổi Khi sự kiện được gọi, trường tên bên trong đối tượng trạng thái được cập nhật, như hình bên dưới:

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

chỉ mục.js

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

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

Đây là đầu ra trong trình duyệt:

Khi người dùng nhập tên:

Khi người dùng nhấn vào nút Click Here:

Làm việc với CSS nội tuyến trong ReactJS

Sau khi các thành phần của bạn xử lý dữ liệu và sự kiện, bước cuối cùng là tạo kiểu cho chúng. Chúng ta sẽ xem xét một ví dụ thực tế để hiểu về CSS nội tuyến trong 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;

Tôi đã thêm kiểu màu: 'đỏ' vào thẻ h1.

chỉ mục.js

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

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

Đầu ra trong trình duyệt như sau:

Bạn có thể tạo một đối tượng với kiểu dáng mong muốn cho phần tử và sử dụng biểu thức để thêm kiểu dáng đó, như ví dụ ở trên.

Làm việc với CSS bên ngoài trong ReactJS

Chúng ta hãy tạo một tệp CSS bên ngoài. Để làm điều đó, hãy tạo một thư mục css/ và thêm tệp style.css vào đó.

style.css

.h1tag {
color:red;
}

Thêm style.css vào tệp index.html của bạn

<!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>

Bây giờ chúng ta hãy thêm lớp này vào thẻ h1 trong tệp .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;

chỉ mục.js

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

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

Thuộc tính className được dùng để chỉ định thông tin chi tiết về lớp. Lưu ý rằng JSX sử dụng tên lớp thay vì thuộc tính class của HTML, vì class là từ khóa dành riêng trong JavaĐoạn mã. Giờ hãy thử nghiệm nó trên trình duyệt.

Đây là những gì bạn thấy khi kiểm tra thẻ h1 trong trình duyệt:

Bạn có thể thấy rằng thuộc tính class=”h1tag” đã được thêm thành công vào thẻ h1.

Vì sao ReactDOM.render được thay thế bằng createRoot?

Mọi ví dụ trên trang này đều khởi chạy ứng dụng bằng ReactDOM.render, điều này là chính xác đối với React 16 và 17, các phiên bản mà khóa học này nhắm đến. React 18, được phát hành vào tháng 3 năm 2022, đã thay thế điểm khởi đầu đó bằng API createRoot, và React 19 đã loại bỏ hoàn toàn ReactDOM.render. Lý do là tính đồng thời: createRoot cho phép React chuẩn bị nhiều phiên bản giao diện người dùng cùng một lúc, ngắt quá trình hiển thị có độ ưu tiên thấp và duy trì tính đồng thời.ping và hoạt ảnh mượt mà. Các tính năng như xử lý theo lô tự động, useTransition và truyền phát dựa trên Suspense đều phụ thuộc vào điều đó.

Phiên bản hiện đại tương đương với tệp index.js được sử dụng xuyên suốt trang này trông như thế này:

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

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

Tất cả những gì bạn đã học ở đây — các thành phần, JSX, trạng thái, thuộc tính và sự kiện — đều hoạt động theo cùng một cách sau khi thay đổi chỉ một dòng mã ở điểm khởi đầu. Sự khác biệt giữa các phiên bản như thế này thường xuyên xuất hiện trong... Câu hỏi phỏng vấn React JSVì vậy, việc hiểu rõ cả hai API là rất quan trọng.

Câu Hỏi Thường Gặp

Cũng kiểm tra:- 70 câu hỏi và câu trả lời phỏng vấn React hàng đầu (Đã cập nhật)