Rất nhiều bạn thắc mắc không biết là học ReactJS là học những gì? Rồi bắt đầu từ đâu? Sử dụng những package, thư viện nào, ... Để giúp các bạn trả lời câu hỏi đó, mình có tổng hợp lại một số nguồn tham khảo cũng như kinh nghiệm cá nhân của mình để viết ra lộ trình học ReactJS này, hi vọng giúp ích được cho các bạn. 😉

• Đôi tượng: mới bắt đầu học ReactJS mà không biết học những gì.
• Yêu cầu kiến thức:
  • Javascript cơ bản: https://javascript.info/
  • ES6 syntax: http://es6-features.org/#Constants
  • Git cơ bản: Học cách quản lý source code
  • NPM (Node Package Manager): Tìm hiểu xem đây là gì?
  • Tiếng Anh (vì tài liệu đa số là Tiếng Anh)

Nếu như mọi người chưa biết Javascript là gì, thì mình khuyên các bạn nên học JS trước rồi hẵn sang ReactJS nhé, kẻo ngợp nè! 😉

Mảng kiến thức cơ bản (BẮT BUỘC)

MỘT VÀI NOTES:

• ReactJS là thư viện để xây dựng UI component, chứ không phải framework nha.
• Lib (thư viện) vs framework khác nhau cái gì? Các bạn chịu khó google để biết thêm nha.
• Version hiện tại của ReactJS là bao nhiêu?
• ReactJS là của ai hay tổ chức nào?
• Tại sao phải cần ReactJS, sao không viết thuần javascript?
• Sẽ hơi khó hiểu khi mới đầu tiếp cận ReactJS, nhưng không sao, cứ đi tiếp nha hehee

Agenda

• Một vài topic nâng cao

  • 1. HOC
  • 2. Authentication
  • 3. I18n
  • 4. Static sites
  • 5. Deployment

• Nguồn tài liệu tham khảo

Một vài topic nâng cao

1. HOC

• Tham khảo https://reactjs.org/docs/higher-order-components.html

2. Authentication

Cái này là phần đăng nhập, đăng ký rồi quên mật khẩu các kiểu, ... Thường project nào cũng có và được làm sẵn, ít người có cơ hội được làm phần này vì nó khá phức tạp và mỗi project setup 1 lần là xong, ít khi phải đụng lại lần 2 🙂

Để làm cái này, mình có thể dùng mấy ông lớn để giúp mình như

• Firebase Auth
• Auth0

Các bạn chịu khó đọc docs để hiểu nó là gì nha.

• Cần hiểu được 1 cái flow đăng nhập, đăng ký diễn ra như thế nào.
• Token là gì? Tại sao lại cần quản lý nó ? Không có token có được không?
• Nhập username, password lên server có bị lộ thông tin giữa đường không?
• Nên lưu token trên website ở đâu?
• Lỡ token mà bị expired thì phải xử lý thế nào?
• ...

3. I18n

• Các bạn search Google xem i18n là viết tắt của cái gì nha.
• Cái này được dùng cho việc hỗ trợ đa ngôn ngữ, khi click vào ngôn ngữ tương ứng thì website được đổi ngôn ngữ tức thì.
• Package được sử dụng là React i18 next
• Ông thần này sử dụng được cho cả Class component và Function component (có hooks)
• Có phải project nào cũng hỗ trợ đa ngôn ngữ không? Cũng tuỳ project, nên xác định ngay từ đầu, nếu có làm đa ngôn ngữ thì setup từ đầu luôn cho đỡ khổ.

4. Static sites

• React Static
• Gatsby
• NextJS

5. Deployment

Làm thế nào để deploy website lên server để share cho người khác xem thành quả cày cuốc của mình.

• Deploy siêu đơn giản giống mình trong video này:
• Tham khảo full options tại đây: https://create-react-app.dev/docs/deployment/

Nguồn tài liệu tham khảo

Rất nhiều link tham khảo về các thư viện làm việc về ReactJS được tổng hợp ở đây: https://github.com/enaqx/awesome-react. Có gì mọi người tham khảo thêm hen. 😉

CẢNH BÁO: Lạc lối do nhiều links tham khảo quá 🤣

Những thông tin mình ghi nhận trong bài này là từ kinh nghiệm cá nhân, nên sẽ có phần thiếu sót, mọi người hãy cùng bổ sung, đóng góp cho nó hoàn chỉnh nhé. Cảm ơn mọi người rất nhiều nè ❤️