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 trở nên 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ẽ giúp bạn bắt đầu sử dụ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 việc này lại hữu ích?
Có rất nhiều nội dung giải thích cách xây dựng các ứ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 các ứ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 điều này từ góc nhìn 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 React hoạt động ngầm
Mặc dù cả hai khái niệm này đều 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 và dễ tiếp cận. 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ễ nhất để bắt đầu xây dựng ứng dụng React. Nó 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 được tích hợp sẵn, bao gồm cả một hệ thống xây dựng chứa trình đóng gói mô-đun (webpack) và trình chuyển đổi cú pháp (Babel).
Trên 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
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 một ứ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 quy trình xây dựng webpack và Babel, bao gồm cả chế độ thiết lập Jest cơ bản để kiểm thử. Để đơn giản hoá mọi thứ cho người dùng, các tệp này sẽ bị ẩn và không thể truy cập cho đến khi bạn thoát khỏi CRA. Tốt nhất là bạn nên tránh việc đẩy ra bất cứ khi nào có thể, vì điều này có nghĩa là bạn phải sử dụng tất cả các tệp cấu hình này làm mã nguồn của riêng mình, điều này có thể gây khó khăn cho việc 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 của mình. 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, bạn đã biết cách bắt đầu xây dựng ứ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 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: