React: Up and Running - Day 1

Giới thiệu

ReactJs là một thư viện JavaScript cho phép bạn tạo ra các thành phần giao diện người dùng có thể tái sử dụng và cập nhật dữ liệu một cách nhanh chóng. ReactJs sử dụng khái niệm của Virtual DOM để giảm thiểu số lần truy cập vào DOM thật và tăng hiệu năng của ứng dụng. ReactJs cũng hỗ trợ JSX, một cú pháp giống HTML cho phép bạn viết JavaScript và HTML trong cùng một file

Lịch sử React

Vào năm 2011, Jordan Walke, một kỹ sư phần mềm tại Facebook, đã tạo ra React để giải quyết thách thức trong việc quản lý các cập nhật và thay đổi liên tục đối với tính năng News Feed. Cách tiếp cận hiện có liên quan đến thao tác trực tiếp với DOM, không hiệu quả trong việc xử lý các bản cập nhật thường xuyên. Để xây dựng một cách tiếp cận hiệu quả hơn, Walke đã thử nghiệm một cách xây dựng giao diện người dùng mới, dẫn đến việc tạo ra React

Tại sao sử dụng React

ReactJs sử dụng Virtual DOM để cập nhật DOM thật một cách tối ưu và nhanh chóng. Virtual DOM là một bản sao trừu tượng của DOM thật, cho phép ReactJs so sánh sự khác biệt giữa hai trạng thái của giao diện người dùng và chỉ thay đổi những phần cần thiết. Điều này giúp giảm thiểu việc reflow và repaint, tăng hiệu suất và trải nghiệm người dùng.

ReactJs hỗ trợ các lớp ES6 và các tính năng mới của JavaScript, như arrow functions, template literals, destructuring assignment, v.v. Điều này giúp viết code ReactJs dễ dàng và rõ ràng hơn, cũng như tận dụng các khả năng của ngôn ngữ hiện đại.

ReactJs cho phép bạn tạo ra các component có thể tái sử dụng và kết hợp với nhau để xây dựng giao diện người dùng phức tạp. Component là các đơn vị độc lập có state (trạng thái) và props (thuộc tính) riêng, cho phép bạn quản lý logic và giao diện của chúng một cách đơn giản và rõ ràng. Bạn cũng có thể sử dụng các component từ các thư viện bên ngoài hoặc chia sẻ component của bạn với cộng đồng.

ReactJs sử dụng JSX để viết code HTML trong JavaScript. JSX là một cú pháp mở rộng của JavaScript, cho phép bạn viết các phần tử HTML như là các biểu thức JavaScript. JSX giúp bạn viết code gọn gàng và trực quan hơn, cũng như hỗ trợ các công cụ kiểm tra lỗi và gợi ý code.

React is a Library

Mặc dù bạn có thể thấy React được gọi là JavaScript framework, nhưng thực tế nó là một thư viện chứ không phải framework. Để hiểu sự khác biệt giữa các framework và thư viện, hãy bắt đầu bằng cách nghĩ về sự khác biệt giữa hai loại bánh sandwich khác nhau này.

Bạn có thể tưởng tượng ra framework được gọi là “skeleton” của cả hai bánh sandwich. Cả hai đều có bánh mì ở bên ngoài theo sau là rau, phô mai và thịt ở bên trong theo thứ tự từ trên xuống. Tuy nhiên, mặc dù cả hai loại bánh sandwich này đều có cùng cấu trúc, bạn có thể biết chỉ bằng cách nhìn vào chúng rằng chúng sẽ có vị khá khác nhau do các thành phần khác nhau bên trong (thư viện).

Vì vậy, sự khác biệt giữa framework và thư viện là cấu trúc framework đã được xác định trước khi bạn bắt đầu trong khi thư viện thì không. Điều này có nghĩa là một thư viện cung cấp cho bạn sự linh hoạt và tùy biến cao hơn nhiều so với một framework.

Để có thêm một chút kỹ thuật thay vì so sánh hai loại bánh sandwich khác nhau, một thư viện về cơ bản cho phép bạn kiểm soát dòng chảy của ứng dụng. Khi bạn sử dụng thư viện, bạn là người gọi thư viện nhưng khi bạn sử dụng framework, nó sẽ gọi cho bạn. Điều này được gọi là đảo ngược của kiểm soát.

... và còn rất nhiều lý do khác nữa.

Nhưng riêng cá nhân mình, việc bắt đầu với 1 Framework sẽ dễ hơn. Nhưng khi mình master rồi, thì để tối ưu, bắt đầu với 1 library sẽ tốt hơn.

Hiểu sao về Virtual DOM

DOM là gì?

DOM là tên gọi tắt của Document Object Model (Mô hình Đối tượng Tài liệu), là một chuẩn được định nghĩa bởi W3C dùng để truy xuất và thao tác trên code HTML hay XML bằng các ngôn ngữ lập trình thông dịch (scripting language) như Javascript.

DOM giúp thao tác với dữ liệu theo mô hình hướng đối tượng do các phần tử trong DOM có cấu trúc được định nghĩa thành các đối tượng, phương thức, thuộc tính để có thể truy xuất dễ dàng. Chúng được coi như các node và được biểu diễn dưới dạng DOM Tree.

Trong khi HTML là 1 đoạn code, DOM là một thể hiện trừu tượng của đoạn code đó trong bộ nhớ.

<html>                                                   -> document node
<head>                                                   -> element node - head
    <title>
        HTML DOM                                         -> text node
    </title>                                             -> element node - title
</head>                                                  
<body>                                                   -> element node - body
</body>                                                   
</html>

HTML DOM cung cấp API để duyệt và chỉnh sửa các node. Nó chứa các phương thức như getElementById hay removeChild.

var content = document.getElementById("myContent");
content.parentNode.removeChild(item);

(Tham khảo từ Hiểu sao về Virtual DOM trong ReactJs?)

Virtual DOM

Thư viện React JavaScript sử dụng một khái niệm lập trình được gọi là Virtual DOM. Khi người dùng tương tác với một trang web, trình duyệt cập nhật DOM để phản ánh những thay đổi đó.

Tuy nhiên, việc cập nhật DOM có thể là một thao tác chậm và tốn kém, đặc biệt là đối với các trang web lớn và phức tạp. Điều này là do DOM được biểu diễn dưới dạng cấu trúc dữ liệu dạng cây và sau khi thay đổi được thực hiện, phần tử được cập nhật và các phần tử con của nó phải được kết xuất lại để cập nhật giao diện người dùng (UI) của ứng dụng. Việc re-painting hoặc re-rendering lại giao diện người dùng này có thể chậm và góp phần gây ra các vấn đề về hiệu suất.

Để tránh những vấn đề về hiệu suất này, React sử dụng Virtual DOM

The Virtual DOM is an in-memory representation of the actual DOM

Nó là một đối tượng JavaScript nhẹ có chứa tất cả những gì cần thiết thuộc tính và thuộc tính của các phần tử trên một trang web. Khi có thay đổi xảy ra trong giao diện người dùng, React sẽ cập nhật Virtual DOM trước, nhanh hơn nhiều so với cập nhật DOM thực. Sau đó, React so sánh các Virtual DOM trước đó và được cập nhật, đồng thời xác định tập hợp các thay đổi tối thiểu cần thiết để cập nhật DOM thực. 

Cuối cùng, React áp dụng những thay đổi đó trong một bản cập nhật hàng loạt cho DOM thực tế

Ví dụ

Tạo project Hello World

Đây là minh họa đầu tiên về việc áp dụng ReactJs, không đòi hỏi sự cài đặt của NodeJs. Chỉ cần HTML + Javascript là đã đủ điều kiện

Bạn tạo file hello-world.html như sau:

<!DOCTYPE html>
<html>

<head>
  <title>Hello React</title>
  <meta charset="utf-8">
</head>

<body>
  <div id="app">
    <!-- my app renders here -->
  </div>
  <script src="react/react.js"></script>
  <script src="react/react-dom.js"></script>
  <script>
    // my app's code
  </script>
</body>

</html>

Để chạy được trang web, bạn cần có 2 file react.js và react-dom.js. Thay vì cài đặt NodeJs, chúng ta sẽ nhúng thư viện từ unpkg. Vậy unpkg là trang web gì? 

unpkg là một trang web cung cấp dịch vụ CDN (content delivery network) cho tất cả các gói trên npm. unpkg cho phép bạn truy cập vào bất kỳ tệp nào trong một gói npm bằng cách sử dụng một URL đơn giản. unpkg giúp bạn sử dụng các thư viện JavaScript mà không cần cài đặt NodeJs hoặc quản lý các phụ thuộc. unpkg là một dự án mã nguồn mở được xây dựng và duy trì bởi Michael Jackson và được hỗ trợ bởi Cloudflare và Fly.io

Bạn tham khảo thêm ở đây để lấy package mới nhất của react: ReactJs CDN

Chúng ta thêm 1 tí code Bootstrap cho giao diện dễ nhìn. Cập nhật đoạn code mới như sau:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>ReactJs - Hello World</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-sm">
          <div id="app">      <!-- my app renders here -->
          </div>
        </div>
      </div>
    </div>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
      crossorigin="anonymous"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react@18/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
    ></script>
    <script>
      ReactDOM.render(
        React.createElement("h1", null, "Hello world!"),
        document.getElementById("app")
      );
    </script>
  </body>
</html>

Ở đoạn code trên, bạn chú ý 2 hàm ReactDOM.render() và React.createElement().

ReactDOM.render

React DOM là một thư viện JavaScript được phát triển bởi Facebook để kết nối React với DOM. React DOM cung cấp các phương thức để render các component React vào DOM:

• render()
• hydrate()
• unmountComponentAtNode(): loại bỏ component ra khỏi DOM
• findDOMNode()
• createPortal()

ReactDOM.render() có nhiệm vụ render một React element vào một DOM container. Nó nhận hai đối số: một React element và một DOM container.

Chúng ta thường dùng hàm này để render 1 DOM container duy nhất xây dựng Single Page Application (vd được tạo bởi create-react-app)

Cú pháp:

ReactDOM.render([what], [where]);

VD

const root = ReactDOM.createRoot(
  document.getElementById('root')
);
const element = <h1>Hello, world</h1>;
root.render(element);

React.createElement

React.createElement là một phương thức của React để tạo ra một đối tượng React element. React element là một đối tượng đại diện cho một phần tử giao diện người dùng, có thể là một thẻ HTML, một component React hoặc một fragment React. React.createElement nhận ba tham số: type, props và children.

1. type: là kiểu của React element, có thể là một chuỗi tên thẻ HTML (ví dụ ‘div’, ‘span’), một kiểu component React (một hàm hoặc một lớp), hoặc một kiểu fragment React.
2. props: là một đối tượng hoặc null chứa các thuộc tính của React element, như className, style, id, v.v. Nếu bạn truyền null, nó sẽ được xem như một đối tượng rỗng. Lưu ý rằng ref và key từ đối tượng props là đặc biệt và sẽ không có sẵn như element.props.ref và element.props.key trên đối tượng React element được trả về. Chúng sẽ có sẵn như element.ref và element.key.
3. children: là không hoặc nhiều node con. Chúng có thể là bất kỳ node React nào, bao gồm các React element, chuỗi, số, portal, node rỗng (null, undefined, true và false), và các mảng của node React.

Với đoạn mã sau:

React.createElement("h1", null, "Hello world!")

Bạn sẽ có đoạn code HTML được render tương ứng:

<h1>Hello world!</h1>

Hello world ở đoạn code trên là 1 text node. Bạn có thể thay bằng 1 đoạn HTML

React.createElement(
'span',
null,
'Hello ',
React.createElement('em', null, 'Wonderful'),
),
' world!'

Bạn thấy nhức đầu với đoạn code trên, chúng ta sẽ thử với JSX để đơn giản hóa đoạn code.

JSX example

JSX (viết tắt của cụm từ JavaScript XML) là một loại cú pháp mở rộng dành cho ngôn ngữ JavaScript viết theo kiểu XML.

JSX = Javascript + XML.

Nó transform cú pháp dạng gần như XML về thành Javascript. Giúp người lập trình có thể code ReactJS bằng cú pháp của XML thay vì sử dụng Javascript. Các XML elements, attributes và children được chuyển đổi thành các đối số truyền vào React.createElement.

JSX (viết tắt của cụm từ JavaScript XML)  là một cú pháp giống như XML / HTML được React sử dụng để mở rộng ECMAScript để văn bản giống như XML / HTML có thể cùng tồn tại với mã JavaScript / React.

Chúng ta viết lại đoạn React.createElement bằng JSX

ReactDOM.render(
<h1 id="my-heading">
<span>Hello <em>Wonderful</em></span> world!
</h1>,
document.getElementById('app')
);

Mã code JSX cần được viết trong thẻ a <script type="text/babel">. Mọi thứ trong thẻ này sẽ được chuyển đổi thành Javascript bằng cách sử dụng thư viện Babel.

Babel là một chương trình biên dịch và trình dịch mã Javascript. Nó được sử dụng để chuyển đổi một mã nguồn khác

<!-- Don't use this in production: -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
ReactDOM.render(
  <h1 id="my-heading">
	<span>Hello <em>Wonderful</em></span> world!
  </h1>,
  document.getElementById('app')
);
</script>

Kết luận

Qua bài viết này, bạn sẽ nhận thức được những lợi ích khi sử dụng React và có được một số kiến thức cơ bản về cài đặt và sử dụng React (dù chưa rõ ràng, nhưng nhiều tiền bối xài React khuyên như vậy, mình tuân theo vậy). Mong rằng mình sẽ có đủ thời gian để tiếp tục học và làm React đến cuối tháng 5. Hiii

Tham khảo

• 5 Lí do tại sao bạn nên sử dụng React
• Hiểu sao về Virtual DOM trong ReactJs?
• https://www.quora.com/Why-is-Reacts-virtual-DOM-so-much-faster-than-the-real-DOM
• Component Lifecycle là gì?