2020.08.26

Giới thiệu về React

Một giải pháp phù hợp thường được tìm ra bởi những người đã từng gặp phải và hiểu được vấn đề thực sự. Trước đây, trên một trang web có rất nhiều event được sinh ra tại nhiều khu vực khác nhau như trang web của Facebook thì số lượng dòng code sẽ rất nhiều và khó để maintain. Thư viện React ra đời vào năm 2013 dưới sự phát triển của Facebook nhằm giải quyết vấn đề trên. Sau đó, nó được giới thiệu, phát triển và ngày càng nhiều công ty trên thế giới sử dụng. Vậy thì React có những ưu điểm vượt trội gì  và giải quyết những vấn đề đó như thế nào? Chúng ta cùng tìm hiểu nhé!


React được biết đến là thư viện JavaScript giúp xây dựng component UI (giao diện người dùng) tương tác dễ dàng hơn, có trạng thái và có thể sử dụng lại được với xu hướng Single Page Application.  Một trong những đặc điểm tăng hiệu năng cho ứng dụng là công nghệ sử dụng DOM ảo (Virtual DOM).

 

react1

 

DOM (Document Object Model) là thư viện giao diện người dùng và tồn tại dưới dạng tree nodes dùng để quản lý, truy xuất, chỉnh sửa tới bất kì phần tử nào thông qua đối tượng gốc là document. React sử dụng DOM ảo nên việc cập nhật và re-render sẽ thực hiện hiệu quả hơn khi data có sự thay đổi. Nó so sánh, cập nhật phần tử thay đổi và chỉ render tại component cần thiết nên việc tạo lại rất nhanh không ảnh hưởng đến hiệu suất.

 

Ngoài ra, trong React cho phép nhúng code html vào trong code JavaScript 

nhờ JSX. Việc tích hợp giữa trong JSX làm cho code dễ đọc hơn, component dễ hiểu hơn  mà không làm thay đổi ngữ nghĩa của Javascript. Mỗi biểu thức JSX cần được bao bọc bởi phần tử ngoài cùng (thường dùng thẻ <div></div> để bao bọc). Việc sử dụng JSX là không bắt buộc nhưng được khuyến khích.

 

Với React, application được chia thành nhiều components. Một component có thể truy cập thông tin qua hai cách: props và state. Chúng ta có thể xem qua ví dụ sau để hình dung rõ hơn.

class HelloMessage extends React.Component {
     render() {
       return (
         <div>
           Hello {this.props.name}
         </div>
       );
     }
    }
 
    ReactDOM.render(
     <HelloMessage name="Minh" />,
     document.getElementById('example-app')
    );
  • Output:        Hello Minh


Props được sử dụng để truyền thông tin từ component này sang component khác. Để xem props của component có chứa gì ta sẽ sử dụng câu lệnh this.props.

class Color extends React.Component {
 constructor(props) {
   super(props);
   this.state = {color: "Black"};
 }
 render() {
   return (
     <div>
       <h1>My favorite color is {this.state.color}</h1>
     </div>
   );
 }
}
  • Output:       My favorite color is Black

 

Khác với props, state của component không thể truyền được ra ngoài. Component sẽ quản lý state của chính nó. Để truy cập state ta sử dụng cú pháp this.state.name-of-property và thay đổi state trong một component ta sử dụng hàm this.setState(). Một component con có thể thay đổi state của component cha bằng cách từ cha truyền xuống cho con một hàm callback để nhận dữ liệu cập nhật từ component con.

 

 Trong bài viết này, mình đã đề cập đến một số đặc điểm cơ bản của React. Hy vọng các bạn có cái nhìn tổng quát  về react  và có thể ứng dụng thư viện React vào web application.