NộI Dung
- 01. Tải xuống các phụ thuộc
- 02. Thêm tiện ích đầu tiên
- 03. Tạo kiểu hộp phụ tùng
- 04. Thêm tiêu đề và nội dung
- 05. Để tiện ích mở rộng lưới
- 06. Cung cấp đạo cụ mặc định
- 07. Thực thi các đạo cụ cụ thể
- 08. Thêm đạo cụ vào ứng dụng
- 09. Hiển thị một số dữ liệu
- 10. Chuyển đổi sang NumberWidget
Trong hướng dẫn này, chúng ta sẽ hướng dẫn cách tạo ứng dụng bằng React - một thư viện JavaScript để xây dựng giao diện người dùng. Công cụ thiết kế web này đặc biệt hữu ích khi nói đến việc tạo thành phần, mang lại những lợi ích đáng kể so với một thứ như jQuery.
Khả năng tạo các thành phần khép kín, có thể tái sử dụng có nghĩa là bạn có thể giữ cho mã nhỏ hơn và có tổ chức hơn. Nếu các thành phần được thiết lập đủ tốt, chúng có thể được thả ở nơi cần thiết mà không cần thiết lập thêm.
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 theo dõi các chỉ số hỗ trợ quan trọng. Màn hình được chia thành 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 mà màn hình cần hiển thị.
Bạn muốn tạo một trang web, thay vì một ứng dụng? Bạn cần các hướng dẫn của chúng tôi về trình tạo trang web và dịch vụ lưu trữ web tốt nhất.
- 19 plugin jQuery tuyệt vời
Bằng cách tạo một thành phần widget 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ã cơ bản nào. Việc bao bọc chúng trong một thành phần vùng chứa cho phép chúng tôi kiểm soát nguồn của dữ liệu đó tách biệt với màn hình của nó.
Chúng tôi sẽ sử dụng CSS Grid để hiển thị nội dung trong các khối xác định. Các trình duyệt không hỗ trợ nó sẽ hiển thị trong một cột, giống như khi sử dụng một màn hình nhỏ hơn.
Tải xuống các tệp cho hướng dẫn này đây.
01. Tải xuống các phụ thuộc
Sau khi nhận được các tệp dự án (và lưu chúng trong bộ nhớ đám mây), chúng tôi cần phải kéo xuống tất cả các gói bắt buộc mà chúng tôi cần cho dự án. Chúng bao gồm các tệp từ 'create-react-app', nơi xử lý quá 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 và một máy chủ khác cung cấp một số dữ liệu giả để kiểm tra.
Nhập nội dung sau vào dòng lệnh trong khi bên trong thư mục dự án:
/ * trong một cửa sổ * /> cài đặt sợi> bắt đầu sợi / * trong một cửa sổ khác * /> phục vụ sợi
02. Thêm tiện ích đầu tiên
Để bắt đầu mọi thứ, chúng tôi sẽ hiển thị một thành phần đơn giản trên trang. Với việc thiết lập Babel, chúng ta 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 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 nhập vào đầu trang. Sau đó, bên trong hàm kết xuất, hãy đặt thành phần bên trong vùng chứa div>.
nhập Tiện ích con từ '../components/Widget'; […] Div className = "App"> Tiện ích /> / div>
03. Tạo kiểu hộp phụ tùng
Trong dự án này, Webpack được thiết lập để nhận các lần nhập CSS. Điều này có nghĩa là chúng ta có thể nhập các tệp CSS giống như chúng ta đã làm với JavaScript ở bước trước, điều này cho phép chúng ta tạo các tệp riêng biệt cho từng thành phần. Thêm nhập sau vào đầu Widget.js. Điều này sẽ liên kết với className 'Widget' và sẽ phân chia các kiểu cho thành phần đó.
04. Thêm tiêu đề và nội dung
Mỗi tiện ích con sẽ cần một mô tả ngắn gọn về dữ liệu mà nó đang hiển thị. Để giữ cho mọi thứ có thể tùy chỉnh, chúng tôi sẽ chuyển nó dưới dạng một thuộc tính - hoặc 'prop' - cho 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 phần mềm hỗ trợ 'con' đặc biệt, sẽ chứa nội dung được nhập giữa thẻ mở và thẻ đóng của một thành phần.
Thay thế trình giữ chỗ p> trong chức năng kết xuất với những điều sau đây. Thành phần Đang tải sẽ phát huy tác dụng sau này.
div className = "header"> h2> {this.props.heading} / h2> {this.props.loading? Đang tải />: ""} / div> div className = "content"> {this.props.children} / div>
05. Để tiện ích mở rộng lưới
Ngoài các bảng định kiểu mà chúng tôi nhập, chúng tôi cũng có thể tạo các kiểu React động dựa trên các đạo cụ được chuyển qua.
Để mở rộng cột và hàng bằng CSS Grid, hãy sử dụng thuộc tính lưới-cột và hàng lưới. Chúng tôi có thể chuyển qua các đạo cụ 'colspan' và 'rowspan' để thay đổi điều này cho mỗi thành phần theo cách tương tự như cách các ô bảng hoạt động trong HTML.
Áp dụng các kiểu trong phương thức khởi tạo Widget và liên kết chúng với vùng chứa div>.
if (props.colspan! == 1) {this.spanStyles.gridColumn = `span $ {props.colspan}`; } if (props.rowspan! == 1) {this.spanStyles.gridRow = `span $ {props.rowspan}`; } […] Div style = {this.spanStyles} className = "Tiện ích">
06. Cung cấp đạo cụ mặc định
Hiện tại Widget của chúng tôi đang trống vì 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 quy định khác, CSS Grids sẽ mặc định chiếm đơn vị nhỏ nhất có thể, trong trường hợp này là hình vuông 1x1. Ngay trước khi chúng tôi xuất Tiện ích, hãy cung cấp một số đạo cụ mặc định cho hiệu ứng đó.
Widget.defaultProps = {tiêu đề: "Tiện ích con không tên", colspan: 1, rowspan: 1}
07. Thực thi các đạo cụ cụ thể
Các thành phần có thể cung cấp gợi ý về loại giá trị nào nên được gửi dưới dạng đạo cụ. Trong khi phát triển ứ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 dưới dạng cảnh báo để giúp tránh các lỗi tiếp tục xảy ra.
Ngay bên dưới các đạo cụ mặc định, hãy xác định những đạo cụ nào nên hoặc cần được chuyển vào và loại chúng nên là.
Widget.propTypes = {tiêu đề: React.PropTypes.string, colspan: React.PropTypes.number, rowspan: React.PropTypes.number, con: React.PropTypes.element.isRequired}
08. Thêm đạo cụ vào ứng dụng
Bằng cách xác định chỗ dựa 'trẻ em' theo yêu cầu, bạn có thể nhận thấy trình duyệt phàn nàn rằng nó hiện chưa được xác định. Mặc dù điều này sẽ không làm hỏng ứng dụng, nhưng nó sẽ tiếp tục làm phiền chúng tôi cho đến khi nó được sắp xếp.
Quay lại App.js và thêm phần hỗ trợ tiêu đề vào tiện ích mà chúng tôi đã tạo trước đó. Thay vì làm cho thẻ tự đóng, hãy mở thẻ và thêm một số nội dung trình giữ chỗ để cho thấy thẻ đang hoạt động.
Tiêu đề tiện ích = "Tổng số vé mở"> p> Đây là một số nội dung / p> / Tiện ích>
09. Hiển thị một số dữ liệu
Thành phần NumberDisplay hoạt động giống như widget mà chúng tôi vừa tạo - nó hiển thị một số văn bản hoàn toàn dựa trên các đạo cụ mà chúng tôi chuyển vào đó. Chúng tôi có thể thả nó vào nơi chúng tôi cần và có một màn hình hiển thị dữ liệu số nhất quán.
Nhập thành phần NumberDisplay ở trên cùng và sử dụng nó để thay thế nội dung trình giữ chỗ mà bạn vừa thêm vào trong Widget.
nhập NumberDisplay từ '../components/NumberDisplay'; […] NumberDisplay max = {9} value = {5} />
10. Chuyển đổi sang NumberWidget
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 để đóng gói tất cả chúng. Bằng cách đó, chúng ta chỉ cần nhập NumberWidget.
Thay thế các mục nhập Widget và NumberDisplay ở đầu App.js bằng NumberWidget. Đảm bảo cũng thay thế chúng trong phương thức kết xuất.
nhập NumberWidget từ '../components/NumberWidget'; […] NumberWidget header = "Tổng số vé mở" max = {9} value = {5} />
Trang tiếp theo: Hoàn thành ứng dụng bảng điều khiển của bạn trong React
