STDIO
Tìm kiếm gần đây
    Nội dung
    0
    0
    Chia sẻ
    Nội dung
    0
    0
    Chia sẻ

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

    Tổng hợp các thành phần, thứ tự, các tư liệu cần biết để hỗ trợ cho việc lập trình frontend với React.js và Next.js.
    09/06/2021 5 phút đọc
    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:

    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
    • npmnpmjs.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:

    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.

    js-cookie và next-cookies

    Hỗ trợ tạo, quản lý cookie tại client và server.

    axios

    Hỗ trợ các HTTP request.

    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, ...

    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.

    0 Bình luận
    STDIO Training

    STDIO Training

    Trung tâm đào tạo lập trình cho doanh nghiệp

    Khi bạn nhấn vào sản phẩm do chúng tôi đề xuất và mua hàng, chúng tôi sẽ nhận được hoa hồng. Điều này hỗ trợ chúng tôi có thêm kinh phí tạo nhiều nội dung hữu ích. Tìm hiểu thêm.
    STDIO

    Trang chính

    Công ty TNHH STDIO

    • 30, Trịnh Đình Thảo, Hòa Thạnh, Tân Phú, Hồ Chí Minh
      +84 28.36205514 - +84 942.111912
      developer@stdio.vn
    • 383/1 Quang Trung, Phường 10, Quận Gò Vấp, Hồ Chí Minh
      Số giấy phép ĐKKD: 0311563559 do sở Kế hoạch và Đầu Tư TPHCM cấp ngày 23/02/2012
    ©STDIO, 2013 - 2021