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ẽ cho bạn biết cách thiết lập và chạy ứ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 thông tin 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.
CRA sử dụng nhiều tệp cấu hình và tập lệnh bản dựng để thiết lập quy trình tạo webpack và Babel, bao gồm cả chế độ thiết lập cơ sở Jest để 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ì điều 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 một ứng dụng CRA mới chỉ chứa các tệp mà bạn thực sự cần sửa đổi để làm việc trên ứng dụng. 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: