React là một thư viện khó đối với người mới, vì nếu chỉ để làm quen thì không mất quá nhiều thời gian, nhưng để thành thục và liên tục cập nhật những điều mới nhất với React yêu cầu người học cần tốn rất nhiều thời gian và có sự kiên định trong theo đuổi.
Không giống như nhiều ngôn ngữ hoặc thư viện đã có từ lâu, React tuy không phải là mới nhưng có một cộng đồng nhà phát triển rất đông đảo. Có lẽ cũng vì lẽ đó mà đây chính là một mảnh đất màu mỡ để các nhà phát triển liên tục cải tiến, cho ra mắt các gói cài đặt (package) và các thư viện vệ tinh.
Hãy cùng tham khảo lộ trình học react mới nhất được cập nhật cho người tiếp cận react từ 2024 nhé!
Tìm hiểu các khái niệm cốt lõi
Những khái niệm code lõi bao gồm JSX, Props, States, Cơ chế render, DOM ảo… Đây là những điều mới mẻ với người mới tiếp cận nhưng với một lập trình viên React thì đây giống như những gì bắt buộc phải thuộc nằm lòng!
Hãy nắm vững những điều này trước khi các bạn định làm gì tiếp theo.
Tìm hiểu các Hooks cốt lõi
Sau các khái niệm cốt lõi, các bạn cần nắm bắt các hooks cơ bản đã được tích hợp sẵn là useState, useEffect, useRef, useContext.
Các hooks ít được quan tâm hơn là useReducer, useCallback, useMemo… sẽ được dùng trong dự án thực tế vào các series tutorials dài hơi sau đó.
Một số khái niệm lõi giúp hiểu React
Một số khái niệm lõi bạn cần nghiên cứu để hiểu cơ chế của react, đó là:
- Hiểu nguyên nhân khiến React có thể hiển thị được
- Hiểu về Vitual DOM
- Hiểu về life-cycle
- Phân biệt các loại component và chức năng của chúng, phân tách rõ ràng được phần logic và phần hiển thị trong component
Create React App với Vite và Typescript
Một công cụ build khá được ưa chuộng vì nó nhanh, đơn giản… đó là ViteJS. Hãy dùng nó và có thể kết hợp ReactJS với typescript trong giai đoạn này!
Fetch data với Tanstack Query
Tanstack Query (trước đây được biết đến với cái tên React Query) sẽ giúp các bạn tìm nạp dữ liệu và hiển thị ra dữ liệu. hãy nghiên cứu ở mức cơ bản Tanstack Query ở giai đoạn này. Nếu bạn vẫn muốn tìm một giải pháp thay thế Tanstack, bạn có thể nghĩ đến SWR.
Quản lý State với Zustand
Chúng ta đã nghe nói quá nhiều về quản lý trạng thái trong ứng dụng React với Redux, sau này được bổ sung và cái tiến với Redux Toolkit, Redux Thunk, Saga.. Vài năm gần đây, Zustand nhận về một cái nhìn khác. Có vẻ Zustand quản lý trạng thái của mình dưới dạng một đối tượng và viết các hàm để cập nhật các thuộc tính trên đối tượng đó. Đây là một giải pháp dễ dàng hơn.
Có rất nhiều lựa chọn thay thế Zustand như Recoilm, Jotai. Bạn có thể thứ nếu như bạn có nhiều thời gian khi bắt đầu!
Tạo kiểu với TaildwinCSS, Radix, Shadcn UI
Nếu là vài năm trước đây, có lẽ tôi sẽ khuyên các bạn tìm hiểu Material UI hoặc Antd.
Nhưng đến bây giờ, các thư viện UI này khá cồng kềnh và khó tuỳ chỉnh. Xu hướng tất yếu của tương lai chính là nhanh, gọn nhẹ và dễ tuỳ chỉnh. Nhưng với TaildwinCSS, người dùng có thể lựa chọn kết hợp với một library component như Radix hoặc Shadcn UI.
Định tuyến với Tanstack Router
React Router vẫn là một bộ định tuyến phù hợp và chưa lỗi thời, với sự cập nhật của React Router 6 các bạn có khá nhiều cái mới nhưng chưa thật sự đột phá!
Bạn có thể tham khảo Tanstack Router – đây là bộ định tuyến hoàn toàn mới 2024 với vô số tính năng tuyệt vời. Nó điều hướng an toàn, hỗ trợ typescript, đính tuyến lồng nhau, tìm nạp trước router tự động và đặc biệt: nó được thiết kế để sử dụng với các thư viện tìm nạp dữ liệu phía client như Tanstack Query và SWR.
Khởi tạo và xử lý form với React-Hook-Form
Với Form, vẫn là React Hook Form kinh điển qua nhiều năm, đơn giản và ít mã. Nếu muốn thử những thứ mới hơn, bạn có thể thử tìm hiểu Formik và Final Form.
Trở thành Full-stack với NextJS
Thật tuyệt vời vì bạn đã đi được đến đây. Nơi đây là nơi bạn đã có sẵn kiến thức để bắt đầu một quá trình thực sự nghiên cứu chuyên sâu và áp dụng vào các dự án thực tế. Hãy thử làm một dự án với NextJS và dần nâng cấp CV của bạn nếu như bạn thực sự đang cần thực tập với ReactJS tại các doanh nghiệp!
Để hiểu hơn, thành thục hơn về React, các bạn sinh viên có thể tham khảo những kiến thức tại FPoly – Hà Nội – Xưởng CNTT ! Chúc các bạn học tốt!
Giảng viên Nguyễn Minh Hoàng
Bộ môn CNTT
FPT Polytechnic Hà Nội
