EN VI

Series: Tìm hiểu học ReactJS trong 1 nốt nhạc

ReactJS - Kiến trúc (Architecture)

Thư viện React được xây dựng trên một nền tảng vững chắc. Nó đơn giản, linh hoạt và có khả năng mở rộng. Như chúng ta đã học trước đó, React là một thư viện để tạo giao diện người dùng trong một ứng dụng web. Mục đích chính của React là cho phép nhà phát triển tạo giao diện người dùng bằng JavaScript thuần túy. Thông thường, mỗi thư viện giao diện người dùng sẽ giới thiệu một ngôn ngữ mẫu (mà chúng ta cần phải học) mới để thiết kế giao diện người dùng và cung cấp tùy chọn để viết logic, hoặc trong mẫu hoặc riêng biệt.

Thay vì giới thiệu ngôn ngữ mẫu mới, React giới thiệu ba khái niệm đơn giản như sau:

Components: Các thành phần trong React được sử dụng để tạo giao diện người dùng. Mỗi thành phần đại diện cho một phần của giao diện người dùng và chứa mã HTML, CSS và JavaScript để hiển thị nội dung của nó.
Virtual DOM: Virtual DOM là một bản sao của DOM được sử dụng bởi React. Nó giúp tối ưu hóa hiệu suất bằng cách tránh việc tạo lại toàn bộ DOM khi có thay đổi.
JSX: JSX là một phần mở rộng của JavaScript và được sử dụng để mô tả cách hiển thị các thành phần của React.

Thay vì giới thiệu một ngôn ngữ mẫu mới, React tập trung vào việc sử dụng các khái niệm đơn giản để tạo ra các thành phần giao diện một cách dễ dàng và hiệu quả và giúp cho việc phát triển ứng dụng trở nên đơn giản và nhanh chóng hơn.

Phần mô tả về quy trình làm việc của một ứng dụng React:

Để hiểu quy trình làm việc của một ứng dụng React, chúng ta sẽ tạo và phân tích một ứng dụng React đơn giản trong chương trình này.
Mở command prompt và đi đến workspace của bạn.
```
cd /go/to/your/workspace
```
Tiếp theo, tạo một thư mục static_site và chuyển đổi thư mục đến thư mục mới được tạo.
```
mkdir static_site
cd static_site
```

Sau đó, tạo một tệp hello.html và viết một ứng dụng React đơn giản.

<!DOCTYPE html> 
<html> 
   <head> 
      <meta charset="UTF-8" /> 
      <title>React Application</title> 
   </head> 
   <body> 
      <div id="react-app"></div> 
      <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> 
      <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> 
      <script language="JavaScript"> 
         element = React.createElement('h1', {}, 'Hello React!') 
         ReactDOM.render(element, document.getElementById('react-app')); 
      </script> 
   </body> 
</html>

Tiếp theo, chúng ta sẽ phục vụ ứng dụng bằng cách sử dụng máy chủ web serve.

serve ./hello.html

Kết quả, chúng ta mở trình duyệt yêu thích của mình và nhập địa chỉ http://localhost:5000 vào thanh địa chỉ. Chúng ta sẽ tiếp tục với các bước tiếp theo sau khi chạy ứng dụng React bằng cách sử dụng máy chủ web serve:

Đó là quy trình làm việc của một ứng dụng React đơn giản. Chúng ta có thể tạo các ứng dụng phức tạp hơn bằng cách sử dụng các thành phần và trạng thái trong React.

Hãy phân tích code và thực hiện một số điều chỉnh nhỏ để hiểu rõ hơn về ứng dụng React.

Ở đây, chúng ta sử dụng hai API được cung cấp bởi thư viện React.

Khi chạy ứng dụng React, nội dung của tệp hello.html sẽ được hiển thị trên trình duyệt.

Trang web sẽ hiển thị tiêu đề "React Application" và một phần tử div với id "react-app".

Đoạn mã JavaScript trong tệp hello.html sử dụng React.createElement để tạo một phần tử h1 đơn giản với nội dung "Hello React!".

Đoạn mã tiếp theo trong tệp hello.html sử dụng ReactDOM.render để hiển thị phần tử được tạo bằng React.createElement trong phần tử div với id "react-app".

Khi trình duyệt tải lại trang web, nội dung "Hello React!" sẽ được hiển thị trên trang web.

React.createElement: Được sử dụng để tạo các phần tử React. Nó mong đợi ba tham số:

Thẻ phần tử
Thuộc tính của phần tử dưới dạng đối tượng
Nội dung của phần tử - Nó có thể chứa các phần tử React lồng nhau

ReactDOM.render: Sử dụng để render phần tử vào trong container. Nó mong đợi hai tham số −

Phần tử React hoặc JSX
Phần tử gốc của trang web

3. Phần tử React lồng nhau:

Vì React.createElement cho phép phần tử React lồng nhau, chúng ta có thể thêm phần tử lồng nhau như sau:

Ví dụ:

<script language="JavaScript">
   element = React.createElement('div', {}, React.createElement('h1', {}, 'Hello React!'));
   ReactDOM.render(element, document.getElementById('react-app')); 
</script>

Kết quả: Nó sẽ tạo ra nội dung như sau:

<div><h1> Hello React!</h1></div>

4. Sử dụng JSX:

Tiếp theo, chúng ta sẽ xóa hoàn toàn phần tử React và giới thiệu cú pháp JSX như sau:

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

Ở đây, chúng ta đã bao gồm babel để chuyển đổi JSX sang JavaScript và thêm type = "text / babel" trong thẻ script.

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

Sau đó, chúng ta chạy ứng dụng và mở trình duyệt. Kết quả sẽ hiển thị: Hello JSX!

Tiếp theo, chúng ta sẽ tạo một thành phần React mới, Greeting và sau đó thử sử dụng nó trên trang web.

<script type="text/babel"> 
   function Greeting() {
      return <div><h1>Hello JSX!</h1></div> 
   } 
   ReactDOM.render(<Greeting />, document.getElementById('react-app') ); 
</script>

Kết quả sẽ giống như trước đó và như sau: Hello JSX!

Bằng cách phân tích ứng dụng, chúng ta có thể tưởng tượng quy trình làm việc của ứng dụng React như được hiển thị trong sơ đồ sau:

Ứng dụng React gọi phương thức ReactDOM.render bằng cách truyền giao diện người dùng được tạo bằng thành phần React (được mã hóa ở định dạng JSX hoặc phần tử React) và bộ chứa để hiển thị giao diện người dùng.

ReactDOM.render xử lý JSX hoặc phần tử React và phát sinh Virtual DOM.

Virtual DOM sẽ được hợp nhất và hiển thị vào bộ chứa.

Kiến trúc của ứng dụng React:

Thư viện React chỉ là thư viện UI và nó không bắt buộc bất kỳ mẫu thiết kế nào để viết một ứng dụng phức tạp. Nhà phát triển có thể tự do chọn mẫu thiết kế của họ. Cộng đồng React khuyến khích một số mẫu thiết kế. Một trong những mẫu là mẫu Flux. Thư viện React cũng cung cấp nhiều khái niệm như Higher Order component, Context, Render props, Refs v.v., để viết mã tốt hơn. React Hooks là khái niệm đang được phát triển để quản lý trạng thái trong các dự án lớn. Hãy cùng tìm hiểu kiến trúc cấp cao của một ứng dụng React.

React app bắt đầu với một thành phần gốc duy nhất.
Thành phần gốc được xây dựng bằng cách sử dụng một hoặc nhiều thành phần.
Mỗi thành phần có thể được lồng vào các thành phần khác ở bất kỳ cấp độ nào.
Tổng hợp là một trong những khái niệm cốt lõi của thư viện React. Vì vậy, mỗi thành phần được xây dựng bằng cách tổng hợp các thành phần nhỏ hơn thay vì kế thừa một thành phần từ một thành phần khác.
Hầu hết các thành phần là các thành phần giao diện người dùng.
Ứng dụng React có thể bao gồm các thành phần bên thứ ba cho mục đích cụ thể như định tuyến, hoạt hình, quản lý trạng thái, v.v.

Nếu thấy hay thì tiếc gì bình luận hoặc chia sẻ nhé. Mời bạn đón xem bài viết tiếp theo trong series tìm hiểu về Reactjs này nhé.

Rating: 10 (1 Votes)

ReactJS - Hướng dẫn Cài đặt (Installation)

ReactJS - Tạo một ứng dụng React như thế nào?