Cách tạo ứng dụng bảng điều khiển với React

Jan 24, 2026
Cách
[số 8]

Trong hướng dẫn này, chúng ta sẽ đi qua Cách tạo một ứng dụng sử dụng Phản ứng - Thư viện JavaScript để xây dựng giao diện người dùng. Điều này Công cụ thiết kế web đặc biệt hữu ích khi nói đến việc tạo thành phần, cung cấp những lợi ích đáng kể so với một cái gì đó như jQuery.

Khả năng tạo các thành phần có chứa, có thể tái sử dụng có nghĩa là bạn có thể giữ mã nhỏ hơn và được sắp xếp hơn. Nếu các thành phần được thiết lập đủ tốt, chúng có thể được thả vào khi cần thiết mà không cần thiết lập bổ sung nào.

Trong hướng dẫn này, chúng tôi sẽ tạo một ứng dụng bảng điều khiển để mắt đến các số liệu hỗ trợ quan trọng. Màn hình được chia thành một lưới, có thể được tùy chỉnh để hiển thị các hình ảnh khác nhau tùy thuộc vào dữ liệu cần thiết để hiển thị.

Bạn muốn tạo một trang web, chứ không phải là một ứng dụng? Bạn cần hướng dẫn viên của chúng tôi để tốt nhất người tạo ra trang web và web hosting dịch vụ.

  • 19 plugin jQuery Brilliant

Bằng cách tạo một thành phần tiện ích chung, chúng ta có thể cắt và thay đổi màn hình mà không ảnh hưởng đến bất kỳ mã bên dưới nào. Gói những thứ này trong một thành phần container cho phép chúng ta kiểm soát nguồn dữ liệu đó tách biệt với màn hình của nó.

Chúng tôi sẽ sử dụng Lưới css. để hiển thị nội dung trong các khối được xác định. Các trình duyệt không hỗ trợ nó sẽ hiển thị trong một cột duy nhất, giống như khi sử dụng màn hình nhỏ hơn.

Tải xuống các tập tin cho hướng dẫn này đây .

01. Tải về các phụ thuộc

Sau khi lấy các tệp dự án (và lưu chúng trong lưu trữ đám mây ), Chúng ta cần phải kéo xuống tất cả các gói yêu cầu mà chúng ta cần cho dự án. Chúng bao gồm các tệp từ 'tạo-phản ứng-ứng dụng', giao dịch với quy trình xây dựng cho chúng tôi.

Chúng tôi cũng cần chạy hai máy chủ - một máy chủ cung cấp tải lại nóng cho trang này và một cái khác cung cấp một số dữ liệu giả để kiểm tra.

Nhập nội dung sau trên dòng lệnh trong khi bên trong thư mục dự án: 

 / * trong một cửa sổ * /
& gt; Sợi cài đặt
& gt; Sợi bắt đầu
/ * trong một cửa sổ khác * /
& gt; Sợi phục vụ

02. Thêm tiện ích đầu tiên

react dashboard app

Bắt đầu với một thành phần đơn giản

Để bắt đầu mọi thứ, chúng ta sẽ hiển thị một thành phần đơn giản trên trang. Với Babel được thiết lập, chúng tôi có thể viết các thành phần bằng các lớp ES2015. Tất cả những gì chúng ta cần làm là nhập chúng khi chúng ta cần và babel với webpack sẽ làm phần còn lại.

Mở ra /src/components/app.js. và thêm mã nhập vào đầu trang. Sau đó, bên trong chức năng kết xuất, đặt thành phần bên trong container & lt; div & gt; . 

 Tiện ích nhập từ
  '../components/widget';
[...]
& lt; div classname = "app" & gt;
  & lt; widget / & gt;
& lt; / div & gt;

03. Kiểu một hộp widget

react dashboard app

Khi nhập css bằng webpack, các kiểu có thể được phạm vi chỉ có thành phần trong câu hỏi để tránh chúng rò rỉ đến các phần khác của trang

Trên dự án này, WebPack được thiết lập để nhận nhập liệu CSS. Điều này có nghĩa là chúng tôi có thể nhập các tệp CSS như chúng tôi đã làm với JavaScript trong bước trước, cho phép chúng tôi tạo các tệp riêng biệt cho từng thành phần. Thêm phần nhập sau vào đầu widget.js. Điều này sẽ liên kết với tên lớp 'widget' và sẽ phạm vi các kiểu cho thành phần đó. 

 Nhập '../styles/widget.css' ;

04. Thêm tiêu đề và nội dung

Mỗi widget sẽ cần một mô tả ngắn về dữ liệu mà nó đang hiển thị. Để giữ mọi thứ tùy biến, chúng tôi sẽ vượt qua điều này dưới dạng tài sản - hoặc 'prop' - đến thành phần khi chúng tôi sử dụng nó.

Đối với nội dung, React cung cấp một 'trẻ em' đặc biệt, sẽ chứa nội dung được nhập giữa các thẻ mở và đóng của thành phần.

Thay thế giữ chỗ & lt; P & GT; trong chức năng kết xuất với những điều sau đây. Các thành phần tải sẽ xuất hiện sau đó trên. 

 & lt; div classname = "tiêu đề" & gt;
  & lt; h2 & gt; {this.props.heading} & lt; / h2 & gt;
  {this.props.loading? & lt; đang tải / & gt ;: ""}
& lt; / div & gt;
& lt; div classname = "nội dung" & gt;
  {this.props.Children}
& lt; / div & gt;

05. Hãy để widget trải rộng lưới

react dashboard app

Với thông số kỹ thuật lưới CSS, các phần tử bố trí như máng xối sẽ được áp dụng, bất kể kiểu dáng nào được áp dụng cho các yếu tố con

Ngoài các bảng định kiểu chúng tôi nhập, chúng tôi cũng có thể tạo các kiểu phản ứng linh hoạt dựa trên các đạo cụ được truyền qua.

Để tạo các cột và hàng với lưới CSS, hãy sử dụng các thuộc tính Cột lưới và Lưới. Chúng ta có thể đi qua 'colspan' và 'rowspan' props để thay đổi phần này trên mỗi thành phần theo cách tương tự như cách các tế bào trên bảng hoạt động trong HTML.

Áp dụng các kiểu trong hàm tạo widget và liên kết chúng với container & lt; div & gt; . 

 Nếu (đạo cụ.colspan! == 1) {
  Điều này.Spanstyles.gridcolumn.
  = `span $ {props.colspan}`;
Không thể
nếu (đạo cụ.wrowspan! == 1) {
  cái này.spanstyles.gridrow.
  = `span $ {props.wrowspan}`;
Không thể
[...]
& lt; div style = {cái này.spanstyles}
  ClassName = "Widget" & GT;

06. Cung cấp đạo cụ mặc định

Ngay bây giờ widget của chúng tôi trống như chúng tôi chưa cung cấp bất kỳ đạo cụ nào. Trong những trường hợp này, chúng tôi có thể cung cấp các đạo cụ mặc định để sử dụng thay thế.

Trừ khi được thông báo khác, các lưới CSS sẽ mặc định chiếm đơn vị nhỏ nhất mà nó có thể, trong trường hợp này là hình vuông 1x1. Ngay trước khi chúng ta xuất tiện ích, cung cấp một số đạo cụ mặc định về hiệu ứng đó. 

 widget.defaultprops = {
  Heading: "Widget không tên",
  colspan: 1,
  Rowspan: 1.
}

07. Thực thi đạo cụ cụ thể

react dashboard app

Thành phần NumberDisplay là một thành phần 'trình bày', vì nó không có trạng thái nội bộ và phụ thuộc hoàn toàn trên các đạo cụ được truyền cho nó

Các thành phần có thể cung cấp các gợi ý về loại giá trị nên được gửi dưới dạng đạo cụ. Trong khi phát triển một ứng dụng, bất kỳ đạo cụ nào được thông qua không chính xác sẽ hiển thị trong bảng điều khiển như cảnh báo để giúp tránh các lỗi xa hơn dòng.

Chỉ cần bên dưới các đạo cụ mặc định, xác định các đạo cụ nào nên hoặc cần được chuyển vào và loại nào chúng nên được. 

 widget.proptypes = {
  Heading: React.proptypes.String,
  colspan: phản ứng.proptypes.Number,
  Rowspan: React.proptypes.Number,
  bọn trẻ:
    Phản ứng.proptypes.element.isrequired.
}

08. Thêm đạo cụ vào ứng dụng

Bằng cách xác định 'trẻ em' prop theo yêu cầu, bạn có thể nhận thấy trình duyệt phàn nàn hiện đang không xác định. Mặc dù điều này sẽ không phá vỡ ứng dụng, nó sẽ tiếp tục làm phiền chúng ta cho đến khi nó được sắp xếp.

Trở lại App.js và thêm một đề xuất tiêu đề cho Widget chúng tôi đã tạo trước đó. Thay vì làm cho thẻ tự đóng, hãy mở nó lên và thêm một số nội dung giữ chỗ để hiển thị nó hoạt động. 

 & lt; Widget Heading = "Tỷ lệ vé mở Tổng" & GT;
  & lt; p & gt; đây là một số nội dung & lt; / p & gt;
& lt; / widget & gt;

09. Hiển thị một số dữ liệu

react dashboard app

Chúng ta có thể sử dụng cú pháp @supports trong CSS để phát hiện xem trình duyệt có hỗ trợ bố cục lưới hay không. Nếu không, chúng ta mặc định với chế độ xem cột đơn

Thành phần NumberDisplay hoạt động giống như tiện ích mà chúng tôi vừa tạo - nó sẽ hiển thị một số văn bản hoàn toàn dựa trên các đạo cụ chúng tôi truyền vào nó. Chúng ta có thể thả nó vào nơi chúng ta cần và có một màn hình nhất quán của dữ liệu số.

Nhập thành phần NumberDisplay ở trên cùng và sử dụng nó để thay thế nội dung giữ chỗ mà bạn vừa thêm trong Widget. 

 Nhập sốDisplay từ '../components/numberdisplay';
[...]
& lt; singerdisplay max = {9} giá trị = {5} / & gt;

10. Chuyển đổi sang sốWidget

Hiện tại, có khá nhiều mã được sử dụng để hiển thị một cái gì đó sẽ không thay đổi trên các widget. Chúng ta có thể tạo một thành phần đặc biệt để gói gọn tất cả của nó. Bằng cách đó, chúng tôi chỉ cần nhập số NumberWidget.

Thay thế các phần nhập Widget và NumberDisplay ở đầu App.js với SốWidget. Đảm bảo cũng thay thế chúng trong phương thức kết xuất. 

 Nhập sốWidget từ
  '../components/numberwidget';
[...]
& lt; NumberWidget
  Tiêu đề = "Tổng vé mở"
MAX = {9} GIÁ TRỊ = {5} / & gt;

Trang tiếp theo: Hoàn thành ứng dụng bảng điều khiển của bạn trong React

  • 1.
  • 2.

Trang hiện tại: Tạo một ứng dụng bảng điều khiển trong React - các bước 1-10

Cách - Các bài báo phổ biến nhất

Cách sử dụng hình ảnh tham khảo: 13 mẹo thiết yếu cho các nghệ sĩ

Cách Jan 24, 2026

[số 8] (Tín dụng hình ảnh: Jonathan Hardesty) Trang 1/2: trang 1 ..

Cách chụp ảnh màn hình trên máy Mac

Cách Jan 24, 2026

[số 8] (Tín dụng hình ảnh: Sáng tạo Bloq) Nếu bạn muốn chụp toàn bộ màn hình, một cửa sổ..

Cách kitbash khi đang di chuyển với Shapr3D

Cách Jan 24, 2026

[số 8] (Tín dụng hình ảnh: Adam DeWishrst) Shapr3d là một công cụ tuyệt vời cho kitbashing. Nó có ..

7 mẹo hàng đầu để bắt đầu kinh doanh của riêng bạn

Cách Jan 24, 2026

[số 8] Nếu bạn đã cảm thấy bị mắc kẹt trong một đường ray sáng tạo, có thể đáng để có một kh..

Làm thế nào để kết xuất các bề mặt trong suốt thực tế

Cách Jan 24, 2026

[số 8] Tạo một vật liệu trong suốt như kính có vẻ dễ dàng - chỉ cần tăng thanh trượt trong suốt lên..

Tạo bảng màu vô tận với Khoma

Cách Jan 24, 2026

[số 8] Sử dụng tuyệt vời của lý thuyết màu sắc Trong thiết kế là một trong những điều..

Tăng tốc độ công việc kết cấu của bạn

Cách Jan 24, 2026

[số 8] Chiến binh là một dự án cá nhân mà tôi có niềm vui về khái niệm và thiết kế. Tôi muốn tạo r..

10 Hướng dẫn hàng đầu Houdini

Cách Jan 24, 2026

Houdini là một con thú mạnh mẽ, với các công cụ để xây dựng VFX được sử dụng trong nhiều bộ phim Hollywood. Nhưng đường cong học tập ban đầu là d�..

Thể loại