6 điều tôi hối tiếc với tư cách là một nhà phát triển React

Ảnh của Francisco Gonzalez trên Unsplash

React là một công cụ tuyệt vời để học. Nó cho phép chúng ta làm mọi thứ theo cách của riêng mình. Nó vừa mạnh mẽ vừa giới hạn cùng một lúc.

Đối với các nhà phát triển mới, không có hướng dẫn rõ ràng về thủ thuật nào là tốt nhất cho các trường hợp sử dụng nào và kết quả là có nhiều giải pháp cho mọi vấn đề. Và chắc chắn, tôi cũng từng rơi vào sai lầm này và đã muộn để áp dụng một số phương pháp hay nhất.

Hôm nay tôi chia sẻ 6 điều mà tôi nên bắt đầu làm sớm hơn trong hành trình phát triển React của mình.

1.Thử nghiệm

Thử Nghiệm quá lâu là điểm yếu của tôi. Tôi không thử viết bài kiểm tra cho các thành phần của mình, và cũng như mong đợi, thường thì tôi phải sửa các lỗi chính tả.

Nhưng dù có vẻ khó khăn nhưng việc kiểm tra trong React thực sự rất dễ dàng (Đối với hầu hết các trường hợp sử dụng).

Thêm một bài kiểm tra rất cơ bản chỉ mất hai phút để viết có thể tiết kiệm hàng giờ về lâu dài. Đây là một bài kiểm tra để kiểm tra xem thành phần Title có hiển thị chính xác hay không:

it('checks if the title component is in the document', () => {
   expect(screen.getByText('Title')).toBeInTheDocument()
})

Nếu bạn đang sử dụng create-react-app, bạn đã có thiết lập thử nghiệm. Chỉ cần bắt đầu các bài kiểm tra viết càng nhiều (và càng sớm) càng tốt.

2. Sử dụng đúng cấu trúc thư mục

Tôi nghĩ là một người mới bắt đầu sử dụng React, sai lầm lớn nhất của tôi là không sử dụng đúng cấu trúc thư mục. Về cơ bản những gì tôi đã làm là nhóm các tệp theo loại của chúng:

|-store
 |--actions
   |---UserAction.js
   |---ProductAction.js
   |---OrderAction.js
 |--reducers
   |---UserReducer.js
   |---ProductReducer.js
   |---OrderReducer.js

Nhưng khi dự án lớn hơn, việc tìm kiếm bất kỳ tệp nào ngày càng trở nên khó khăn hơn.

Vì vậy, cuối cùng tôi đã bắt đầu sắp xếp các tệp của mình theo tính năng. Điều đó có nghĩa là tất cả các tệp tương tự hiện được đặt trong cùng một thư mục:

|-store
 |--user
   |---UserAction.js
   |---UserReducer.js
 |--product
   |---ProductAction.js
   |---ProductReducer.js
 |--order
   |---OrderAction.js
   |---OrderReducer.js

Giờ đây, tôi dễ dàng hơn nhiều trong việc điều hướng qua hệ thống tệp để tìm bất kỳ thứ gì.

3. Sử dụng các thành phần được tạo kiểu

Tôi đã bắt đầu sử dụng các tệp css ngay từ đầu để tạo kiểu cho các thành phần của mình nhưng theo thời gian, nó thực sự trở nên lộn xộn.

Sau một thời gian, tôi đã học được sass và nó thật tuyệt! Nhưng mặc dù nó cung cấp một số đường cú pháp hơn vani css nhưng thực sự rất khó để tạo kiểu cho bất kỳ thành phần nào.

Việc sử dụng lại bất kỳ phong cách nào đặc biệt khó vì tôi thường quên rằng một phong cách cụ thể đã có ở đó.

// inside jsx
<button className="btn-submit">
<button/>

// inside css files
.btn-submit {

}

Ngoài ra, cá nhân tôi không thích sử dụng thuộc tính className bên trong JSX.

Sau một thời gian, tôi tìm thấy một thư viện có tên là Styled-components nó đã giải cứu cho tôi. Bây giờ tôi chỉ khai báo các kiểu của mình dưới dạng các thành phần riêng biệt và mã của tôi sạch sẽ và dễ nhìn hơn.

Cũng styled-components chấp nhận props, điều này đã giúp tôi giảm đi rất nhiều kiểu tạo kiểu có điều kiện trong các thành phần của mình!

const Button = styled.button`
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;
`;

4. Chuyển sang các thành phần chức năng sớm

Ban đầu, tôi đã được làm quen với React class-components và trong khoảng một năm tôi chỉ làm việc với các class componets.

Sau khi tôi chuyển sang các thành phần chức năng, lợi ích to lớn của chúng đã trở nên rõ ràng. Tôi nghĩ rằng react-hooks là điều tốt nhất đã xảy ra kể từ khi React xuất hiện trong bức tranh.

Có rất ít lý do mà bất kỳ ai vào năm 2021 sẽ cố gắng sử dụng các thành phần dựa trên lớp.

Bây giờ tôi đang cố gắng viết lại tất cả các thành phần của mình thành các thành phần chức năng.

5. Sử dụng Thư viện Xử lý Biểu mẫu

Biểu mẫu xử lý có thể là một trong những tính năng phổ biến nhất của bất kỳ ứng dụng nào. Tôi đã sử dụng phương pháp vani onChange trong một khoảng thời gian khá dài. Xử lý dữ liệu và xác thực là một nỗi đau lớn!

Cho đến khi tôi phát hiện ra Formik và react-hook-form.

Sử dụng hai thư viện này, việc xử lý biểu mẫu trở nên dễ dàng và sạch sẽ hơn rất nhiều. Ngoài ra, việc xác thực biểu mẫu giờ đây được khai báo và dễ dàng đối với tôi.

6. Sử dụng Linter và Formatter

Trong một thời gian dài, việc định dạng mã của tôi theo cách thủ công là một rắc rối lớn. Tôi thích mã của mình gọn gàng và sạch sẽ nên mỗi lần tôi cần phải: