Lộ trình học ReactJS cơ bản cho người mới bắt đầu 2020 🥰
Hậu Nguyễn
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. 😉
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. 😉
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ỘT VÀI NOTES:
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.Bạn cần gì để bắt đầu code được ReactJS:
Create React App
để tạo một ReactJS project mẫu: https://create-react-app.dev/docs/getting-started/Tada xong tới đây là bạn phải chạy lên được cái website đơn giản của ReactJS rồi đó. Giờ học code ReactJS thôi hehe 😎
Lưu ý:
- Không vội vàng, đừng đi nhanh mà không hiểu gì hết.
- Đi từng mục một, đi chậm, học tới đâu, lấy code bỏ vào VSCode chạy lên thử coi nó ra như thế nào để hiêu nó.
- Nếu gặp khó khăn, không hiểu topic nào thì tìm thêm blog, videos về chủ đề đó mà coi thêm.
Todo App
: Thêm, Xoá, Sửa và hiển thị ra danh sách TODOSSimple Cart
: Hiển thị danh sách sản phẩm, thêm vào giỏ hàng và tính tiền.Mục đích cho phần này để đảm bảo các bạn hiểu và vận dụng được kiến thức của ReactJS.
import PropTypes from 'prop-types'
function Item() {
// ...
}
Item.propTypes = {
data: PropTypes.object.isRequired,
isSpecial: PropTypes.bool
}
export default Item
Item.propTypes
, khúc này dù có hay không thì code của bạn vẫn chạy.Vậy Type Checking có tác dụng gì mà mình phải consider thêm nó vào?
Cảnh báo lỗi nếu truyền sai kiểu dữ liệu
khi đang dev. Thỉnh thoảng mình hay quên, không để ý loại dữ liệu truyền vào component, dẫn tới một số trường hợp tính toán sai và không như mong muốn, với Type Checking
nó sẽ giúp mình báo lỗi để mình biết và fix sớm.Link tham khảo: https://reactjs.org/docs/typechecking-with-proptypes.html#proptypes
Trong dự án thực tế, ít ai mà tự xử lý các vấn đề liên quan tới form, thay vào đó là sử dụng một thư viện có sẵn. Ở đây mình có một vài ứng cử viên:
React Hook Form
(recommended): mới nhất.Formik
: phổ biến nhất.Redux Form
: cái này lưu ý bạn phải dùng redux à nhen 😉Bạn có thể chọn 1 trong 3 để học và áp dụng vào dự án của mình. Nhưng recommend là học React Hook Form
hoặc Formik
thôi.
Khi làm việc với Form, bạn sẽ cần tới một schema validator để hỗ trợ bạn validate dữ liệu trong Form, 2 ứng cử viên cho vị trí này:
Làm việc với Form, cần lưu ý điều gì?
Form
: Thư viện quản lý Form như Formik
hay react-hook-form
Form Field
: cầu nối để bind giá trị của form
vào ui control
.UI Control
: cái này là những control của thư viện Bootstrap, Material Design hay AntDesign.react-router-dom
nè heheMột số điều bạn cần lưu ý khi làm việc với routing:
Tổ chức API module trong project thực tế như thế nào?
api
axios
, còn trường hợp project nhỏ, đơn giản thì có thể dùng fetch
cũng được. Fetch tiện cái là ko cần cài thêm thư viện
. Còn axios thì phải cài thêm package axios
nhen.api
|__ axiosClient.js hoặc fetchClient.js: config http client và cung cấp các phương thức get, post, put, ...
|__ productApi.js
|__ categoryApi.js
|__ userApi.js
|__ ... cứ mỗi một resource sẽ có một file API tương ứng 😉
Lưu ý khi có state cần đặt câu hỏi:
Hiện tại thì Redux chiếm lợi thế trên thị trường òi khi nhắc tới state management.
Nhưng gần đây, Facebook có đang thử nghiệm một thư viện để quản lý state cho ReactJS, đó là Recoil.
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ư
Các bạn chịu khó đọc docs để hiểu nó là gì nha.
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.
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è ❤️