5 Dự Án Bạn Cần Xây Dựng Để Bắt Đầu Với Reactjs

Câu hỏi muôn thuở “làm cách nào để bắt đầu với X?” không phải là một câu trả lời dễ dàng. Không phải vì không có thông tin, mà chính xác là vì có, hay nói đúng hơn là có quá nhiều. Vậy làm thế nào để bạn biết cái nào hữu ích cho một nhà phát triển mới vào nghề đang tìm kiếm một framework mới và cái nào thì không?

Thật khó khăn phải không? Và trên hết, bạn có các hướng dẫn, video, khóa học và dự án để thực hiện. Thuật ngữ “tê liệt khả năng phân tích” xuất hiện trong đầu bạn trong những tình huống này và tôi chắc chắn rằng bạn cũng đã từng gặp phải trường hợp đó.

Bí quyết để thoát khỏi tình trạng tê liệt đó là bắt đầu làm điều gì đó , bất kể điều gì, và tại đây bạn có thể tìm thấy danh sách 5 dự án thú vị mà bạn có thể xây dựng và học hỏi điều gì đó trong quá trình này.

1. Xây dựng bản sao thanh bên Twitter

Tôi luôn nói rằng loại dự án tốt nhất để xây dựng là những dự án đã được thực hiện. Bằng cách đó, bạn sẽ quên đi áp lực phải nghĩ ra điều gì đó mới mẻ và độc đáo, thay vào đó bạn lo lắng về việc tìm cách sao chép một điều gì đó đã được thực hiện (do đó bạn biết điều đó có thể thực hiện được).

Trong hướng dẫn cụ thể này , bạn sẽ tạo một bản sao thanh bên của Twitter. Đây chỉ là một dự án thử nghiệm vì bạn thực sự không thể tự mình làm bất cứ điều gì với nó, tuy nhiên, bạn sẽ có thể tìm hiểu những điều cơ bản về React mà không phải lo lắng về các tác vụ như tìm nạp dữ liệu. Những điều đó sẽ đến sau.

Đây là hướng dẫn đầu tiên tuyệt vời nếu bạn chỉ mới thực hiện một hoặc hai dự án với React, vì nó sẽ bao gồm các chủ đề như:

• Tạo một dự án React mới bằng cách sử dụngcreate-react-app
• Tạo kiểu cho các thành phần của bạn bằng MaterialUI
• Bạn sẽ tìm hiểu về hook và cách sử dụng chúng.
• Bạn cũng sẽ tìm hiểu các thành phần Bậc cao hơn là gì và bạn có thể làm gì với chúng.

Hãy xem trước hoặc bỏ qua nếu những chủ đề này đã là nội dung bạn đã đề cập.

2. Xây dựng blog

Đây là một trong những tác phẩm kinh điển, bên cạnh ứng dụng Việc cần làm, blog phức tạp hơn một chút, đúng vậy, nhưng nó cũng đề cập đến một số hoạt động thú vị khác, chẳng hạn như có nhiều phần và phải điều hướng giữa chúng.

Trong hướng dẫn này , bạn không chỉ thực hành điều đó mà còn sử dụng kiến ​​thức thu được từ dự án trước về hook để hiểu cách sử dụng hook tùy chỉnh từ thư viện bên thứ 3.

Trên thực tế, có một phần đầy đủ về Reac-router-dom, một thư viện giúp bạn liên kết mô-đun React Router bên trong các ứng dụng web.

Là một phần của hướng dẫn này, bạn sẽ làm việc trên:

• Nhân bản và làm việc với một dự án hiện có.
• React Router và cách sử dụng nó để thêm điều hướng vào ứng dụng của bạn.
• Sử dụng móc tùy chỉnh từ thư viện của bên thứ 3.
• Thiết lập trang 404 và ý nghĩa của nó.

Đây là hướng dẫn thứ hai tuyệt vời vì nó không quá phức tạp và nó dần dần bổ sung các khái niệm mới bằng cách hiển thị cho bạn một số ví dụ thực tế.

3. Bắt đầu tương tác với API của bên thứ 3

Một chủ đề lớn mà bạn sẽ phải học cách làm việc đó là yêu cầu dữ liệu từ thư viện của bên thứ 3. Cuối cùng nó sẽ trở thành một nhiệm vụ chung, một việc bạn sẽ làm sau đó, nhưng để đạt được điều đó, bạn phải bắt đầu từ đâu đó phải không? Hướng dẫn này chỉ cho bạn cách tương tác với API REST công khai của Wikipedia và xây dựng công cụ tìm kiếm xung quanh nó.

Là một phần của các khái niệm bạn sẽ làm việc, đó là tất cả những gì bạn đã làm cho đến nay với 2 phần trước và bạn sẽ bắt đầu tìm hiểu về tìm nạp , thứ sẽ trở thành một trong những công cụ chính trong bộ công cụ React của bạn.

Các khái niệm bạn sẽ học và thực hành khi làm theo hướng dẫn này là:

• Thực hiện các yêu cầu API bằng cách sử dụng Tìm nạp.
• Xử lý các kết quả bên ngoài và hiển thị chúng trên ứng dụng của bạn.

Chúng không có nhiều khái niệm nhưng có tính nâng cao một chút, vì vậy tốt nhất bạn nên bắt đầu chậm lại vào thời điểm này và tập trung vào những thứ ít hơn nhưng phức tạp hơn.

Tuy nhiên, hãy cẩn thận , đừng cố chạy trước khi bạn biết cách bò. Nếu bạn chưa từng làm nhiều với React trước đây, hãy đảm bảo bạn thử #1 và #2 trước phần này, vì trong hướng dẫn này cần có một số mức độ kiến ​​thức.

4. Xử lý trạng thái ứng dụng của riêng bạn

Tiếp tục với dòng “đừng chạy trước khi bạn biết cách thu thập dữ liệu”, trạng thái ứng dụng là một chủ đề lớn đối với các nhà phát triển React. Biết cách giữ trạng thái cho một thành phần là một chuyện, nhưng sau đó bắt đầu chia sẻ trạng thái đó giữa nhiều thành phần hoặc thậm chí chuyển nó từ thành phần cha mẹ sang thành phần con không phải là chuyện nhỏ và có thể dẫn đến một số hành vi xấu.

Vì vậy, trong hướng dẫn này , bạn sẽ tìm hiểu về nhiều cách để xử lý trạng thái ứng dụng trước khi chuyển sang một thư viện lớn như Redux.

Lý do tại sao bạn hỏi? Bởi vì những thư viện này có xu hướng giấu đi một số khái niệm với người dùng để “đơn giản hóa” cuộc sống của họ. Đó là một suy nghĩ hay, nhưng nếu bạn không biết về những điều họ đang giấu bạn, bạn sẽ không bao giờ có thể học được chúng. Đó là chìa khóa. Hãy xem qua hướng dẫn này và thử sử dụng nó cho dự án tiếp theo của bạn. Sau đó, bạn có thể thử đọc về Redux, Recoil hoặc bất kỳ lựa chọn thay thế nào khác hiện có.

Sau khi đọc xong hướng dẫn này, bạn sẽ đọc được về:

• Ghi nhớ (và bạn có thể đọc thêm về chủ đề đó tại đây )
• Giảm thiểu cho quản lý nhà nước.
• Sử dụng ngữ cảnh

Đây chắc chắn là một hướng dẫn cấp cao và bạn sẽ có nhiều câu hỏi sau khi đọc nó. Nhưng đó là toàn bộ vấn đề! Nó sẽ mở ra nhiều cánh cửa, việc tìm hiểu thêm về chúng là tùy thuộc vào bạn.

Phát lại phiên mã nguồn mở

OpenReplay là bộ phát lại phiên, mã nguồn mở cho phép bạn xem người dùng làm gì trên ứng dụng web của mình, giúp bạn khắc phục sự cố nhanh hơn. OpenReplay tự lưu trữ để kiểm soát hoàn toàn dữ liệu của bạn

Bắt đầu tận hưởng trải nghiệm sửa lỗi của bạn - bắt đầu sử dụng OpenReplay miễn phí .

5. Đưa Next.js vào mix

Bước cuối cùng ở đây là kết hợp mọi thứ lại với nhau và bao gồm một trong những framework chính được sử dụng để xây dựng các ứng dụng React: Next.js .

Khung này sẽ cung cấp cho bạn các công cụ bạn cần để tạo ứng dụng của mình cho cả front-end và back-end. Trong hướng dẫn này, bạn sẽ xây dựng một Ứng dụng Giải trí Âm nhạc. Bạn sẽ sử dụng những thứ như:

• Next.js làm khung chính.
• Algolia là dịch vụ tìm kiếm chính.
• Lưu trữ đám mây cho Firebase .
• Cơ sở dữ liệu Firestore

Bạn cũng sẽ giải quyết các chủ đề như giao tiếp dịch vụ bên ngoài và tạo kiểu CSS. Là hướng dẫn thứ 5 cuối cùng, tôi thực sự khuyên bạn nên xem bài viết này để cung cấp cho bạn mọi thứ khác mà bạn cần để bắt đầu.

Đến cuối danh sách này, bạn sẽ có hiểu biết cơ bản rất tốt về cách tạo ứng dụng Web bằng ReactJS. Không chỉ vậy, bạn còn có thể xem các chủ đề khác không dành riêng cho ReactJS, đây là một điểm cộng tuyệt vời nếu bạn hỏi tôi. Đối với bước tiếp theo, hãy thử nghĩ đến một số tính năng còn thiếu mà bất kỳ hướng dẫn nào ở trên đều có trong ứng dụng của chúng và tự mình triển khai chúng!