Nhắc nhở... đây là 8 bảng tổng hợp tuyệt vời nhất dành cho nhà phát triển React

Được đăng trước đó trên .cult bởi Ashutosh Mishra. .cult là một nền tảng cộng đồng đặt tại Berlin dành cho nhà phát triển. Chúng tôi viết về mọi thứ liên quan đến sự nghiệp, tạo các bộ phim tư liệu gốc và chia sẻ nhiều câu chuyện khác về những nhà phát triển chưa từng được kể từ khắp nơi trên thế giới.

Thực hành là chìa khóa để thành thạo mọi kỹ năng hoặc lĩnh vực kiến thức. Bạn không thể học mọi thứ trong một ngày. Bạn cần tuần, tháng và đôi khi là nhiều năm thực hành liên tục để trở nên giỏi ở một điều gì đó.

React, nói chung, cũng rộng lớn và cần thời gian để học nó một cách tốt. Vì vậy, thay vì khóc trước gương khi bạn quên các khái niệm hoặc cú pháp, tìm kiếm các giải pháp.

Tôi giả định ở đây rằng bạn đã ít nhất có sự quen thuộc cơ bản với React, vì nếu không, tôi có một món quà khác cho bạn, mở nó ở đây.

Được rồi, vì vậy có vẻ như bạn đã có một số kinh nghiệm với React, nhưng các khái niệm và cú pháp đang trôi qua trí nhớ của bạn. Trong trường hợp đó, dưới đây là 9 bảng tổng hợp tuyệt vời có thể giúp bạn trong hành trình của mình:

Lưu ý: Bảng tổng hợp không chỉ hữu ích đối với các nhà phát triển mới mẻ mà còn với những người có kinh nghiệm. Lập trình là về việc tìm kiếm giải pháp không phải là ghi nhớ cú pháp, vì vậy bạn càng quen thuộc với cơ bản, nó càng hữu ích.

1. Bảng tổng hợp cho Nhà phát triển

Bảng tổng hợp cho Nhà phát triển là một trang web bảng tổng hợp phát triển web do Leon Gilyadov thiết kế. Trang web thiết kế tối giản này chứa các bảng tổng hợp về:

Lịch sử phát triển web

• React
• React Router
• Redux
• ES6

Bảng tổng hợp React này không có nhiều sâu sắc nhưng cung cấp nội dung ở mức bề mặt đủ tốt để nhanh chóng đọc qua các đoạn mã và cú pháp. Kiểm tra nó để nhanh chóng nắm bắt cú pháp khi đang vội vã.

Đến tháng 4 năm 2022, bảng tổng hợp này có cú pháp cho (chỉ đếm các thành phần chức năng):

• Tạo ứng dụng React
• Thành phần không có trạng thái
• Props trong thành phần không có trạng thái
• Children
• useRef Hook
• useState Hook
• Thành phần cao cấp
• Render Props

2. Gợi ý cho Nhà phát triển

Devhint.io là một trang web khác đầy đủ bảng tổng hợp cho nhiều công nghệ khác nhau. Bảng tổng hợp React của DevHint chứa nhiều nội dung hơn so với Developer Cheatsheets.

Tuy nhiên, hầu hết nội dung của nó dựa trên các thành phần lớp mà bạn có thể sẽ không cần trừ khi làm việc trên một mã nguồn cũ.

Tuy nhiên, bảng tổng hợp này chứa một số đoạn mã hữu ích từ thế giới của các thành phần chức năng. Đây là khai báo của thành phần chức năng, khai báo và ví dụ về useState hook, useEffect hook, và quan trọng nhất là cách tạo một hook tùy chỉnh.

3. Reed Barger

Bảng tổng hợp này là một bài viết của freecodecamp do Reed Barger viết. Đây là một trong những bảng tổng hợp React yêu thích của tôi và là bảng tổng hợp tốt nhất cho người mới học React. Nó được xuất bản vào tháng 2 năm 2022, nên cũng là bảng tổng hợp mới nhất so với các bảng tổng hợp khác được đề cập trong bài viết này.

Phần tốt của bảng tổng hợp này là nó không chỉ là một bảng tổng hợp cú pháp mà còn cung cấp cho bạn ngữ cảnh đằng sau cú pháp và giảng dạy một chút về những khái niệm đó. Vì vậy, nếu bạn ở mức độ người mới học, điều này sẽ hữu ích.

Bảng tổng hợp này chứa nội dung về những thứ rất cơ bản như React Elements, thuộc tính, kiểu, đoạn mã, thành phần, props, v.v. đến các hook như useState, useEffect, useRef, useContext, useCallback, và useMemo.

Nội dung được viết rất tốt, thân thiện với người mới học và đủ sâu để giữ bạn ở đây cho phần lớn vấn đề.

Cá nhân tôi, tôi nghĩ không có lý do gì mà trang web này không nên nằm trong danh sách đánh dấu của bạn.

4. Eric The Coder

Bảng tổng hợp này là một bài viết trên dev.to của Eric The Coder. Anh ấy viết bài này vào tháng 6 năm 2021 như một bảng hỗ trợ trí nhớ khi anh ấy quên các khái niệm và cú pháp của React.

Nội dung trong bảng tổng hợp này không sâu lắng lắm, nhưng nó chứa nhiều thứ cơ bản mà các bảng tổng hợp khác có thể đã bỏ qua. Điều này bao gồm các quy tắc JSX cơ bản, JavaScript trong JSX, Danh sách với key, chi tiết về các sự kiện nhấp chuột khác nhau, v.v.

Khi đến với hook, bảng tổng hợp này bao gồm useState, useEffect, và useRef.

Eric tạo ra bảng tổng hợp này khi anh ấy là một người mới học React. Vì vậy, ngay cả những điều rất cơ bản cũng được tài liệu hóa và nhấn mạnh đúng cách (điều mà các bảng tổng hợp khác có thể đã bỏ qua một phần).

5. SheCodes

Bảng tổng hợp React của SheCodes là một bảng tổng hợp dựa trên cú pháp, hoàn toàn dựa trên các thành phần chức năng.

Bạn có thể kiểm tra tất cả các đoạn mã một lượt hoặc lọc chúng theo từng danh mục. Không có giải thích kèm theo các đoạn mã nên bạn có thể sử dụng nó chỉ để xem nhanh cú pháp đa dạng.

Nội dung tương tự như các trang web khác và dễ dàng và nhanh chóng truy cập, làm cho nó trở thành một bảng tổng hợp tuyệt vời để tham khảo nhanh về cú pháp.

6. React TypeScript

Cuối cùng, chúng ta có một điều tuyệt vời cho các nhà phát triển TypeScript của chúng ta.

React TypeScript là một dự án bảng tổng hợp mã nguồn mở được cấp phép MIT với hơn 33K ngôi sao trên GitHub và nhiều đóng góp viên tuyệt vời để giữ cho dự án sống và chất lượng cao.

Nếu bạn đam mê làm việc trong React và TypeScript, bạn nhất định sẽ yêu thích bảng tổng hợp này. Bạn có thể truy cập nội dung trên trang web của họ ở đây hoặc đọc README trên GitHub.

Toàn bộ bảng tổng hợp được chia thành 4 phần:

• Cơ bản – Tập trung vào việc giúp những nhà phát triển React mới bắt đầu sử dụng TS trong ứng dụng React.
• Nâng cao – Hiển thị và giải thích cách sử dụng nâng cao của các loại chung cho những người viết các tiện ích/ chức năng/ render prop/ higher order components và TS+React libraries có thể tái sử dụng.
• Di chuyển – Giúp tập hợp lời khuyên cho việc di chuyển từng bước một các codebase lớn từ JS hoặc Flow, từ những người đã làm điều đó.
• HOC – Tổng hợp mọi kiến thức có sẵn để viết Higher Order Components với React và TypeScript.

Chất lượng của toàn bộ dự án là tốt nhất, giải thích cần thiết được đưa ra mọi nơi và, hơn tất cả, bảng tổng hợp này được cộng đồng duy trì và cập nhật tích cực.

7. Codingcheats.io

Đây là một bảng tổng hợp React tuyệt vời chỉ dựa trên các thành phần chức năng Codingcheats.io. Mặc dù không xuất sắc về thiết kế, bảng tổng hợp này có nội dung xuất sắc.

Tất cả các đoạn mã mẫu đều có sẵn trên trang chủ với một chút giải thích cho mỗi đoạn.

Nội dung bao gồm cú pháp cơ bản của thành phần, các lối tắt, xử lý sự kiện, và 6 hooks khác nhau – useState, useEffect, useRef, useMemo, useReducer. useCallback.

Mỗi đoạn mã mẫu đều đi kèm với ví dụ cụ thể và giải thích ngắn gọn. Bạn nên chắc chắn kiểm tra bảng tổng hợp này ít nhất một lần.

8. Ohans Emmanuel

Bảng tổng hợp này là bài viết của LogRocket do Ohans Emmanuel viết. Không giống như các bảng tổng hợp khác trên danh sách của chúng tôi, bảng này không tập trung vào những kiến thức cơ bản của React.

Đây là một bảng tổng hợp React Hooks chỉ giải thích về React Hooks. Nó chứa đựng cú pháp, cách các hooks hoạt động, và các nguyên tắc tốt nhất cần ghi nhớ khi làm việc với Hooks trong React. Mọi thứ được giải thích kèm theo ví dụ và nội dung được viết rất cẩn thận.

Các Hooks sau đây được bao gồm trong bảng tổng hợp:

• useState
• useEffect
• useContext
• useLayoutEffect
• useReducer
• useCallback
• useMemo
• useRef

Với một nhà phát triển React hiện đại, việc hiểu biết về Hooks là cực kỳ quan trọng và bảng tổng hợp này sẽ giúp bạn hiểu sâu về chúng và cách sử dụng chúng trong cuộc sống hàng ngày.

Học React không phải là một công việc một ngày. Điều này sẽ mất thời gian, nhưng sự kiên nhẫn, đầu tư vào kiến thức của bạn, và sự linh hoạt khi sử dụng bảng tổng hợp sẽ giúp bạn duy trì tại thị trường trong thời gian dài.

Chúc bạn may mắn trên hành trình của bạn. Nếu bạn có bất kỳ câu hỏi nào, hãy liên hệ với tôi trên Twitter.

Kiểm tra blog của tôi để biết thêm thông tin.

Chúc bạn mãi mãi mãn mãi với mã lệnh!