Bắt đầu: tối ưu hoá ứng dụng React

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!

Houssein Djirdeh

React là một thư viện nguồn mở giúp bạn dễ dàng xây dựng giao diện người dùng. 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ủ đề 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 xây dựng ứng dụng nhanh và đáng tin cậy, nhưng không 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. Những hướng dẫn này đề cập đến toàn bộ điều này từ góc độ 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 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 xây dựng các trang web React nhanh và dễ truy cập. Vì lý do này, bạn cần phải 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ễ nhất để bắt đầu tạo các ứng dụng React. Thư viện 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 được tích hợp, trong đó có một hệ thống xây dựng chứa bộ gói mô-đun (webpack) và trình chuyển mã (Babel).

Trên một shell dòng lệnh, bạn chỉ cần chạy lệnh sau để tạo ứng dụng mới:

npx create-react-app app-name

Sau khi thực thi xong lệnh, 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 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ử. Để người dùng đơn giản hơn, các tệp này sẽ bị ẩn và không thể truy cập được cho đến khi bạn thoát 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ì việc này có nghĩa là bạn nên 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 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 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, khi bạn đã biết cách bắt đầu xây dựng 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 hỗ trợ tiếp cận của ứng dụng theo tất cả hướng dẫn trong lộ trình học tập này: