Tổng Hợp Các Thành Phần Hữu Ích Để Tạo Frontend với React.js

Để 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.

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:
  • https://github.com/js-cookie/js-cookie
  • https://github.com/matthewmueller/next-cookies

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