ReactJS đã trở thành một công nghệ rất phổ biến trong việc phát triển ứng dụng web hiện đại. Với sự phát triển nhanh chóng và cải tiến liên tục, năm 2020 là một thời điểm tuyệt vời để bạn bắt đầu học ReactJS. Bài viết này sẽ giúp bạn tiếp cận và nắm vững kiến thức cơ bản của ReactJS.
Contents
Chuẩn bị trước khi học ReactJS
Để bắt đầu học ReactJS, bạn cần chuẩn bị một số kiến thức cơ bản như:
- JavaScript cơ bản: Đây là ngôn ngữ lập trình cơ bản của ReactJS. Bạn có thể học JavaScript tại đây: https://javascript.info/
- Cú pháp ES6: ES6 là phiên bản cải tiến của JavaScript, được sử dụng rộng rãi trong ReactJS. Bạn có thể tìm hiểu thêm về ES6 tại đây: http://es6-features.org/#Constants
- Git cơ bản: ReactJS yêu cầu bạn quản lý mã nguồn bằng Git. Hãy học cách sử dụng Git để quản lý mã nguồn tại đây.
- NPM (Node Package Manager): NPM là một công cụ quản lý gói phụ thuộc trong NodeJS. Hiểu thêm về NPM tại đây.
- Tiếng Anh: Một số tài liệu của ReactJS được viết bằng tiếng Anh, vì vậy bạn cần có khả năng đọc tiếng Anh.
Nếu bạn chưa biết gì về JavaScript, tôi khuyên bạn nên bắt đầu học JavaScript trước khi học ReactJS. Việc này sẽ giúp bạn hiểu rõ hơn về cú pháp và nguyên tắc làm việc của ReactJS.
Mảng kiến thức cơ bản (BẮT BUỘC)
Trước khi bắt đầu học ReactJS, hãy tìm hiểu một số kiến thức cơ bản sau đây:
- ReactJS là một thư viện để xây dựng các thành phần giao diện người dùng (UI), không phải là một framework.
- Sự khác biệt giữa thư viện (library) và framework là gì? Hãy tìm hiểu thêm về chủ đề này.
- Phiên bản hiện tại của ReactJS là bao nhiêu?
- ReactJS do ai hoặc tổ chức nào phát triển?
- Tại sao chúng ta cần sử dụng ReactJS? Tại sao không viết giao diện người dùng bằng JavaScript thuần?
Khi bạn mới tiếp cận ReactJS, có thể bạn sẽ gặp một số khó khăn. Nhưng đừng lo, hãy tiếp tục học tập và thực hành. Bạn sẽ nhanh chóng tìm hiểu và vận dụng được kiến thức của ReactJS.
0. Setup môi trường làm việc
Để bắt đầu viết mã ReactJS, bạn cần setup một môi trường làm việc. Hãy chuẩn bị những công cụ sau đây:
- Cài đặt NodeJS: NodeJS là một môi trường chạy JavaScript. Bạn có thể tải và cài đặt NodeJS tại đây.
- Một trình soạn thảo mã (code editor): Tôi khuyên bạn nên sử dụng Visual Studio Code (VSCode) làm trình soạn thảo mã. VSCode là một trình soạn thảo mã mạnh mẽ, phổ biến và được hỗ trợ tốt cho ReactJS.
- Cài đặt một số tiện ích mở rộng hữu ích của VSCode (tuỳ chọn): Đây là một số tiện ích mở rộng giúp bạn làm việc hiệu quả hơn với VSCode:
- Live Server: Để chạy ứng dụng ReactJS và xem trực tiếp kết quả trong trình duyệt.
- Material Theme Icons: Thêm các biểu tượng hình ảnh đẹp mắt cho các file và thư mục.
- Material Theme: Tạo giao diện đẹp cho VSCode.
- Sử dụng Fira Code font: Sử dụng font chữ đẹp và hỗ trợ hiển thị các ký tự đặc biệt của JavaScript.
- ReactJS code snippets: Cung cấp các mẫu mã ngắn cho các đoạn mã ReactJS phổ biến.
- ESLint: Hỗ trợ kiểm tra cú pháp và quy tắc lập trình.
- Babel Javascript: Hỗ trợ biên dịch cú pháp ES6 thành ES5 để tương thích với các trình duyệt cũ hơn.
- Bracket Pair Colorizer: Tô màu các dấu ngoặc và cặp ngoặc trong mã.
Sau khi đã chuẩn bị môi trường làm việc, bạn có thể bắt đầu tạo một dự án ReactJS bằng công cụ Create React App. Hãy tìm hiểu thêm tại đây: https://create-react-app.dev/docs/getting-started/
Với những bước chuẩn bị trên, bạn đã có thể tạo một trang web đơn giản sử dụng ReactJS. Bây giờ, hãy tiếp tục học và viết mã ReactJS nào!
1. Kiến thức nền tảng
Đầu tiên, hãy tìm hiểu và làm quen với các khái niệm cơ bản của ReactJS bằng cách truy cập vào trang web chính thức của ReactJS và đọc phần Main Concepts: https://reactjs.org/docs/hello-world.html
Lưu ý khi học kiến thức cơ bản của ReactJS:
- Không vội vàng, hãy hiểu một khái niệm trước khi chuyển sang khái niệm tiếp theo.
- Hãy thực hành từng bước, chạy mã lên trình biên dịch và kiểm tra kết quả để hiểu rõ hơn về khái niệm đó.
- Nếu gặp khó khăn hoặc không hiểu bất kỳ phần nào, hãy tìm kiếm các blog hoặc video khác về chủ đề đó để tìm hiểu thêm.
Sau khi đã hiểu kiến thức cơ bản này, hãy thử tạo một trang web đơn giản mà bạn thích, như một ứng dụng Quản lý công việc (Todo App) hoặc Giỏ hàng đơn giản (Simple Cart). Mục đích của phần này là đảm bảo bạn hiểu và áp dụng được kiến thức của ReactJS vào việc xây dựng các ứng dụng thực tế.
Ngoài ra, bạn cũng có thể tham khảo các video học ReactJS cơ bản được thực hiện bởi tôi tại đây: https://www.youtube.com/playlist?list=PLeS7aZkL6GOsPo-bFZSNuu4VhYicRjlAq
Một số chủ đề nâng cao
Sau khi đã nắm vững kiến thức cơ bản của ReactJS, bạn có thể tiếp tục học các chủ đề nâng cao sau đây:
2. Kiểm tra kiểu dữ liệu (Type checking)
Kiểm tra kiểu dữ liệu là một chủ đề tùy chọn trong ReactJS. Bạn có thể học và áp dụng kiểm tra kiểu dữ liệu (Type checking) trong mã ReactJS của mình. Điều này giúp bạn:
- Phát hiện và cảnh báo các lỗi khi truyền sai kiểu dữ liệu trong quá trình phát triển.
- Giúp bạn xác định loại dữ liệu mà một thành phần ReactJS đang sử dụng.
- Giúp bạn dễ dàng tìm kiếm và sửa các lỗi liên quan đến kiểu dữ liệu khi mã ReactJS của bạn trở nên lớn.
Bạn có thể tìm hiểu thêm về kiểm tra kiểu dữ liệu trong ReactJS tại đây: https://reactjs.org/docs/typechecking-with-proptypes.html#proptypes
3. Xử lý Form
Trên thực tế, ít ai tự xử lý các vấn đề liên quan đến Form trong ReactJS. Thay vào đó, họ sử dụng các thư viện có sẵn. Dưới đây là một số thư viện phổ biến để xử lý Form trong ReactJS:
- React Hook Form (được khuyến nghị): Thư viện mới nhất và đơn giản nhất để xử lý Form.
- Formik: Thư viện phổ biến nhất trong việc xử lý Form trong ReactJS.
- Redux Form: Thư viện sử dụng Redux để quản lý trạng thái của Form.
Khi làm việc với Form trong ReactJS, bạn cũng cần một thư viện hỗ trợ xác thực dữ liệu trong Form. Dưới đây là một số ứng cử viên cho vị trí này:
- Joi
- Yup: Được lấy cảm hứng từ Joi
Khi làm việc với Form, bạn cần lưu ý những điều sau:
- Làm thế nào để thiết lập giá trị khởi tạo cho Form.
- Cách tổ chức Form và phân biệt rõ ba cấp độ:
- Thứ nhất là Form: Thư viện quản lý Form như Formik hoặc react-hook-form.
- Thứ hai là Form Field: Cầu nối để liên kết giá trị của Form với các điều khiển giao diện (UI Control).
- Thứ ba là UI Control: Đây là các điều khiển của các thư viện như Bootstrap, Material Design hoặc AntDesign.
- Đọc thêm và xem video này để hiểu rõ hơn: https://youtu.be/LuNYJuyQxKE
4. Routing
Để quản lý các trang và điều hướng trong ứng dụng ReactJS, bạn cần sử dụng thư viện react-router-dom. Hãy tìm hiểu thêm về react-router-dom và cách thiết lập điều hướng trong dự án ReactJS của bạn tại đây: https://reacttraining.com/react-router/web/guides/quick-start
Khi làm việc với Routing trong ReactJS, hãy lưu ý những điều sau:
- Cách thiết lập Routing trong dự án ReactJS.
- Tìm hiểu về các thành phần chính như Router, Switch, Route và Redirect.
- Cách thiết lập Routing lồng nhau (Nested Routing) để tạo ra các bố cục (layouts) chung và rendere các thành phần tương ứng dựa trên Routing con.
5. Gọi API
API là cách thức để client và server giao tiếp với nhau. Khi làm việc với ReactJS, bạn có một số lựa chọn để gọi API như:
- XHR: Gọi API theo phong cách cũ, sử dụng callback.
- Fetch: Gọi API bằng sử dụng Promise, sử dụng sẵn trong trình duyệt.
- Axios (được khuyến nghị): Thư viện phổ biến để gọi API trong các dự án ReactJS thực tế.
Hãy tìm hiểu cách tổ chức module API trong một dự án ReactJS:
api
|__ axiosClient.js hoặc fetchClient.js: Cấu hình HTTP client và cung cấp các phương thức như get, post, put,...
|__ productApi.js
|__ categoryApi.js
|__ userApi.js
|__ ... Mỗi tài nguyên (resource) sẽ có một file API tương ứng.
Sắp tới, tôi sẽ có video giải thích chi tiết về cách tổ chức module API này.
6. Hooks
Hooks là tính năng mới trong ReactJS giúp cải thiện hiệu suất và mạnh mẽ hơn các thành phần Functional (Function) so với các thành phần Class. Hãy tìm hiểu thêm về Hooks và cách sử dụng chúng trong ReactJS tại đây: https://www.youtube.com/playlist?list=PLeS7aZkL6GOsHNoyeEpeL8B1PnbKoQD9m
7. Quản lý trạng thái ứng dụng (State management)
Khi có trạng thái (state) cần quản lý trong ứng dụng, hãy đặt câu hỏi:
- Nếu trạng thái chỉ được sử dụng bởi một thành phần hiện tại, hãy sử dụng trạng thái của thành phần (component state).
- Nếu trạng thái được chia sẻ bởi nhiều thành phần khác nhau, hãy sử dụng thư viện quản lý trạng thái (state) trong ReactJS.
Hiện nay, Redux được coi là một trong những thư viện phổ biến nhất để quản lý trạng thái trong ReactJS. Redux Toolkit giúp việc sử dụng Redux trở nên đơn giản hơn, mã ít hơn và dễ quản lý hơn. Tôi khuyến nghị bạn nên học về Redux cơ bản trước khi tìm hiểu Redux Toolkit.
Gần đây, Facebook đang thử nghiệm một thư viện quản lý trạng thái mới cho ReactJS, đó là Recoil. Lưu ý rằng Recoil vẫn đang trong quá trình thử nghiệm, vì vậy bạn nên áp dụng Recoil vào dự án của mình chỉ khi đã hiểu rõ về nó.
Tài liệu tham khảo
https://github.com/enaqx/awesome-react
Rất nhiều tài liệu tham khảo về các thư viện của ReactJS đã được tổng hợp tại đây. Hãy tham khảo và tìm hiểu thêm!
Cảnh báo: Khi tham khảo các tài liệu, bạn có thể lạc lối vì có quá nhiều liên kết tham khảo 😉
Những thông tin được chia sẻ trong bài viết này là từ kinh nghiệm cá nhân. Vì vậy, có thể còn thiếu sót. Hãy cùng đóng góp và hoàn thiện nó. Xin cảm ơn và chúc bạn học tập vui vẻ! ❤️