Cách học React vào năm 2023

Cần học JavaScript? Bạn có thể học nó trong khi học React

Câu hỏi tôi thường hỏi nhất đối với những người mới bắt đầu muốn học React là: "tôi có cần học JavaScript không?"

React là một thư viện JavaScript và thường được quảng cáo là "chỉ là JavaScript." Điều này gợi ý rằng để thực sự học React, trước tiên bạn phải biết JavaScript. Cách tôi mô tả mối quan hệ của JavaScript với React là– bạn càng biết rõ về JavaScript, bạn càng trở thành nhà phát triển React giỏi hơn .

Như đã nói, bạn không cần phải học tất cả JavaScript trước. Nhiều khái niệm JavaScript có thể được học cùng lúc bạn đang học React.

Dưới đây là danh sách ngắn một số khái niệm trong JavaScript mà bạn cần hiểu để có thể sử dụng React một cách hiệu quả. Bao gồm các:

• Biến
• Mảng (và hàm .map())
• Các đối tượng
• sự kiện JavaScript
• Hàm và hàm mũi tên
• Phạm vi và đóng cửa
• Lời hứa và cú pháp chờ đợi không đồng bộ.
• Xử lý lỗi cơ bản

Đây là tất cả các khái niệm JavaScript mà theo kinh nghiệm của tôi, bạn thực sự cần biết để làm việc với React ở mọi cấp độ.

Bạn sẽ gặp và tìm hiểu thêm các khái niệm về React khi bắt đầu xây dựng dự án của riêng mình và xem mã của người khác.

Bạn không cần phải học các thành phần của lớp

Nếu bạn đang tự hỏi liệu bạn có cần học các thành phần của lớp vào năm 2023 hay không, thì bạn không cần.

Khi bạn bắt đầu học React, bạn sẽ nghe về một thứ được gọi là thành phần lớp dựa trên một lớp JavaScript bình thường. Điều này không còn cần thiết để học với tư cách là nhà phát triển React, nhưng nó vẫn có thể mang lại lợi ích cho bạn khi học nó.

Sau khi giới thiệu một tính năng có tên là React hook vào năm 2018, các nhà phát triển React đã chuyển sang sử dụng các thành phần hàm, được tạo bằng các hàm JavaScript.

Các thành phần lớp vẫn là một phần của React và chúng vẫn được sử dụng trong mã sản xuất trong một số trường hợp (chẳng hạn như ranh giới lỗi). Nhưng chỉ cần lưu ý rằng bạn không cần phải học chúng để thành thạo React.

Trên thực tế, tôi hiếm khi gặp phải chúng trừ khi tôi đang xem một cơ sở mã cũ hơn. Hầu hết chúng đã được chuyển sang các thành phần chức năng và móc React.

Tự giúp mình và tìm hiểu truy vấn React

Bất kỳ ứng dụng nghiêm trọng nào cũng yêu cầu dữ liệu. Thường thì dữ liệu bạn cần sẽ tồn tại bên ngoài ứng dụng của bạn, vì vậy bạn sẽ cần một chiến lược để tìm nạp dữ liệu đó và sử dụng trong dự án của mình.

Khi bạn bắt đầu tìm nạp dữ liệu, tôi thực sự khuyên bạn nên tìm hiểu thư viện có tên React Query .

Bạn có thể cài đặt React Query thông qua gói npm @tanstack/react-query.

React Query đã trở thành thư viện truy cập để tìm nạp và quản lý dữ liệu ngoài trong các ứng dụng React.

Lợi ích của việc sử dụng Truy vấn React là gì? Ngoài việc là một thư viện mà nhiều nhà phát triển React và các công ty hiện đã quen thuộc và tin cậy, nó sẽ giúp ích rất nhiều cho bạn khi tìm hiểu React Query vì đây được cho là cách hiệu quả nhất để bạn tìm nạp và quản lý dữ liệu ngoài trong các ứng dụng React của mình.

Lợi ích lớn nhất của việc sử dụng Truy vấn React đến từ thực tế đó là cung cấp cho bạn một bộ đệm (một kho lưu trữ) cho phép bạn giữ kết quả của mỗi truy vấn, do đó bạn có thể "lưu" dữ liệu mà bạn đã tìm nạp. Thêm vào đó, nó có nhiều công cụ để cập nhật bộ đệm đó chính xác theo cách bạn muốn.

Nó cũng có thông tin liên quan về trạng thái của mọi truy vấn bạn thực hiện, chẳng hạn như truy vấn đó đang tải hay dẫn đến lỗi.

Bạn không cần học Redux

Nếu bạn đã cố gắng học React trong nhiều năm trước, bạn có thể có ấn tượng rằng để học React, cuối cùng bạn phải học một thư viện khác có tên Redux.

Redux là một thư viện giúp chúng ta quản lý trạng thái trong các ứng dụng React của mình. Bạn có thể coi trạng thái là bất kỳ dữ liệu nào có thể thay đổi trong ứng dụng React. Redux cho phép chúng tôi quản lý một phần trạng thái (chẳng hạn như người dùng của chúng tôi đã đăng nhập) trên mọi phần của ứng dụng React của chúng tôi.

Redux không còn bắt buộc phải học như những năm trước. Lý do đầu tiên cho việc này là việc phát hành React Context API. Trong nhiều trường hợp, các nhà phát triển React đã sử dụng Redux để truyền dữ liệu xung quanh các thành phần của ứng dụng của họ. Đây là công việc mà React Context có thể làm cho chúng ta.

Ngoài ra, nếu bạn cần thay đổi hoặc cập nhật trạng thái trong nhiều phần khác nhau của ứng dụng (đây là một yêu cầu khác chỉ cần đọc trạng thái của bạn), thì có rất nhiều đối thủ cạnh tranh với Redux. Không giống như Redux, các thư viện này không yêu cầu bạn học các khái niệm mới, chẳng hạn như bộ giảm tốc, hành động, v.v.

Một số thư viện quản lý trạng thái mới hơn, "nhẹ hơn" này bao gồm:

• Zustand
• Jotai
• giật lùi

Khi bạn đã vượt qua những kiến ​​thức cơ bản về React và bắt đầu xây dựng các ứng dụng lớn hơn một chút so với ứng dụng việc cần làm tiêu chuẩn, bạn sẽ hiểu nhu cầu có một thư viện quản lý trạng thái. Redux vẫn là một thư viện tuyệt vời, nhưng trước tiên hãy tìm đến thư viện có API đơn giản hơn chẳng hạn như Zustand.

Không nhất thiết phải tiếp cận để tạo ứng dụng React

Khi bạn đã sẵn sàng tạo một dự án React của riêng mình trên máy tính của mình, hãy biết rằng có nhiều cách để thực hiện việc này.

Phát triển web nói chung đang ngày càng chuyển sang trực tuyến hơn – không phải mọi dự án React đều phải được thực hiện trên máy tính của bạn. Trong nhiều trường hợp, bạn có thể tạo một dự án hoàn toàn mới trong trình duyệt bằng cách sử dụng các công cụ như CodeSandbox hoặc StackBlitz hoàn toàn miễn phí.

Tuy nhiên, sẽ có lúc bạn cần hoặc muốn tạo một dự án React trên máy cục bộ của mình. Bạn có thể dễ dàng tiếp cận một công cụ như Tạo ứng dụng React , cho phép bạn tạo một dự án React bằng cách chạy một lệnh duy nhất.

Create React App vẫn là một công cụ tuyệt vời để tạo các dự án React. Cũng giống như Redux, các giải pháp thay thế mới đã xuất hiện mang đến cho bạn tất cả các tiện ích của Create React, nhưng trong một gói nhỏ hơn, thường nhanh hơn.