Học React qua 10 dự án thực tế (từ cơ bản – nâng cao

Học React qua 10 dự án thực tế (từ cơ bản – nâng cao

Để học React, bạn có rất nhiều cách như: học qua tài liệu chính chủ, học qua sách, video., khóa học online/offline… Với ReactJS, một trong những cách được ưu chuộng là học qua các dự án ví dụ thực tế.

Khi đọc mã nguồn của một dự án, bạn sẽ tìm ra nguyên tắc và phương pháp của tác giải để giải quyết một vấn đề. Điều này sẽ giúp bạn học được kỹ năng phân tích và giài quyết vấn đề trong các dự án thực tế.

Bài viết này, mình sẽ giới thiệu 10 dự án ReactJS để bạn tìm hiểu.

Nhưng trước khi đọc, bạn đến tìm hiểu cơ bản trước về React. Ít nhất bạn cũng nên biết trước về cú pháp React, states, props, component.v.v…

Phương pháp học React qua dự án thực tế

Nếu chỉ đơn giản bạn clone một dự án trên github về, bạn không biết cách học thì cũng không có hiệu quả.

Dưới đây là một số mẹo hay để bạn học được nhiều điều từ các dự án.

1. Mỗi thời điểm chỉ tìm hiểu 1 dự án

Vì có rất nhiều dự án mã nguồn mở hay ho trên Github nên thường bạn sẽ choáng ngợp, mình cũng thế.

Nhưng, khi bạn thực sự muốn học hỏi từ dự án đó, bạn đừng bào giờ học cùng một lúc tất cả những dự án đó. Bộ não của chúng ta không được thiết kế để làm việc đa nhiệm đâu.

Bạn nên tiến hành chọn lọc và chỉ chọn một dự án mà bạn thực sự muốn học. Sau khi học xong dự án đó, bạn có thể chuyển sang dự án khác, lúc đó vẫn chưa muộn mà.

2. Sao chép kiến thức chứ không phải chỉ có copy-paste code

Với mỗi dự án, bạn nghĩ rằng, bạn chỉ đọc qua và học hỏi nó chỉ bằng cách copy code của họ là xong? Bạn hơi nhầm!

Bạn nên tự mình viết lại nó, dù chậm nhưng sẽ hiệu quả hơn rất nhiều.

3. Luôn đặt câu hỏi: Tại sao

Trong quá trình tự viết lại code của họ, bạn sẽ gặp những đoạn code khó hiểu, hay còn lạ lẫm với bạn?! Điều này cũng rất hay gặp thôi, kể cả với bản thân mình cũng vậy.

Nếu điều  đó xảy ra, bạn hãy tò mò tìm hiểu vì sao đoạn code hoạt động? Tại sao họ lại viết như vậy?

Khi bạn tìm ra được câu trả lời, kiến thức của bạn cũng đồng thời tăng lên đáng kể đấy.

4. Thử nghiệm thêm những tính năng của riêng bạn

Trong quá trình tìm hiểu, bạn thấy một số chỗ code lạ lẫm, bạn thử sửa đổi chúng xem chúng còn hoạt động hay không? Tất nhiên, nếu có hoạt động hay không thì cũng phải tìm hiểu lý do nhé.

Cuối cùng, khi bạn hiểu cơ bản về dự án đó, bạn hãy thêm một vài tính năng dựa trên mã nguồn của dự án đó.

5. Kiên nhẫn và tập trung

Điều cuối cùng nhưng không kém phần quan trọng: Luôn luôn kiên nhẫn và tập trung

Việc học không bao giờ là đơn giản, do vậy, bạn cần phải luôn kiên nhẫn, cố gắng từng chút một. Dù mát thời gian nhưng nó rất đáng giá với bạn, cho tương lai của bạn sau này.

Cố gắng nhé!

Giới thiệu 10 dự án để bạn học ReactJS

Sau đây là những dự án mà bạn có thể học hỏi. Mình sắp xếp theo trình độ từ dễ tới khó nhé.

Luôn nhớ: Tại một thời điểm chỉ chọn một dự án để học thôi nhé.

1. Simple React To-do App

react-simple-todo-app

https://github.com/kabirbaidhya/react-todo-app

Một ứng dụng Todo đơn giản. Thông qua dự án này, bạn sẽ hiểu các khái niệm cơ bản của React.

2. Calculator

react-calculator

https://github.com/ahfarmer/calculator

Ứng dụng máy tính cá nhân này sẽ giúp bạn tìm hiểu những khái niệm logic trong Javascript và React.

3. BMI Calculator

https://github.com/GermaVinsmoke

Thông qua dự án này, bạn sẽ tìm hiểu về cách sử dụng Hooks

4. Snapshot

snapshot

https://github.com/Yog9/SnapShot

Thông qua dự án này, bạn sẽ hiểu rõ hơn về 3 khái niệm: React Hooks, Context API và React Router.

5. TMDb Movie Search

react-tmdb-search

https://github.com/SKempin/reactjs-tmdb-app

Với dự án này, bạn sẽ làm việc với REST API, cách kết nối và sử dụng kết quả trả về từ API.

6. React Redux To-do App (Full-stack)

react-todo-redux-firebase

https://github.com/r-park/todo-react-redux

Một dự án khác về Todo, nhưng sẽ có nhiều tính năng nâng cao hơn như: tính năng xác thực, database với firebase,v.v…

7. Netflix Clone

react-netflix-clone

https://github.com/AndresXI/Netflix-Clone

Với dự án này, bạn sẽ được nâng cao kỹ năng về thiết kế giao diện với React để tạo một trang web hiện đại.

8. React Redux Real World Example

react-redux-real-world-example

https://github.com/gothinkster/react-redux-realworld-example-app

Dự án này sẽ giúp bạn thực hành rất nhiều về Redux, một thư viện quản lý state phổ biến.

9. SoundCloud Redux

soundcloud-redux

https://github.com/r-park/soundcloud-redux

Sau khi thực hành xong dự án số 8, bạn sẽ tiếp tục nâng cao kiến thức về Redux thông qua dự án này. Đây là dự án kết hợp giữa Redux + Redux-Saga

10. Crate – Ecommerce Starter

crate-ecommerce-web-app

https://github.com/atulmy/crate

Dự án cuối cùng cũng là dự án nâng cao, kết hợp của nhiều kiến thức từ Node, Express, React, React Native, Redux tới GraphQL. Bạn hoàn thành được dự án này coi như đã thành thạo React.

Chúc bạn học React tốt!

Có thể bạn muốn đọc
17 kỹ năng cần thiết để trở thành một hacker

Để trở thành một hacker chuyên nghiệp bạn cần có nhiều kiến thức cả về kỹ thuật và công nghệ thông tin.

THẾ NÀO LÀ MỘT MOBILE APP DEVELOPER

Chắn hẳn các bạn vẫn còn nhớ đến anh Nguyễn Hà Đông, chủ nhân của trò chơi trên điện thoại thông minh nổi tiếng toàn cầu Flappy Bird ra đời vào năm 2014. Đến hiện tại, Grab, Go-Viet hay Now đều đã và đang thay đổi thói quen của người dùng với việc sử dụng ứng dụng di động.

Hướng dẫn đăng kí và cách kiếm Pi nhanh chóng.

Pi network là một cryptocurency mới và được khai thác chỉ trên điện thoại, nhưng đây là loại hình đào coin kỹ thuật số mới không tốn tài nguyên CPU như những app đào coin khác. Những app đào coin khác như ETN nó sẻ sử dụng CPU để giải mã thuật toán ( ETN sử dụng thuật toán cryptonight) Còn đây khi đào coin đt không hề cảm thấy nóng. Bạn cũng có thể tắt app, tắt mạng đi cũng có thể đào được chỉ cần sau mỗi 24h vào app và nhấn vào dấu Power ( dấu sấm sét ấy) là tiếp tục kiếm tiền thôi. Mình sẻ không nói nhiều về vấn đề này nữa.

Thuyết 8 giờ thứ ba' quyết định cuộc đời giàu - nghèo mỗi người

Mười năm sau khi tốt nghiệp đại học tôi tham dự một buổi họp lớp. Cuộc gặp mặt bạn cũ giúp tôi nhìn ra được một lý thuyết quan trọng quyết định cuộc đời mỗi người, tôi gọi là "thuyết 8 giờ thứ ba".  Nhớ lại những người bạn cùng lớp Vũ Tuệ và Tống Trần khi còn đi học, tôi rất ngạc nhiên trước những thay đổi đáng kể của họ.  Vũ Tuệ thời còn là sinh viên nổi bật với thành tích xuất sắc và ngoại hình nổi bật. Sau khi tốt nghiệp, cậu ấy vào làm việc tại một đơn vị được bố mẹ sắp xếp sẵn. Trong khi chúng tôi đang loay hoay tìm việc thì cậu ấy lại tận hưởng cuộc sống thoải mái. Tuy nhiên, số phận đã trêu đùa Vũ Tuệ vài năm trước, đơn vị tiến hành sa thải nhân sự, trong danh sách có tên cậu ấy. 

Cách hiển thị hiệu quả các bảng dữ liệu lớn: Tối ưu hóa hiệu suất từ 12 phút đến 300 mili giây

Chuyện là thời gian vừa rồi mình có quay trở lại làm việc với 1 dự án sử dụng CSDL dạng SQL (PostgreSQL, MySQL). Và 1 lần nữa lại dính ngay bài toán tối ưu hệ thống bằng cách tối ưu câu query. Có chủ đề để viết cho các bạn đọc rồi đây. Cũng khoảng 2-3 bài cho phần này theo những gì mình làm nhé. Nào bắt đầu thôi.

Các bước thiết kế website đúng CHUẨN trong 5 bước

Bạn muốn biết các bước thiết kế web? Các nhà thiết kế web thường nghĩ về quá trình thiết kế web tập trung vào các vấn đề kỹ thuật như khung dây, mã và quản lý nội dung. Các trang web được thiết kế tốt cung cấp nhiều thứ hơn là tính thẩm mỹ. Chúng thu hút khách truy cập và giúp mọi người hiểu sản phẩm, công ty và thương hiệu thông qua nhiều chỉ số, bao gồm hình ảnh, văn bản và tương tác. Điều đó có nghĩa là mọi phần tử của trang web của bạn cần phải hướng tới một mục tiêu đã xác định.