Để làm việc với React.js, tối thiểu bạn cần biết về JavaScript, xa hơn là TypeScript để ràng buộc dữ liệu, có thể xem tại:
- Tiếp cận nhanh cho người mới: https://www.typescriptlang.org/docs/handbook/typescript-from-scratch.html
- Tổng hợp đầy đủ: https://www.typescriptlang.org/docs
Bắt đầu 1 frontend với React.js
Node.js
Thành phần nền để tạo 1 ứng dụng React.js, hỗ trợ bạn quản lý dự án, các thư viện (package cần thiết). Với Node.js, mục tiêu không chỉ là React.js mà bạn có thể tạo ra các công cụ hữu ích, tool hỗ trợ với cơ chế tương tự như Python.
- Tải Node.js tại: https://nodejs.org
- Hiện tại có 2 phiên bản là LTS và Current, để ổn định các bạn nên chọn phiên bản LTS.
- Tài liệu hữu ích cho Node.js: https://nodejs.dev/learn/introduction-to-nodejs
npm
và npmjs.com: https://www.npmjs.com- 1 hệ thống chia sẻ các package 1 cách chính thức, các package (thư viện hỗ trợ thêm) thông thường sẽ được tham khảo và tải từ đây, để lựa chọn được 1 package tốt và phù hợp, các bạn có thể tham khảo thêm những thông tin hữu ích của package như:
- Weekly Downloads: số lượt tải trên tuần, nếu số này lớn bạn có thể thấy nó rất phổ biến.
- Last publish: lần cập nhật cuối, thông tin này cho thấy package có quá cũ không.
- Các thông tin khác như tài liệu và trang chính thức của package này.
- 1 hệ thống chia sẻ các package 1 cách chính thức, các package (thư viện hỗ trợ thêm) thông thường sẽ được tham khảo và tải từ đây, để lựa chọn được 1 package tốt và phù hợp, các bạn có thể tham khảo thêm những thông tin hữu ích của package như:
React.js
Để tạo 1 project React.js, có thể tham khảo từ trang gốc: https://reactjs.org
npx create-react-app <project-name>
là công cụ để tạo project.- Khi mới tiếp cận React.js bạn có thể phân vân giữa 2 khái niệm React Hook và Class Component, bạn có thể tập trung trước 1 loại, sau đó mở rộng ra cả 2 để sử dụng linh động hơn.
- Tài liệu chính thức từ React.js: https://reactjs.org/docs/getting-started.html
Next.js
React.js hỗ trợ tốt cho SPA - Single Page Application, nếu là 1 ứng dụng đòi hỏi tính phản hồi tốt và không phải là 1 website lớn thì React.js rất phù hợp.
Để có các công cụ tối thiểu để làm 1 website cần tích hợp thêm nhiều package và không ổn định như quản lý đường dẫn (routing) hoặc SSR (server side rendering), Next.js ra đời để tạo 1 chuẩn chung để làm 1 website frontend với các công cụ ổn định được Next.js phát triển, tốc độ phát triển 1 frontend với Next.js sẽ tăng lên rất nhiều và phù hợp với 1 website lớn.
npx create-next-app
: là công cụ tạo project với JavaScript.- ...hoặc
npx create-next-app --typescript
: là công cụ tạo project với TypesScript và bạn nên lựa chọn này, vì với những website lớn nhiều tính năng thì việc ràng buộc dữ liệu rõ ràng giúp mọi thứ ổn định hơn. - Tài liệu chính thức từ Next.js: https://nextjs.org/docs/getting-started
Nếu lựa chọn xây dựng 1 ứng dụng cụ thể ngắn hạn như máy tính, mini-game, bạn có thể chọn React.js, nếu cần 1 website với nhiều trang mang tính quản lý, dữ liệu, bạn nên lựa chọn Next.js.
Phát triển UI
CSS Preprocessor
Để xử lý CSS nhẹ nhàng hơn như cần các constant, các phép tính toán tự động hoặc các khả năng lồng vào nhau của CSS, thông thường bạn sẽ sử dụng SASS/SCSS hoặc LESS.
Do Next.js hỗ trợ sẵn cho SASS/SCSS nên bạn có thể lựa chọn hướng này.
Cài đặt thêm sass và cấu hình: https://nextjs.org/docs/basic-features/built-in-css-support - như vậy bạn có thể sử dụng sass hoặc scss trong dự án, bước còn lại là chuyển đổi các file *.css sang *.scss.
Để tìm hiểu cách sử dụng cú pháp SCSS có thể đọc tài liệu gốc tại: https://sass-lang.com/guide
UI framework
Để phát triển UI, CSS là lựa chọn tốt, nhưng với điều kiện tiên quyết là nhanh, chuẩn bạn cần sử dụng kèm 1 framework hỗ trợ các thành phần có sẵn:
- Ant Design: https://ant.design sử dụng less.
- React Suite: https://rsuitejs.com sử dụng scss, do Next.js hỗ trợ sẵn scss nên bạn có thể tìm hiểu thêm về UI framework này.
- Material UI: https://mui.com.
Nên chọn 1 trong số những framework, mỗi framework sẽ có điểm mạnh và điểm yếu khác nhau, lưu ý rằng khi đã tích hợp các framework vào thì 1 số style mặc định sẽ bị override.
Các icon hữu ích
1 tổ hợp các icon có sẵn cũng giúp bạn không tốn kém thời gian để vẽ và quản lý các hình ảnh này trong project, có rất nhiều bộ icon hỗ trợ, bạn có thể sử dụng 1 bộ icon tổng hợp sau, được góp nhặt từ rất nhiều bộ icon miễn phí: https://react-icons.github.io/react-icons
Các thư viện - package tiện dụng cần cài
lodash
lodash
hỗ trợ rất tốt cho việc xử lý các danh sách dữ liệu như tìm kiếm trong danh sách, sắp xếp, lọc, ... do đó, lodash
nên được cài đặt sẵn.
- Cài đặt:
npm install lodash
- Tài liệu: https://lodash.com/docs
js-cookie và next-cookies
Hỗ trợ tạo, quản lý cookie tại client và server.
- Cài đặt:
npm install js-cookie next-cookies
- Tài liệu:
axios
Hỗ trợ các HTTP request.
- Cài đặt:
npm install axios
- Tài liệu: https://github.com/axios/axios
moment hay moment-timezone
Hỗ trợ các tính toán về thời gian hữu ích, ngày kế tiếp, tháng trước, ...
- Cài đặt
npm install moment-timezone
- Tài liệu: https://momentjs.com/timezone/docs
react-device-detect
Hỗ trợ kiểm tra thiết bị đang sử dụng của người dùng là loại nào.
- Cài đặt:
npm install react-device-detect
- Tài liệu: https://www.npmjs.com/package/react-device-detect
WYSIWYG
WYSIWYG (What You See Is What You Get) là editor hỗ trợ nhập liệu văn bản, hiện tại có thể sử dụng TinyMCE có đầy đủ tính năng cơ bản và chỉ tính phí cho các tính năng nâng cao. Tìm hiểu và sử dụng tại trang chủ: https://www.tiny.cloud.