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 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 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 những chủ đề giúp 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 tính năng này hữu ích?
Có nhiều nội dung giải thích cách tạo ứng dụng sao cho vừa nhanh vừa đáng tin cậy nhưng không có nhiều ứng dụng hướng dẫn cách tạo React nhanh và đáng tin cậy . Những hướng dẫn này đề cập đến toàn bộ quy trình này từ góc độ Phản ứng ứng dụng chỉ có các thư viện, API và tính năng dành riêng cho hệ sinh thái React được đề cập.
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 thức hoạt động của React
Mặc dù chúng tôi sẽ đề cập đến cả hai khái niệm này 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 tạo nhanh Các trang web React có thể truy cập. Vì lý do này, kiến thức cơ bản về React là bắt buộc.
Tạo ứng dụng React
Tạo ứng dụng React (CRA) là cách dễ nhất để bắt đầu tạo ứng dụng React. Chiến dịch này cung cấp chế độ cài đặt mặc định thiết lập bằng một số tính năng cốt lõi được tích hợp, bao gồm cả 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 lệnh mới ứng dụng:
npx create-react-app app-name
Sau khi thực thi lệnh này, 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
URL nhúng sau hiển thị cấu trúc thư mục và trang web thực tế của một ứng dụng CRA tự 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 quy trình xây dựng webpack và sFTP bao gồm cơ sở Thiết lập Jest để kiểm thử. Để làm cho mọi thứ đơn giản hơn cho những tệp này bị ẩn và không thể truy cập được cho đến khi bạn thoát khỏi CRA. Nó luôn là cách tốt nhất để tránh đẩy ra bất cứ khi nào có thể, vì điều này có nghĩa là phải chịu đựng tất cả trong số các tệp cấu hình này làm mã nguồn của riêng bạn, nên việc này có thể trở nên khó khăn để 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 bạn thực sự cần phải sửa đổi để có thể xử lý ứng dụng của mình. Chiến lược phát hành đĩa đơn Tài liệu về CRA sẽ giải thích chi tiết về điều này.
Tiếp theo là gì?
Giờ đây, khi bạn đã biết cách bắt đầu tạo một ứng dụng Create React, hãy tìm hiểu cách để cải thiện hiệu suất và khả năng tiếp cận của ứng dụng theo tất cả cá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 cửa sổ phản ứng
- Chuẩn bị trong ứng dụng Create React bằng Workbox
- Các tuyến kết xuất trước 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