1 số đặc điểm cơ bản của React

Khái niệm về React

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

DOM là gì?

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.

Lợi ích khi sử dụng JSX trong React

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

Application với React

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.

Tóm lại

 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. 

Ngoài React ra thì Vue.js là một framework JavaScript cung cấp trải nghiệm khá giống React. Bạn có thể tìm hiểu thêm tại bài viết VueJS là gì?