Hướng dẫn ReactJS cho người mới bắt đầu: Học với ví dụ từng bước

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 được duy trì bởi Facebook và một cộng đồng gồm các nhà phát triển và công ty cá nhân. Nó được sử dụng rộng rãi làm cơ sở trong việc xây dựng các trang web một trang và ứng dụng di động. Nó rất dễ sử dụng và cho phép người dùng tạo các thành phần UI có thể tái sử dụng.

Tính năng của ReactJS

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

Các thành phần: Các thành phần giống như các hàm javascript thuần túy giúp tạo mã dễ dàng bằng cách chia logic thành mã độc lập có thể sử dụng lại. Chúng ta có thể sử dụng các thành phần làm hàm và các thành phần làm lớp. Các thành phần cũng có trạng thái, đạo cụ giúp cuộc sống trở nên dễ dàng. Bên trong một lớp, trạng thái của từng đạo cụ được duy trì.

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

Javascript Biểu thức: Biểu thức JS 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/lợi ích quan trọng của việc sử dụng ReactJS:

ReactJS sử dụng dom ảo sử dụng bộ đệ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 làm cho ứng dụng nhanh hơn.
Bạn có thể tạo các thành phần theo lựa chọn của mình bằng cách sử dụng tính năng thành phần phản ứng. Các thành phần có thể được tái sử dụng và cũng hữu ích trong việc bảo trì mã.
Reactjs là một thư viện javascript mã nguồn mở nên rất dễ dàng để bắt đầu.
ReactJS đã trở nên rất phổ biến trong một thời gian ngắn và được duy trì bởi Facebook và Instagram. Nó được sử dụng bởi nhiều công ty nổi tiếng như Apple, Netflix, Vv
Facebook duy trì ReactJS, thư viện nên nó được duy trì tốt và được cập nhật liên tục.
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ì trên Html.

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

Dưới đây là những nhược điểm/nhược điểm của việc 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 javascript, điều này có thể khá khó hiểu vì hầu hết các khung công tác khác đều thích tách Html khỏi mã javascript.
Kích thước tệp của ReactJS lớn.

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 cài đặt Reactjs. Bạn có thể dễ dàng bắt đầu sử dụng Reacjs bằng cách sử dụng tệp javascript CDN, như hiển thị bên dưới.

Truy cập trang web chính thức của Reacjs để nhận các liên kết CDN, tức là https://reactjs.org/docs/cdn-links.html và bạn sẽ nhận được các tập tin cần thiết để giải thích hình ảnh sau.

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 với phiên bản phản ứng mới nhất cho cả Reac- Development.js và Reac-dom.developement.js. Bạn có thể lưu trữ các tệp ở cuối để bắt đầu làm việc với Reacjs.

Trong trường hợp nếu bạn dự định sử dụng tệp CDN, hãy đảm bảo giữ thuộc tính nguồn gốc chéo để tránh các vấn đề về tên miền chéo. Mã Reactjs không thể được thực thi trực tiếp trong trình duyệt và cần được chuyển bằng Babel sang javascript trước khi thực thi trên 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>

Đây là ví dụ ReactJS đang hoạt động bằng cách sử dụng 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 của mã trong chương tiếp theo, hãy cùng xem cách làm việc ở đây với các tệp CDN. Người ta nói rằng sử dụng tập lệnh babel trực tiếp không phải là một cách làm tốt và những người mới có thể chỉ sử dụng nó để học reactjs ngay bây giờ. Trong 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 chắc chắn rằng bạn đã cài đặt nodejs. Nếu chưa được cài đặt, hãy xem qua hướng dẫn này cho nodejs (https://www.guru99.com/node-js-tutorial.html) cài đặt.

Khi bạn đã cài đặt nodejs, 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.

Dưới đây là danh sách các gói cho Reacjs:

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

Mở dấu nhắc lệnh và chạy các lệnh trên trong thư mục Reacproj/.

Tạo một thư mục src / nơi tất cả mã js sẽ có trong thư mục đó. Tất cả mã cho dự án Reacjs sẽ có sẵn trong thư mục src/. Tạo một tệp index.js và thêm import Reac và Reac-dom, như hiển thị 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 tôi đã trả về mã cơ bản cho reactjs. Chúng tôi sẽ giải thích chi tiết về nó trong chương tiếp theo. Chúng tôi muốn hiển thị Xin chào, từ Hướng dẫn Guru99 và điều tương tự cũng được trao cho phần tử dom có id “root”. Nó được lấy từ tệp index.html, là tệp bắt đầu, như được hiển thị bên dưới.

Tạo một thư mục public/ và thêm index.html vào đó như hiển thị 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 Reac-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 trong pack.json để đảm nhiệm việc sử dụng các tập lệnh phản ứng để biên dịch mã và khởi động máy chủ như hiển thị 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",
  "devDependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "^3.1.1"
  }
}

Để bắt đầu kiểm tra Reacjs hãy chạy lệnh

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 bằng 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 cũng sẽ sử dụng quy trình tương tự để thực thi các tệp javascript trong các chương tiếp theo. Thêm tất cả tệp js và .jsx của bạn vào thư mục src/. Cấu trúc tệp sẽ như sau:

reatproj/
	 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 Hướng dẫn ReactJS này để bắt đầu với ứng dụng ReactJS đầ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 file dưới dạng index.js trong thư mục src/

Bước 2) Viết mã đơn giản.
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ừ Hướng dẫn Guru99!”

ReactDOM.render(

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

ReactDOM.render sẽ thêm gắn thẻ vào phần tử có id gốc. Đây là tệp html chúng tôi đ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 mã.

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 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 file và thông báo cho bạn nếu có lỗi, nếu mọi thứ ổn thì nó sẽ mở trình duyệt và chạy file index.html tại http://localhost:3000/index.html

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 sẽ mở trong trình duyệt sau khi mã được biên dịch như dưới đây:

JSX là gì?

JSX là một phần mở rộng của javascript. Đây là một tập lệnh mẫu nơi bạn sẽ có khả năng sử dụng HTML và Javascript với nhau.

Đâ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, chúng ta cần Html và mỗi thành phần trong dom sẽ có các sự kiện cần xử lý, thay đổi trạng thái, v.v.

Trong trường hợp React, nó cho phép chúng ta sử dụng Html và javascript 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 đó, chúng tôi đã viết một cái gì đó như:

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à được mở rộng trong thời gian chạy. Biểu thức trong react giống như biểu thức javascript.

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.

Bạn có thể thấy 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 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 mã được yêu cầu và sẽ sử dụng tệp text.jsx trong index.js. Chúng tôi muốn thẻ h1 biến được sử dụng bên trong script.js, do đó, biến tương tự sẽ được xuất như hiển thị ở trên trong test.jsx

Đây là mã được sửa đổi trong 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 test.jsx trong index.js, trước tiên chúng ta phải nhập nó như hiển thị 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ư các hàm javascript thuần túy giúp tạo mã dễ dàng bằng cách chia logic thành mã độc lập có thể sử dụng lại.

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 đã trả về thẻ h1 như được hiển thị ở trên. Tên của hàm đóng vai trò như một phần tử, như được hiển thị bên dưới:

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

Thanh phân Xin chào được sử dụng như một thẻ Html, tức là và được giao cho Xin chào_comp biến và biến tương tự được xuất bằng cách xuất.

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

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 Xin chào được sử dụng làm thẻ Html, tức là .

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

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

Trạng thái là một đối tượng javascript tương tự như các đạo cụ có dữ liệu được sử dụng với kết xuất Reacjs. Dữ liệu trạng thái là một đối tượng riêng tư và được sử dụng trong các thành phần bên trong một lớp.

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

Đây là một ví dụ hoạt động về cách sử dụng trạng thái 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ì?

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

Đạ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ư được hiển thị ở trên, chúng tôi đã thêm msg gán cho Thành phần. Điều tương tự có thể được truy cập như đạ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 đạo cụ trong một lớp, chúng ta có thể làm 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

Vòng đời của thành phần được chia thành các giai đoạn Khởi tạo, Gắn kết, Cập nhật và Tháo gắn kết.

Dưới đây là giải thích chi tiết về từng Thành phần.

Một thành phần trong reactjs có 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: Trong giai đoạn này, Thành phần được hiển thị bên trong dom. Chúng ta sẽ tiếp xúc với các phương pháp sau trong trạng thái gắn kết.

thành phầnDidMount(): Điều này cũng được gọi khi Thành phần vừa được thêm vào dom.

render(): Bạn có phương thức này cho tất cả các thành phần được tạo. Nó trả về nút Html.

Cập nhật: Trong trạng thái này, dom được tương tác bởi người dùng và được cập nhật. Ví dụ, bạn nhập gì đó vào hộp 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 khi thành phần được cập nhật.

thành phầnDidUpdate() : 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 yêu cầu hoặc bị xóa.

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

Component willUnmount(): được gọi khi Component bị xóa hoặc bị hủy.

Ví dụ làm việc

Đây là một ví dụ hoạt động hiển thị các phương thức được gọi ở mỗi trạng thái.

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 đầu ra trong trình duyệt

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

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

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

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

Trong các phần tử đầu vào Html của Reacjs 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 phương thức setState().

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

Đâ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 đầu vào, chúng ta cần duy trì trạng thái, do đó, đối với trường phản ứng đó, cung cấp một phương thức đặc biệt gọi là setState, 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 onChange và onClick trên hộp văn bản và nút gửi. Khi người dùng nhập 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ư hiển thị 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 hộp văn bản:

Bấm vào nút gửi

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

Làm việc với các sự kiện trong Reacjs cũng giống như cách bạn làm trong javascript. Bạn có thể sử dụng tất cả các trình xử lý sự kiện được sử dụng trong javascript. 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.

Đây là một ví dụ hoạt động về cách sử dụng các sự kiện trong Reacjs.

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;

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. Khi người dùng nhập vào bên trong hộp văn bản chúng tôi thay đổi sự kiện được gọi và trường tên bên trong trạng thái đối tượng trạng thái được cập nhật như hiển thị 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

Sẽ xem xét một ví dụ hoạt động để hiểu hoạt động của css nội tuyến trong Reacjs.

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 color: 'red' 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 đối tượng có kiểu mà bạn muốn trên phần tử và sử dụng biểu thức để thêm kiểu, như trong 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 css bên ngoài, để tạo một thư mục css/ và thêm 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>
    <script src = "out/script.min.js"></script>
  </body>
</html>

Bây giờ chúng ta hãy thêm lớp 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 cung cấp thông tin chi tiết về lớp. Bây giờ chúng ta hãy thử nghiệm trong 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 class=”h1tag” đã được thêm thành công vào thẻ h1.

Tổng kết

ReactJS 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. Thư viện này được Facebook duy trì và được nhiều công ty sử dụng ngày nay để phát triển giao diện người dùng.
Các tính năng cốt lõi của ReactJS bao gồm JSX, các thành phần (các thành phần chức năng và các thành phần dựa trên lớp), vòng đời của một thành phần, đạo cụ và hỗ trợ trạng thái cho một thành phần, hoạt động với các biểu thức javascript.
Thiết lập dự án ReactJS được giải thích bằng cách sử dụng các tệp CDN và cũng sử dụng các gói npm để xây dựng dự án.
JSX là một phần mở rộng của javascript. Đây là một tập lệnh mẫu nơi bạn sẽ có khả năng sử dụng Html và javascript cùng nhau.
Các thành phần giống như các hàm javascript thuần túy giúp tạo mã dễ dàng bằng cách chia logic thành mã độc lập có thể sử dụng lại.
Trạng thái là một đối tượng javascript tương tự như các đạo cụ có dữ liệu được sử dụng với kết xuất Reacjs. Dữ liệu trạng thái là một đối tượng riêng tư và được sử dụng trong các thành phần bên trong một lớp.
Đạo cụ là các thuộc tính được sử dụng bên trong một thành phần.
Vòng đời của thành phần được chia thành các giai đoạn Khởi tạo, Gắn kết, Cập nhật và Tháo gắn kết.
Trong các phần tử đầu vào html của Reacjs 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 phương thức setState().
Làm việc với các sự kiện trong Reacjs cũng giống như cách bạn làm trong javascript. Bạn có thể sử dụng tất cả các trình xử lý sự kiện được sử dụng trong javascript. 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.
ReactJS cho phép bạn làm việc với css bên ngoài cũng như css nội tuyến bằng cách sử dụng biểu thức javascript.

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)

Bạn có thể thích:

5 khóa học React TỐT NHẤT với…

ReactJS là gì?

Tính năng của ReactJS

Ưu điểm của ReactJS

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

Sử dụng ReactJS từ CDN

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

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

NHỮNG BÀI VIẾT LIÊN QUAN

Sử dụng gói NPM

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

JSX là gì?

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

Biểu thức trong JSX

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

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

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

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

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

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

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

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

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

Ví dụ làm việc

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

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

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

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

Tổng kết