Di chuyển ứng dụng từ jQuery sang React

jQuery và React đều là library JavaScript phổ biến cho phát triển front-end. Trong khi jQuery là một library thao tác DOM, React là một library JavaScript để xây dựng giao diện người dùng.

Dưới đây là cách chuyển ứng dụng hiện tại từ jQuery sang React.

Sự khác biệt giữa jQuery và React

Chọn jQuery hay React phụ thuộc vào nhu cầu và sở thích của bạn. Nếu đang tìm một library dễ sử dụng và có một cộng đồng lớn, jQuery là lựa chọn tốt. Thế nhưng nếu tìm một library để phát triển quy mô lớn, React là lựa chọn hợp lí hơn.

Tại sao chuyển từ jQuery sang React?

• React chạy nhanh hơn jQuery.
• React dễ bảo trì hơn.
• React có thể mở rộng nhiều hơn.
• React có hỗ trợ tốt hơn để kiểm tra các đơn vị.

Cách chuyển ứng dụng từ jQuery sang React

Trươc khi chuyển ứng dụng từ jQuery sang React, bạn cần biết điều kiện để bắt đầu và việc phải làm để có thể chuyển từng phần trong ứng dụng.

Điều kiện

• Tạo ứng dụng React bằng create-react-app.
• Sau khi cài những phần phụ thuộc, bạn cần tạo một file mang tên index.js trong danh mục src. File này sẽ là điểm vào cho ứng dụng React của bạn.
• Cuối cùng, bạn có thể di chuyển tới từng phần riêng của codebase và cập nhật chúng phù hợp.

1. Xử lý sự kiện

Trong jQuery, bạn có thể đính kèm các sự kiện vào phần tử. Ví dụ, nếu có một nút bấm, bạn có thể đính kèm một sự kiện click vào nó. Khi ai đó click vào nút bấm, trình xử lý sự kiện sẽ chạy.

$("button").click(function() {
  // do something
});

React xử lý sự kiện theo các cách khác nhau. Thay vì đính kèm sự kiện vào các phần tử, bạn xác định chúng trong các thành phần. Ví dụ, nếu có một nút bấm, bạn sẽ định nghĩa sự kiện click trong thành phần:

class Button extends React.Component {
  handleClick() {
    // do something
  }
  render() {
    return (
      <button onClick={this.handleClick}>
        Click me!
      </button>
    );
  }
}

Tại đây, thành phần Button chứa định nghĩa của phương thức handleClick(). Khi ai đó click vào nút bấm, phương thức này sẽ chạy.

Mỗi phương thức có ưu & nhược điểm riêng. Trong jQuery, các sự kiện dễ dàng đính kèm và loại bỏ. Tuy nhiên, thật khó theo dõi chúng nếu bạn có nhiều sự kiện. Trong React, bạn định nghĩa sự kiện trong các thành phần. Điều này giúp việc theo dõi chúng dễ dàng hơn. Thế nhưng chúng lại không dễ đính kèm hay loại bỏ.

Nếu đang dùng React, bạn cần update code để dùng phương thức xử lý sự kiện mới. Đối với từng sự kiện muốn xử lý, bạn cần xác định phương thức trong thành phần. Nó sẽ chạy khi sự kiện được kích hoạt.

2. Hiệu ứng

Trong jQuery, bạn có thể dùng .show() hoặc .hide() để hiện hay ẩn một thành phần. Ví dụ:

$("#element").show();

Trong React, bạn có thể dùng hook useState(). Ví dụ, nếu muốn hiện hay ẩn một thành phần, bạn sẽ xác định trạng thái này trong thành phần:

import { useState } from "react";

function Component() {
  const [isShown, setIsShown] = useState(false);
  return (
    <div>
      {isShown && <div>Hello!</div>}
      <button onClick={() => setIsShown(!isShown)}>
        Toggle
      </button>
    </div>
  );
}

Code này xác định biến trạng thái isShown và hàm setlsShown(). React có các kiểu hook khác nhau mà bạn có thể dùng trong ứng dụng, useState là một trong số đó. Khi người dùng click vào nút bấm, cập nhật biến trạng thái isShown và phần tử này chỉ hiện khi thích hợp.

Trong jQuery, các hiệu ứng rất dễ sử dụng và chúng hoạt động tốt. Tuy nhiên, thật khó để quản lý nếu có quá nhiều hiệu ứng. Ở React, các hiệu ứng nằm bên trong thành phần nên việc quản lý dễ dàng hơn.

3. Tìm nạp dữ liệu

Trong jQuery, bạn có thể dùng phương thức $.ajax() để tìm nạp dữ liệu. Ví dụ, nếu muốn tìm nạp một số dữ liệu JSON, bạn có thể làm việc này như sau:

$.ajax({
  url: "https://example.com/data.json",
  dataType: "json",
  success: function(data) {
    // do something with the data
  }
});

Trong React, bạn có thể dùng phương thức fetch() để tìm nạp dữ liệu. Tại đây, bạn có thể tìm nạp dữ liệu JSON bằng phương pháp này:

fetch("https://example.com/data.json")
  .then(response => response.json())
  .then(data => {
    // do something with the data
  });

Trong jQuery, phương thức $.ajax() dễ sử dụng. Tuy nhiên, thật khó xử lý lỗi. Ở React, phương thức fetch() dài dòng hơn, nhưng nó dễ xử lý lỗi hơn.

3. CSS

Trong jQuery, bạn có thể xác định CSS theo trang. Ví dụ, nếu muốn tạo kiểu tất cả các nút bấm trên một trang, bạn có thể làm việc này bằng cách nhắm mục tiêu thành phần nút bấm:

button {
  background-color: red;
  color: white;
}

Trong React, bạn có thể dùng CSS theo nhiều cách khác nhau. Một cách là dùng các kiểu inline. Ví dụ, nếu muốn tạo kiểu một nút bấm, bạn có thể làm việc này bằng cách thêm thuộc tính kiểu vào phần tử:

<button style={{backgroundColor: 'red', color: 'white'}}>
  Click me!
</button>

Cách khác để tạo kiểu các thành phần React là dùng global style. Các global style là những quy tắc CSS do bạn xác định bên ngoài một thành phần và áp dụng cho tất cả thành phần trong ứng dụng. Để làm việc này, bạn có thể dùng một library CSS trong JS, chẳng hạn như các thành phần được tạo kiểu:

import styled from 'styled-components';

const Button = styled.button`
  background-color: red;
  color: white;
`;

Không có lựa chọn đúng hay sai giữa các kiểu inline và global. Nó thực sự phụ thuộc vào yêu cầu của bạn. Nhìn chung, các kiểu inline dễ dùng hơn cho các dự án nhỏ. Đối với dự án lớn hơn, global style là lựa chọn tốt hơn cả.

Trên đây là cách chuyển app từ jQuery sang React. Hi vọng bài viết hữu ích với các bạn.