7 dự án React JS dành cho người mới bắt đầu vào năm 2023

Trước khi bắt đầu thực hiện các dự án của mình, điều quan trọng là phải biết lý do tại sao chúng tôi lại phát triển một số dự án nhỏ. Vì vậy, câu trả lời khá đơn giản. Là một nhà phát triển ngây thơ về bất kỳ công nghệ nào, cách tốt nhất để học React là xây dựng một số dự án trên công nghệ đó. Chúng ta sẽ tìm hiểu cách phát triển 7 dự án React cấp độ mới bắt đầu thú vị trong bài viết này, điều này sẽ cho phép chúng ta mở rộng hiểu biết về khung web.

Để phát triển được tất cả các dự án, điều kiện tiên quyết là bạn phải sử dụng thành thạo 2 phần mềm trên máy tính. Đầu tiên là VSCode - Môi trường phát triển tích hợp (IDE) và Trình duyệt tốt nhất là Google Chrome.

Hầu hết các dự án phản ứng này đều có sẵn trên GitHub (phần mềm kiểm soát phiên bản trực tuyến) để trình diễn.

1. Ứng dụng Thing to do

Một ứng dụng theo dõi các hành động việc cần làm của bạn, bạn có thể thêm bất kỳ số lượng nhiệm vụ nào vào đó, tìm kiếm các nhiệm vụ đó, nhấp vào hộp kiểm để hoàn thành nhiệm vụ và lọc bằng các nút như nhiệm vụ đang hoạt động, nhiệm vụ đã hoàn thành và tất cả nhiệm vụ. Đây là một dự án tuyệt vời khác để bạn thêm vào danh mục đầu tư của mình với tư cách là nhà phát triển React mới bắt đầu. 

Hãy thử ở đây: https://github.com/ShaifArfan/react-todo-app

Mã danh sách việc cần làm: https://github.com/ShaifArfan/react-todo-app

2.Calculator

Một máy tính dễ sử dụng với giao diện người dùng hấp dẫn. Máy tính ảo được xây dựng bằng React là một ý tưởng dự án hay khác để bạn thử khi mới bắt đầu. 

Chúng tôi cũng đã thấy nhiều ứng dụng máy tính khác nhau trên điện thoại di động, máy tính và các thiết bị khác nhau. Ở đây chúng ta có một hộp nhập liệu lấy dữ liệu đầu vào của người dùng dưới dạng số, sau đó thử thực hiện các phép tính như cộng, trừ, chia và nhân, v.v. Ở đây chúng ta sẽ tìm hiểu cách tạo một ứng dụng web với tất cả các tính năng của máy tính trên giao diện người dùng. 

Hãy thử ở đây: https://ahfarmer.github.io/computer/ 

Mã hoàn chỉnh: https://github.com/ahfarmer/computer 

3. Snapshot

Đó là một dự án thư viện đơn giản, nơi chúng ta có thể tìm kiếm ảnh theo từ khóa, thay đổi danh mục dựa trên các tùy chọn nhất định như Núi, Bãi biển, Chim, Thức ăn. Khi bạn di chuột vào hình ảnh, bạn sẽ nhận được hình ảnh phóng to. 

Dự án này đã được phát triển bằng React Hooks , API bối cảnh và React Router. Các Tuyến đường được thiết lập cho bốn trang mặc định và một trang tìm kiếm. Ngoài ra, hình ảnh được hiển thị bằng API Flickr và Axios để tìm nạp dữ liệu như được nêu trong mô tả kho lưu trữ. 

Mã hoàn chỉnh: https://github.com/Yog9/SnapShot 

Hãy thử ở đây: https://yog9.github.io/SnapShot/ 

4.E Commerce h3

Một trang web thương mại điện tử được xây dựng bằng React và Typescript, nơi chúng tôi có thể lọc các sản phẩm quần áo bằng các kích cỡ ưa thích của khách hàng như M, L hoặc XL, v.v. Chúng tôi có một nút có tên “Thêm vào giỏ hàng” bên dưới mỗi sản phẩm được hiển thị trên trang web, một lần người dùng chọn bất kỳ sản phẩm nào, nó sẽ vào giỏ hàng. Cuối cùng, nó có thể được sử dụng để thanh toán. Những thuật ngữ này chắc hẳn đã quen thuộc với mọi người ngày nay vì nó cố gắng chế nhạo các trang web thương mại điện tử phổ biến như Amazon, Flipkart và Myntra, v.v.

Hãy thử tại đây: https://react-shopping-cart-67954.firebaseapp.com/ 

Mã hoàn chỉnh: https://github.com/jeffersonRibeiro/react-shopping-cart 

Bạn có thích biểu tượng cảm xúc? 

5.Emoji Search

Chúng tôi đang sử dụng một số biểu tượng cảm xúc hàng ngày khi trò chuyện với bạn bè và đồng nghiệp trên các ứng dụng nhắn tin như WhatsApp, Facebook Messenger, Snapchat, v.v.

Một ứng dụng tìm kiếm thú vị nơi bạn có thể nhập và tìm kiếm bất kỳ biểu tượng cảm xúc nào từ danh sách biểu tượng cảm xúc nhất định.

Hãy thử ở đây: https://ahfarmer.github.io/emoji-search/

Mã hoàn chỉnh: https://github.com/ahfarmer/emoji-search 

6. Ứng dụng blog

Một Ứng dụng Blog đơn giản có các tính năng như danh sách bài viết dựa trên trang hồ sơ tác giả và trang bài viết được bình luận nhiều nhất hoặc thích nhất với phần bình luận và nút phản ứng. Về cơ bản ứng dụng này có 3 bộ lọc khác nhau, dựa trên bộ lọc được chọn, thành phần danh sách sẽ hiển thị 3 trang khác nhau. Nó đã được phát triển bằng cách sử dụng React Hooks, React Routing , Pagination và các kỹ thuật sắp xếp khác. 

Hãy thử ở đây: https://react-blog-website.vercel.app/ 

Mã hoàn chỉnh: https://github.com/MohitSojitra/react-blog-website 

7. Ứng dụng thời tiết

Ứng dụng thời tiết cung cấp thông tin chi tiết về thời tiết cho một địa điểm do người dùng chỉ định. Được xây dựng bằng API React và Open Weather để hiển thị dữ liệu thời tiết mới nhất. Ở đây chúng tôi có các tùy chọn tìm kiếm với thành phố và quốc gia mà chúng tôi muốn xem dự báo thời tiết. Chúng tôi sẽ sử dụng phương thức tìm nạp để tìm nạp các lệnh gọi API cùng với móc React và hiển thị có điều kiện.

Hãy thử ở đây: https://www.youtube.com/watch?v=uZGhTYZ6eys 

Mã hoàn chỉnh: https://github.com/codebucks27/React-Weather-app 

Điều gì tạo nên một dự án mã nguồn mở React tốt?

1. Thực tiễn tốt nhất trong ngành

Một số phương pháp hay nhất được đưa ra dưới đây 

• Viết tài liệu tốt. 
• Tự động hóa các nhiệm vụ lặp đi lặp lại. 
• Luôn giải quyết các vấn đề. 
• Truyền bá thông tin về dự án của bạn. 
• Thu hút những người đóng góp hữu ích. 

2. Cải thiện kỹ năng của bạn

• Bạn phải tiếp tục học hỏi và nâng cao kỹ năng của mình để phát triển sự nghiệp trong lĩnh vực phát triển web. Nó sẽ giúp bạn có được công việc mới và nhận được sự thăng tiến.
• Nếu bạn biết nhiều công cụ và khuôn khổ, bạn có thể mất ít thời gian hơn so với các đồng nghiệp tại nơi làm việc, dẫn đến năng suất cao hơn. 
• Chúng tôi phải nỗ lực cả về kỹ năng cá nhân và chuyên môn để có thể cạnh tranh.
   

3. Kết nối và quảng bá bản thân 

• Giao tiếp là một trong những khía cạnh quan trọng của bất kỳ phần nào của cuộc sống, nếu bạn giao tiếp tốt, bạn có thể tiếp cận được số lượng người tối đa, có thể là viết bài về công nghệ, diễn thuyết hoặc tham dự các buổi họp về công nghệ.
• Việc tham dự một số phiên trực tuyến, hội nghị ảo và công khai, phát biểu tại các diễn đàn công cộng, các buổi tọa đàm về công nghệ sẽ mang lại cho bạn lợi thế và trợ giúp trong việc kết nối cũng như tự quảng bá bản thân. 

4 lý do tại sao React.js có thể là lựa chọn tốt nhất cho dự án của bạn

1. React có cộng đồng các nhà phát triển và kỹ sư năng động lớn nhất. 
2. Luồng dữ liệu một chiều giúp việc gỡ lỗi và kiểm tra lỗi trở nên dễ dàng. 
3. Không có ý kiến, không áp đặt kiến ​​trúc, mang lại rất nhiều tính linh hoạt. 
4. Tiện ích mở rộng JSX hoặc JavaScript kết hợp cú pháp HTML với JavaScript giúp các nhà phát triển tương tác với trình duyệt dễ dàng hơn.

Ngoài ra, React đã ra mắt phiên bản mới nhất React v18 có các tính năng mới thú vị như:

• useId là một công cụ mới để tạo ID duy nhất trên cả máy khách và máy chủ, đồng thời tránh tình trạng hydrat hóa không khớp. 
• startTransition và useTransition cho phép bạn đánh dấu một số cập nhật trạng thái là không khẩn cấp. Các cập nhật trạng thái khác được coi là khẩn cấp theo mặc định.
• useDeferredValue cho phép bạn trì hoãn việc hiển thị lại phần không khẩn cấp của cây. Nó tương tự như việc gỡ lỗi nhưng có một vài lợi thế khi so sánh. Không có độ trễ thời gian cố định, do đó, phản ứng sẽ thử kết xuất bị trì hoãn ngay sau khi kết xuất đầu tiên được phản ánh trên màn hình. 
• useSyncExternalStore là một hook mới cho phép các cửa hàng bên ngoài hỗ trợ đọc đồng thời bằng cách buộc các bản cập nhật cho cửa hàng phải đồng bộ. Nó loại bỏ nhu cầu sử dụng React khi triển khai đăng ký các nguồn dữ liệu ngoài và được khuyến nghị cho bất kỳ thư viện nào tích hợp với trạng thái bên ngoài React.