16 Mẹo hay hữu ích để giúp bạn sử dụng React như một chuyên gia

Sau đây là những mẹo hay hữu ích để giúp bạn có thể tiến xa hơn trong con đường trở thành lập trình viên React xuất sắc. Hãy cùng theo dõi nhé!

1. Học JavaScript trước khi học React

Với những người mới học React, họ thường sẽ nhảy từ việc viết các hàm và thao tác DOM cơ bản sang lập trình React luôn. Tuy nhiên điều này khiến cho mọi thứ ngày càng rối rắm và khó khăn hơn.

Đây là một sai lầm phổ biến của các lập trình viên mới vào nghề: Cố gắng học React mà không có kiến thức vững chắc về JavaScript. Khi này họ sẽ không thể biết được đặc thù mà React có còn JavaScript thì không và ngược lại. Việc debug sẽ trở thành cơn ác mộng thực sự.

Vậy thì chúng ta nên làm gì? Đó chính là cần phải nắm chắc căn bản của JavaScript trước khi muốn tìm hiểu thứ gì đó mới mẻ hơn như React.

2. Đọc tài liệu React

Bạn không cần phải mất tiền học các khóa học cao siêu bên ngoài, hay cần một mentor để kèm 1-1 chi tiết. Cái mà bạn cần sau khi đã nắm chắc JavaScript đó chính là đọc kỹ các tài liệu hướng dẫn của React. Khi này tự khắc bạn sẽ biết nên và không nên làm gì để có thể cải thiện trình độ hiện tại.

3. Bắt đầu xây dựng dự án sớm

Tất nhiên việc đọc tài liệu suông thì sẽ chẳng thể nào giúp bạn trở thành lập trình viên React xuất sắc. Cái mà bạn cần đó chính là được bắt tay vào thực hành chi tiết trong các dự án để nâng cao kỹ năng của bản thân.

Bạn hãy tự xây dựng các dự án của riêng mình, đừng ngại mắc lỗi khi thực hiện. Khi đó bạn sẽ biết mình sai ở đâu và lấp đầy những lỗ hổng đó bằng kỹ năng và kinh nghiệm của bạn.

Nếu bạn đang bí ý tưởng để xây dựng dự án, có thể tham khảo một số nguồn sau:

• Frontend Mentor: Dự án cho mọi cấp độ kỹ năng.
• Frontend Practice: Tái tạo các trang web thực tế.
• Frontend Projects: Nhiều ý tưởng dự án khác nhau.
• JavaScript Mastery: Một kênh YouTube với các hướng dẫn dựa trên dự án.

4. Sử dụng các thư viện đáng tin cậy

Điều khiến cho React trở nên toàn năng, đó chính là các thư viện hỗ trợ vô cùng lớn và đa năng. Tuy nhiên không phải tất cả các thư viện đều an toàn, một số có thể tiềm ẩn rủi ro mã độc cho bạn.

Ví dụ, vào năm 2021, một gói NPM phổ biến, ua-parser-js, đã bị hack, lây lan phần mềm độc hại.

Để giảm thiểu rủi ro: Bạn nên sử dụng các thư viện từ các tác giả đáng tin cậy. Đồng thời luôn kiểm tra khối lượng tải xuống và cập nhật update thường xuyên từ thư viện.

5. Giải quyết vấn đề bằng Vanilla JS khi có thể

Trước đây, bạn cần các thư viện như lodash cho các tác vụ như nhân bản, lặp lại, v.v.

Nhưng JavaScript hiện đại đã được cải thiện rất nhiều. Bây giờ, bạn có thể đạt được rất nhiều điều với các phương thức gốc.

Vì vậy, đừng thêm thư viện nếu không thực sự cần thiết.

Tại sao? Mỗi thư viện bạn thêm vào sẽ làm tăng sự phụ thuộc của ứng dụng, khiến nó dễ bị tổn thương hơn trước các vấn đề bảo mật. Nó cũng có thể làm tăng kích thước gói, làm chậm thời gian tải. Đồng thời, nó cũng làm tăng thời gian xây dựng/biên dịch của ứng dụng và tạo ra chi phí bảo trì để cập nhật các dependency.

Trước khi tìm đến một thư viện, hãy kiểm tra xem Vanilla JS có thể làm được việc đó hay không. Thông thường điều này là hoàn toàn có thể.

6. Tối ưu hóa kích thước gói và lazy load càng nhiều càng tốt

Khi bắt đầu dự án, nó khá chậm chạp và cần được cải thiện chất lượng, bạn sẽ thêm 1 gói vào trong dự án để cải thiện, rồi lại thêm vào 1 gói khác bởi nghĩ rằng nó cần thiết cho dự án.

Cứ thế cứ thế ứng dụng của bạn mất quá nhiều thời gian để tải, các lập trình viên khác sẽ phàn nàn với bạn rằng quá trình build trở nên chậm chạp một cách đau đớn.

Điều này xảy ra là vì bạn đã thêm các component kích thước lớn mà không xem xét tác động của chúng đến ứng dụng sau khi thêm.

Vậy khắc phục thế nào? Lazy-load càng nhiều càng tốt. Thiết lập các kiểm tra để theo dõi sự gia tăng kích thước gói (Pull Request actions hoạt động tốt cho việc này). Sử dụng bundlephobia để kiểm tra kích thước gói trước khi thêm nó vào dự án của bạn.

7. Đặt logic liên quan gần nhau

Việc nhóm các tệp theo loại (ví dụ: components, utils, i18n) có vẻ là một ý tưởng hay, nhưng thực tế không phải vậy.

Tại sao? Sẽ khó khăn hơn để theo dõi logic của một component khi các tệp nằm rải rác. Bạn có nguy cơ xóa một component nhưng quên các tệp liên quan.

Thay vào đó, hãy giữ tất cả logic và tài sản của một component cùng nhau trong một thư mục.

8. Giữ cho các component đơn giản

Tránh các "God" component - những component cố gắng làm mọi thứ.

Chúng có vấn đề vì: Chúng khó đọc và khó hiểu hơn. Chúng thường dẫn đến xung đột kiểm soát phiên bản (Git, GitLab, v.v.). Việc sửa đổi chúng có thể vô tình ảnh hưởng đến toàn bộ ứng dụng.

Vậy phải làm gì? Hãy nghĩ về cách bạn sẽ cấu trúc code của mình nếu bạn đang làm việc với một đồng đội. Giữ cho các component của bạn tập trung vào một nhiệm vụ để giảm thiểu xung đột. Cách tiếp cận này giúp code của bạn sạch sẽ và giúp nhóm của bạn làm việc hiệu quả hơn.

9. Giải quyết các vấn đề đa dạng

Bạn càng giải quyết nhiều vấn đề với React, bạn càng trở nên tốt hơn.

Mỗi thử thách bạn giải quyết đều dạy bạn điều gì đó quý giá: Bạn khám phá ra các mẫu và anti-pattern mới. Bạn bổ sung thêm nhiều công cụ vào hộp công cụ dành cho nhà phát triển của mình. Bạn tự tin hơn vào kỹ năng của mình.

Nhưng đây là chìa khóa: đừng chỉ luyện tập - hãy đa dạng hóa việc luyện tập của bạn.

Khám phá các loại vấn đề, dự án và giải pháp khác nhau. Sự đa dạng đó sẽ giúp bạn phát triển nhanh hơn với tư cách là một lập trình viên React.

10. Học các mẫu lập trình tốt

Là một nhà phát triển React, bạn cũng nên tập trung vào các kỹ năng lập trình nền tảng: Cấu trúc Dữ liệu & Thuật toán (ví dụ: sets, maps, đệ quy). Các nguyên tắc như trong The Pragmatic Programmer.

11. Đọc rất nhiều code React

Xây dựng dự án không phải là cách duy nhất để học hỏi - đọc code cũng quý giá không kém.

Nó giúp bạn: Học hỏi các mẹo và thủ thuật mới. So sánh các cách tiếp cận để giải quyết vấn đề.

Vì vậy, hãy xem: Các dự án mã nguồn mở trên GitHub. Hoặc code của đồng nghiệp của bạn tại nơi làm việc.

12. Sử dụng TypeScript càng sớm càng tốt

Trước kia: Bạn dành thêm thời gian kiểm tra kỹ xem mình đã truyền đúng props hay chưa. Việc debug có thể mất hàng giờ, chỉ để nhận ra bạn đã truyền sai giá trị - hoặc tệ hơn, là undefined.

Sau này: Bạn tập trung vào việc cấu trúc các component của mình và xác định các kiểu. Bạn bắt được những sai lầm ngớ ngẩn trước khi chúng đến được môi trường production.

TypeScript không chỉ là một công cụ - nó là một yếu tố thay đổi cuộc chơi cho quy trình làm việc React của bạn.

13. Tránh trừu tượng hóa sớm

Bất kỳ lập trình viên nào cũng từng rất hay mắc lỗi này.

Bất cứ khi nào tôi thiết kế một component đơn giản, họ đều cố gắng làm cho nó có thể tái sử dụng và phù hợp với tương lai.

Vấn đề ở đây là gì? Họ sẽ thường tạo ra sự trừu tượng hóa sai vì không có nhu cầu ngay lập tức.

Điều này dẫn đến hai kết quả: Họ sẽ phải refactor lại code sau này. Hoặc tệ hơn, họ sẽ phải sống chung với sự trừu tượng hóa vụng về, khiến việc phát triển trở nên khó khăn hơn.

Vậy chúng ta phải làm gì? Viết một component giải quyết vấn đề trước mắt. Mở rộng nó chỉ nếu có nhu cầu tái sử dụng rõ ràng, và làm như vậy một cách từ từ để mang lại hiệu quả tốt nhất.

14. Sử dụng quản lý state tích hợp của React trước

Bạn không cần Redux hoặc Jotai ngay lập tức.

useState, useReducer và useContext của React rất hữu ích cho các ứng dụng đơn giản. Và bạn chỉ cần có thế!

15. Đừng mù quáng làm theo lời khuyên trên mạng

Vài năm trước, tôi đọc trên mạng rằng memoization là "xấu".

Vì vậy, tôi đã ngừng sử dụng nó trong các ứng dụng React của mình.

Cho đến khi tôi làm sập một ứng dụng trong môi trường production.

Lời khuyên đó có ý nghĩa đối với nhà phát triển đã chia sẻ nó, nhưng nó đã phản tác dụng đối với tôi vì: Tôi có các trường hợp sử dụng khác nhau. Tôi cần sử dụng các effect trong ứng dụng của mình. Tôi đang làm việc với các component quy mô lớn.

Vậy nên bạn cũng đừng mù quáng mà nghe theo các lời khuyên trên mạng nhé! Hãy trao đổi kỹ càng với đồng nghiệp, đánh giá xem trong ngữ cảnh hiện tại có thể sử dụng được nó hay không.

16. Chỉ sử dụng framework khi cần thiết

Bật mí: Bạn không cần framework để sử dụng React.

Một thiết lập đơn giản với React, Vite và react-router có thể làm được rất nhiều điều.

Chỉ sử dụng các framework như Next.js hoặc Remix khi ứng dụng của bạn yêu cầu các tính năng của chúng.

Hy vọng các mẹo hữu ích này sẽ giúp ích cho bạn trong tương lai!