Di chuyển ứng dụng của bạn từ jQuery sang React

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

Tìm hiểu cách di chuyển một ứng dụng hiện có từ jQuery sang React.

jQuery so với React?

Khi lựa chọn giữa jQuery và React, điều đó phụ thuộc vào nhu cầu và sở thích của bạn. Nếu bạn đang tìm kiếm một thư viện dễ sử dụng và có một cộng đồng lớn, thì jQuery là một lựa chọn tốt. Nhưng nếu bạn đang tìm kiếm một thư viện phù hợp hơn để phát triển quy mô lớn, thì React là lựa chọn tốt hơn.

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

Có một số lý do khiến bạn có thể muốn di chuyển ứng dụng của mình từ jQuery sang React.

• React nhanh hơn jQuery: Nếu chúng ta đang nói về hiệu suất thô, thì React nhanh hơn jQuery. Điều này là do React sử dụng DOM ảo, là một mô tả JavaScript của DOM thực. Điều này có nghĩa là khi người dùng tương tác với một ứng dụng React, chỉ các phần của DOM thay đổi sẽ cập nhật. Điều này hiệu quả hơn so với thao tác DOM đầy đủ của jQuery.
• React dễ bảo trì hơn: Một lý do khác để chuyển sang React là nó dễ bảo trì hơn jQuery. Điều này là do các thành phần React là độc lập nên bạn có thể dễ dàng sử dụng lại chúng. Điều này có nghĩa là nếu bạn cần thay đổi một thành phần React, bạn có thể làm như vậy mà không ảnh hưởng đến phần còn lại của codebase.
• React có thể mở rộng hơn: Cuối cùng, React có khả năng mở rộng hơn jQuery. Nó sử dụng kiến ​​trúc dựa trên thành phần, có khả năng mở rộng hơn so với cách tiếp cận nguyên khối của jQuery. Điều này có nghĩa là bạn có thể dễ dàng mở rộng và sửa đổi ứng dụng React khi cần thiết.
• React hỗ trợ tốt hơn cho kiểm thử đơn vị: Khi nói đến kiểm thử đơn vị, React có hỗ trợ tốt hơn jQuery. Vì bạn có thể dễ dàng cô lập các thành phần React, nên việc viết các bài kiểm tra đơn vị cho chúng sẽ dễ dàng hơn.

Cách di chuyển ứng dụng của bạn từ jQuery sang React

Nếu bạn định chuyển ứng dụng của mình từ jQuery sang React, có một số điều bạn cần lưu ý. Điều quan trọng là phải biết những gì bạn cần để bắt đầu và hiểu rõ về cách bạn có thể di chuyển các phần riêng lẻ trong ứng dụng của mình.

Điều kiện tiên quyết

Trước khi bắt đầu quá trình di chuyển, có một số điều bạn cần làm để thiết lập mọi thứ. Đầu tiên, bạn cần tạo một ứng dụng React bằng cách sử dụng create-react-app.

Sau khi bạn đã cài đặt các phần phụ thuộc này, bạn cần tạo một tệp có tên là index.js trong của bạn src danh mục. Tệp này sẽ là điểm nhập cho ứng dụng React của bạn.

Cuối cùng, bạn có thể chuyển sang các phần riêng lẻ của cơ sở mã của mình và cập nhật chúng cho 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 các phần tử. Ví dụ: nếu bạn có một nút, bạn có thể đính kèm một sự kiện nhấp chuột vào nút đó. Khi ai đó nhấp vào nút, trình xử lý sự kiện sẽ chạy.

$("button").click(function() {
});

React xử lý các sự kiện theo cách khác nhau. Thay vì gắn các 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 bạn có một nút, bạn sẽ xác định sự kiện nhấp chuột trong thành phần:

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

Ở đây, thành phần Nút chứa định nghĩa của phương thức handleClick (). Khi ai đó nhấp vào nút, phương pháp này sẽ chạy.

Mỗi phương pháp đều có ưu và nhược điểm của nó. Trong jQuery, các sự kiện rất dễ đính kèm và gỡ bỏ. Tuy nhiên, có thể khó theo dõi chúng nếu bạn có nhiều sự kiện. Trong React, bạn xác định các sự kiện trong các thành phần, điều này có thể giúp theo dõi chúng dễ dàng hơn. Nhưng chúng không dễ gắn và tháo.

Nếu đang sử dụng React, bạn sẽ cần cập nhật mã của mình để sử dụng phương pháp xử lý sự kiện mới. Đối với mỗi sự kiện mà bạn muốn xử lý, bạn sẽ cần phải xác định một phương thức trong thành phần. Phương thức này sẽ chạy khi sự kiện kích hoạt.

2. Hiệu ứng

Trong jQuery, bạn có thể sử dụng các phương thức .show () hoặc .hide () để hiển thị hoặc ẩn một phần tử. Ví dụ:

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

Trong React, bạn có thể sử dụng hook useState () để quản lý trạng thái. Ví dụ: nếu bạn muốn hiển thị hoặc ẩn một phần tử, bạn sẽ xác định trạng thái 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>
);
}

Đoạn mã này xác định biến trạng thái isShown và hàm setIsShown (). React có nhiều loại hook khác nhau mà bạn có thể sử dụng trong ứng dụng của mình, trong đó useState là một trong số đó. Khi người dùng nhấp vào nút, biến trạng thái isShown cập nhật và phần tử chỉ hiển thị 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, chúng có thể khó quản lý nếu bạn có nhiều. Trong React, các hiệu ứng nằm bên trong các thành phần có thể giúp quản lý chúng dễ dàng hơn, nếu không muốn nói là dễ sử dụng.

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

Trong jQuery, bạn có thể sử dụng phương thức $ .ajax () để tìm nạp dữ liệu. Ví dụ: nếu bạn muốn tìm nạp một số dữ liệu JSON, bạn có thể làm 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ể sử dụng phương thức fetch () để tìm nạp dữ liệu. Đây là cách 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 () rất dễ sử dụng. Tuy nhiên, có thể khó xử lý lỗi. Trong React, phương thức fetch () dài dòng hơn nhưng lại dễ dàng xử lý lỗi hơn.

4. CSS

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

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

Trong React, bạn có thể sử dụng CSS theo nhiều cách khác nhau. Một cách là sử dụng các kiểu nội tuyến. Ví dụ: nếu bạn muốn tạo kiểu cho một nút, bạn có thể làm như vậ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>

Một cách khác để tạo kiểu cho các thành phần React là sử dụng kiểu toàn cục. Kiểu chung là các quy tắc CSS mà bạn xác định bên ngoài một thành phần và áp dụng cho tất cả các thành phần trong ứng dụng. Để làm điều này, bạn có thể sử dụng thư viện CSS-in-JS 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ó sự lựa chọn đúng hay sai giữa kiểu nội tuyến và kiểu toàn cục. Nó thực sự phụ thuộc vào yêu cầu của bạn. Nói chung, các kiểu nội tuyến dễ sử dụng hơn cho các dự án nhỏ. Đối với các dự án lớn hơn, phong cách toàn cầu là một lựa chọn tốt hơn.

Dễ dàng triển khai ứng dụng React của bạn

Một trong những lợi thế quan trọng nhất của React là rất dễ dàng triển khai Ứng dụng React của bạn. Bạn có thể triển khai React trên bất kỳ máy chủ web tĩnh nào. Bạn chỉ cần biên dịch mã của mình bằng một công cụ như Webpack, sau đó đặt tệp bó.js kết quả trên máy chủ web của bạn.

Bạn cũng có thể lưu trữ ứng dụng React của mình miễn phí trên các trang GitHub.