Hotline

5 th? vi?n c?n thi?t cho l?p trình ?ng d?ng React

Là m?t l?p trình viên, b?n hoàn toàn có th? t? t?o ?ng d?ng theo cách c?a riêng mình, ?? ti?t ki?m th?i gian và kh?ng t?n nhi?u c?ng s?c ?? ??i m?i nh?ng ?ng d?ng c? ch? v?i React.

>>>?7 kho l?u tr? Github t?t nh?t ?? h?c l?p trình Python

>>>?10 ti?n ích VS code dành cho l?p trình viên Javascript 2020

>>>?M?t vài th? thu?t CSS mà chính Frontend có th? còn ch?a bi?t

1. Formik

Xổ số Bến TreH?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? ly xác th?c kh?ng ??ng b? (phía máy ch?) sau khi g?i bi?u m?u

5 th? vi?n c?n thi?t cho l?p trình ?ng d?ng React

Xổ số Bến TreN?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”.

Xổ số Bến TreNgoài ra, chúng ta còn ph?i xay d?ng tính logic h?p ly cho ng??i dùng v?i h?u h?t các lo?i bi?u m?u: ??ng nh?p, ??ng ky, ??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 xay 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.

2. Downshift

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

3. CSS-Modules and Classnames

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.

4. Testing library

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

Xổ số Bến TreV?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.

Xổ số Bến TreT?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 ky ??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?. ?ay 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”.

Xổ số Bến TreNh? 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.

Xổ số Bến Tre- 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 lau 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