5 thư viện cần thiết cho lập trình ứng dụng React

Hãy nhìn thẳng vào vấn đề này nhé: người dùng sẽ cực khó chịu khi biểu mẫu bị lỗi, và phải điền lại tất cả thông tin. Chìa khóa để tạo trải nghiệm tốt nhất cho người dùng là bạn phải làm biểu mật thật chuẩn xác.

Cụ thể thì làm biểu mẫu sao cho chuẩn xác?

1. Các trường biểu mẫu phải có xác thực phía máy khách.
2. Một trường không được hiển thị lỗi cho đến khi nó được người dùng “chạm vào” hoặc biểu mẫu được gửi.
3. Trạng thái biểu mẫu không được "lost" hoặc "reset" những gì xảy ra khi gửi không hợp lệ
4.  Biểu mẫu phải xử lý xác thực không đồng bộ (phía máy chủ) sau khi gửi biểu mẫu

Nếu chúng ta viết một biểu mẫu thỏa mãn cả bốn yêu cầu trên thì sẽ khá phức tạp. Chúng ta cần theo dõi tất cả các giá trị biểu mẫu, trạng thái “đã chạm” của tất cả các trường biểu mẫu đồng thời theo dõi các “lỗi”.

Ngoài ra, chúng ta còn phải xây dựng tính logic hợp lý cho người dùng với hầu hết các loại biểu mẫu: đăng nhập, đăng ký, địa chỉ... chúng ta có thể tiết kiệm thời gian bằng cách tái sử dụng chúng.

Thay vì tự mình xây dựng biểu mẫu, hãy sử dụng một thư viện phổ biến từ cộng đồng React.

Và Formik chính là một thư viện của Jared Palmer giúp hoàn thành chúng chỉ trong tích tắc.

Khi lập trình, bạn có thắc mắc tại sao lại phải sử dụng thư viện bên ngoài để tạo ra những thứ rất đơn giản như dropdown hay Select input không? Đúng là việc tạo ra những thứ chỉ dựa trên cú click chuột khá dễ, tuy nhiên với một danh sách dropdown có thể truy cập và sử dụng cho một lượng lớn người dùng Internet chỉ đơn thuần dựa vào trình đọc màn hình thì lại rất khó, nó lại càng khó hơn đối với người dùng bàn phím.

Đó là lý do tại sao tôi thích sử dụng downshift. Downshift sẽ đảm nhận việc nắm bắt khả năng truy cập của người dùng, còn chúng ta sẽ có trách nhiệm tìm hiểu về hành vi, thói quen người sử dụng.

Khi bắt đầu một dự án React mới, tôi thường xuyên chọn CSS-Modules bởi tính tiện dụng của nó, CSS-Modules hiển thị những kết quả nếu click chuột vào một điểm nào đó, nên tôi không cần phải học CSS-Modules trước khi sử dụng như BEM. Tôi cũng thường xuyên kết hợp sử dụng CSS-Modules với Classnames. Bạn có hay viết code kiểu như này không?

const className = 'button ' + props.hasError ? 'error' : '';

return (

 <button className={classname} {...props} />

);

Với Classnames, chúng ta có thể đơn giản hóa và viết nó như thế này.

const Button = props => (

  <button

    className={classnames("button", { error: props.hasError })}

    {...props}

  />

);

Thậm chí có thể kết hợp Classnames với CSS-Modules như sau.

import styles from './Button.module.css';

const Button = props => (

  <button

    className={classnames(styles.button, { [styles.error]: props.hasError })}

    {...props}

  />

);

Thật tuyệt vời phải không? Không gì tốt hơn CSS vì nó rất dễ sử dụng.

Việc test bằng testing library giúp chúng ta tiết kiệm thời gian hơn rất nhiều so với quá trình test thủ công, tránh được tình trạng phải lặp đi lặp lại việc cập nhật cấu trúc cũng như hoạt động của các thành phần: thiết kế, sản phẩm và lập trình. Chỉ cần các thành phần hoặc tính năng được kiểm tra đúng cách, chúng ta có thể đảm bảo rằng việc tái cấu trúc này không cho phép các phép hồi quy xâm nhập vào mã cơ sở. 

Khi nói đến thử nghiệm ứng dụng React, có một tiêu chuẩn vàng: testing-library/React. Còn được gọi là React-testing-library- hiện đã được tích hợp vào ứng dụng Create-react.

Với testing-library, chúng ta có thể kiểm tra các thành phần của mình từ góc độ người dùng.

Tôi sẽ giải thích rõ hơn bằng cách lấy một ví dụ minh họa. Trong ví dụ sau, tôi đã viết một bài kiểm tra cho một biểu mẫu đăng ký đơn giản. Nó yêu cầu người dùng cung cấp tên, email và mật khẩu của họ. Đây là tất cả các trường bắt buộc. Nếu bất kỳ cái nào bị bỏ qua, thì biểu mẫu sẽ hiển thị lỗi khi gửi.

import { render, fireEvent } from "@testing-library/react";

import userEvent from "@testing-library/user-event";

import { SignupForm } from "./Form";

describe("SignupForm", () => {

  it("should show an error when password is omitted", () => {

    const rendered = render(<SignupForm />);

    const nameInput = rendered.queryByLabelText("Name");

    userEvent.type(nameInput, "John Smith");

    const emailInput = rendered.queryByLabelText("Email");

    userEventtype(emailInput, "john@smith.net");

    const submitButton = rendered.queryByText("Submit");

    userEvent.click(submitButton);

    expect(

      rendered.queryByText("Please input your password")

    ).toBeInTheDocument();

  });

});

Như bạn có thể thấy, trước tiên ta sẽ đưa SignupForm với react-testing-library. Sau đó, ta nhập tên và email của mình. Tiếp theo, ta click chuột vào nút submit. Cuối cùng, chúng ta xác nhận các thông tin trên bằng thông báo “please input your password”.

Như bạn có thể thấy, mọi thứ trong bài test này đều dựa trên cách người dùng tương tác với biểu mẫu. Chúng ta có thể tái cấu trúc biểu mẫu này để sử dụng các đầu vào khác nhau, chia nó thành nhiều thành phần phản ứng mà không phá vỡ biểu mẫu cũ.

Khi tôi bắt đầu một ứng dụng React mới, tôi luôn cài đặt các thư viện này. Tôi viết ít bản mẫu hơn và có thể mang lại giá trị cho người dùng của mình nhanh hơn.

- Formik giúp tôi viết nhanh các mẫu đơn.

- CSS-Modules và Classnames giúp tôi viết CSS theo phạm vi.

- Downshift giúp tôi tạo các hộp tổ hợp có thể truy cập và chọn đầu vào mà không buộc tôi phải ghi đè các kiểu mặc định.

- Testing-library giúp tôi viết các bài test tích hợp lâu bền mang lại sự tự tin thực sự trong ứng dụng của tôi.

Vậy thư viện yêu thích của bạn để sử dụng với React là gì? 

Nguồn: Medium