Bạn muốn làm cho 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 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.
Tại sao điều 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 cho thấy cách xây dựng ứng dụng React nhanh và đáng tin cậy. Những hướng dẫn này đề cập đến tất cả những vấn đề này từ góc độ của ứ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
- Tìm hiểu sâu về 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 thiết, 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 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
Tạo ứng dụng React (CRA) là cách dễ dàng nhất để bắt đầu tạo ứng dụng React. Thư viện này cung cấp chế độ thiết lập mặc định với một số tính năng cốt lõi được tích hợp, bao gồm cả một hệ thống xây dựng chứa bộ gói mô-đun (webpack) và bộ 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 thực thi lệnh 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
Nội dung nhúng sau đây cho thấy cấu trúc thư mục và trang web thực tế của ứng dụng CRA mới được 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 CameraX bao gồm cả chế độ thiết lập Jest cơ sở để kiểm thử. Để làm cho mọi thứ đơn giản hơn cho người dùng, 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 đẩy ra bất cứ khi nào có thể, vì điều này đồng nghĩa với việc phải lấy tất cả các tệp cấu hình này làm mã nguồn của riêng bạn và việc này có thể trở nên 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 bạn. Tài liệu về CRA giải thích chi tiết về vấn đề này.
Tiếp theo là gì?
Giờ đây, khi bạn đã biết cách bắt đầu tạo Ứng dụng tạo React, 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 qua 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á danh sách lớn bằng cửa sổ phản ứng
- Lưu trước vào bộ nhớ đệm trong quá trình Tạo ứng dụng phản ứng bằng Workbox
- Các tuyến đường kết xuất trước có phản ứng nhanh
- Thêm tệp kê khai ứng dụng web bằng tính năng Tạo ứng dụng React
- Kiểm tra khả năng hỗ trợ tiếp cận bằng React-axe và eslint-plugin-jsx-a11y