Bạn muốn trang web React của mình nhanh và dễ truy cập nhất có thể? Bạn đã đến đúng nơi rồi!
React là một thư viện nguồn mở giúp việc xây dựng giao diện người dùng dễ dàng hơn. Lộ trình học tập này sẽ đề cập đến nhiều API và công cụ trong hệ sinh thái mà bạn nên cân nhắc sử dụng để cải thiện hiệu suất và khả năng hữu dụng của ứng dụng.
Hướng dẫn này sẽ chỉ cho bạn cách thiết lập và chạy bằng ứng dụng React. Mọi hướng dẫn khác trong phần này sẽ đề cập đến các chủ đề để tối ưu hoá tốc độ hoặc khả năng hỗ trợ tiếp cận của ứng dụng React.
Vì sao tính năng này hữu ích?
Có rất nhiều nội dung giải thích cách xây dựng ứng dụng nhanh và đáng tin cậy, nhưng không có nhiều nội dung hướng dẫn cách xây dựng ứng dụng React nhanh và đáng tin cậy. Các hướng dẫn này đề cập đến tất cả những điều này từ góc độ của một ứng dụng React, trong đó chỉ đề cập đến các thư viện, API và tính năng dành riêng cho hệ sinh thái React.
Bạn sẽ học được gì?
Các hướng dẫn trong lộ trình học tập này không tập trung vào:
- Cách sử dụng React
- Cách hoạt động của React
Mặc dù cả hai khái niệm này sẽ được đề cập khi cần, nhưng tất cả hướng dẫn và lớp học lập trình trong phần này sẽ tập trung vào cách xây dựng các trang web React nhanh chóng và dễ truy cập. Vì lý do này, bạn cần có kiến thức cơ bản về React.
Tạo ứng dụng React
Create React App (CRA) là cách dễ dàng nhất để bắt đầu xây dựng ứng dụng React. Công cụ này cung cấp một chế độ thiết lập mặc định với một số tính năng cốt lõi, bao gồm cả hệ thống xây dựng chứa trình tạo gói mô-đun (webpack) và trình biên dịch chuyển đổi (Babel).
Trên một shell dòng lệnh, bạn chỉ cần chạy lệnh sau để tạo một ứng dụng mới:
npx create-react-app app-name
Sau khi lệnh thực thi xong, bạn có thể chuyển đến và chạy ứng dụng bằng các lệnh sau:
cd new-app
npm start
Phần nhúng sau đây cho thấy cấu trúc thư mục và trang web thực tế của một ứng dụng CRA mới khởi động.
Có nhiều tệp cấu hình và tập lệnh bản dựng mà CRA sử dụng để thiết lập gói web và quy trình xây dựng Squarespace bao gồm việc thiết lập Jest cơ sở để kiểm thử. Để giúp người dùng dễ dàng hơn, các tệp này sẽ bị ẩn và không thể truy cập được cho đến khi bạn đẩy ra khỏi CRA. Tốt nhất là bạn nên tránh tháo ra bất cứ khi nào có thể, vì việc này có nghĩa là bạn phải xử lý tất cả các tệp cấu hình này dưới dạng mã nguồn của riêng mình, điều này có thể khó quản lý.
Cấu trúc thư mục của ứng dụng CRA mới chỉ chứa các tệp mà bạn thực sự cần sửa đổi để hoạt động trên ứng dụng của mình. Tài liệu về CRA giải thích chi tiết về điều này.
Tiếp theo là gì?
Giờ đây, bạn đã biết cách bắt đầu tạo một ứng dụng Create React App, hãy tìm hiểu cách cải thiện hiệu suất và khả năng hỗ trợ tiếp cận của ứng dụng bằng tất cả hướng dẫn trong lộ trình học tập này:
- Phân tách mã bằng React.lazy và Suspense
- Ảo hoá các danh sách lớn bằng react-window
- Lưu vào bộ nhớ đệm trước trong Create React App bằng Workbox
- Tạo trước các tuyến đường bằng react-snap
- Thêm tệp kê khai ứng dụng web bằng ứng dụng Create React
- Kiểm tra khả năng hỗ trợ tiếp cận bằng react-axe và eslint-plugin-jsx-a11y