Material Kit React + Sửa đổi 0 lần nhìn thấy

Sự miêu tả

Bộ vật liệu React là Bộ công cụ miễn phí Material-UI@4.1.0 với thiết kế mới và mới mẻ lấy cảm hứng từ thiết kế material design của Google. Bạn đã yêu cầu nó, vì vậy chúng tôi đã thực hiện nó. Thật vui khi giới thiệu với bạn khái niệm vật liệu trong một tập hợp các thành phần dễ sử dụng và đẹp mắt. Cùng với việc sắp xếp lại các phần tử Material-UI, bạn sẽ tìm thấy ba trang mẫu với mã đầy đủ, để giúp bạn thiết kế dự án tiếp theo của mình.

Vật liệu React Kit sử dụng ánh sáng, bề mặt và chuyển động. Nó sử dụng sự lựa chọn có chủ ý về màu sắc, hình ảnh sắc nét và kiểu chữ quy mô lớn. Bố cục chung giống như một tờ giấy theo nhiều lớp khác nhau, để có độ sâu và đều đặn rõ ràng. Điều hướng chính vẫn ở bên trái và các hành động ở bên phải.

Thiết kế mới có các yếu tố nghiên cứu về mực và giấy cũng như cách các đối tượng và vật liệu tương tác trong cuộc sống thực. Kết quả là một tập hợp các yếu tố đẹp, nhất quán có thể giúp bạn bắt đầu vào dự án tiếp theo của mình. React Material Kit là một công cụ tuyệt vời nếu bạn muốn tạo sự hiện diện trên web cho ứng dụng Android của mình và cần phải nhất quán, để lại cảm giác về các yếu tố trực quan giống nhau. Bản thân nó cũng là một nguồn tài nguyên tuyệt vời, trông đẹp mắt và giúp bạn xây dựng trang web của mình.

React Material Kit sử dụng một khung công tác tuyệt vời mang lại cho chúng tôi những lợi thế như hiệu ứng vật liệu, hoạt ảnh, gợn sóng và chuyển tiếp.

material-kit-react.webp

Nguồn chính thức

Mẫu này trước đây đã được xuất bản trên trang web Creative Tim

Giấy phép

MIT - Bản quyền (c) 2018 Creative Tim

Đặc trưng

React Material Kit được xây dựng trên giao diện người dùng Material bằng cách sử dụng ứng dụng tạo phản ứng. Các tính năng ban đầu trong phiên bản miễn phí của mẫu này trước khi thay đổi như sau :

  • @material-ui/core: 4.10.0
  • @material-ui/icons: 4.9.1
  • classnames: 2.2.6
  • history: 4.10.1
  • moment: 2.26.0
  • node-sass: 4.14.1
  • nouislider: 14.5.0
  • prop-types: 15.7.2
  • react: 16.13.1
  • react-datetime: 2.16.3
  • react-dom: 16.13.1
  • react-router-dom: 5.2.0
  • react-scripts: 3.4.1
  • react-slick: 0.26.1
  • react-swipeable-views: 0.13.9
  • @babel/cli: 7.10.1
  • @babel/plugin-proposal-class-properties: 7.10.1
  • @babel/preset-env: 7.10.1
  • @babel/preset-react: 7.10.1
  • eslint-config-prettier: 6.11.0
  • eslint-plugin-prettier: 3.1.3
  • eslint-plugin-react: 7.20.0
  • gulp: 4.0.2
  • gulp-append-prepend: 1.0.8
  • prettier: 2.0.5
  • typescript: 3.9.3
  • Mendukung komponen :
    • Badges
    • Button
    • Cards
    • RadioSwitch checkbox
    • Clearfix
    • Dropdown
    • Footer
    • Grid
    • Icons
    • InfoAreas
    • Input
    • Linear progress
    • Modal
    • Navigation
    • NavPills
    • Notifications
    • Page numbering
    • Parallax
    • Popovers
    • Tab
    • Tooltips
    • Typography

Công nghệ cơ bản

  • Material-UI cho thành phần ReactJs
  • Eslint
  • Gulp, tại
  • Prettier

Thay đổi

Quá trình sửa đổi mẫu này bao gồm các công nghệ sau trong cấu hình của nó :

  • NPX đã được cài đặt!

  • Minify JS sử dụng Terser v4.8.0

  • Minify CSS sử dụng Less v3.11.3

  • Minify SCSS sử dụng Node Sass v4.14.1 + Dart Sass v1.26.9

  • Komiler sử dụng Autoprefixer 9.8.4

  • Support source MAP JS (tùy chỉnh)

  • Support source MAP CSS (tùy chỉnh)

  • Được cấu hình để sử dụng Babel v7.10.3

  • Transpile with Babel

  • Support SASS

  • Support Autoprefixer

  • Install Dependencies :

    • @material-ui/core v.4.11.0
    • @material-ui/icons v.4.9.1
    • classnames v.2.2.6
    • history v.5.0.0
    • moment v.2.29.0
    • node-sass v.4.14.1
    • nouislider v.14.6.2
    • prop-types v.15.7.2
    • react v.16.13.1
    • react-datetime v.3.0.4
    • react-dom v.16.13.1
    • react-router-dom v.5.2.0
    • react-scripts v.3.4.3
    • react-slick v.0.27.11
    • react-swipeable-views v.0.13.9
    • @babel/cli v.7.11.6
    • @babel/plugin-proposal-class-properties v.7.10.4
    • @babel/preset-env v.7.11.5
    • @babel/preset-react v.7.10.4
    • eslint-config-prettier v.6.12.0
    • eslint-plugin-prettier v.3.1.4
    • eslint-plugin-react v.7.21.3
    • gulp v.4.0.2
    • gulp-append-prepend v.1.0.8
    • prettier v.2.1.2
    • typescript v.4.0.3
  • Tối ưu hóa chủ đề chung

  • Giảm tài sản

Cải tiến mẫu

  • Xóa cảnh báo bảng điều khiển trình duyệt
[HMR] Waiting for update signal from WDS...
0.chunk.js:232724 Download the React DevTools for a better development experience: https://fb.me/react-devtools
0.chunk.js:208008 Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: DateTime, ReactSwipableView
printWarning @ 0.chunk.js:208008
  • Cảnh báo trên là một vấn đề toàn cầu và một BUG trong React. Bạn có thể tìm thấy giải pháp cho vấn đề này tại đây

Hướng dẫn và Chuẩn bị để sử dụng

Tôi giả sử bạn sẽ bắt đầu bằng cách tải xuống mẫu gốc này bằng cách sử dụng nút tải xuống ở cuối bài viết này. Được rồi, vào vấn đề thôi !.

  • Các bước cơ bản nhất, bạn nên làm quen với việc chơi NPM và NODEJS. Nếu bạn là người mới bắt đầu, vui lòng xem lại tài liệu không có trên trang web này NodeJS.org. Chìa khóa chính là đừng lười đọc và hiểu !.
  • Để sử dụng mẫu này, bạn cần thực hiện các bước sau:

    • Tải xuống và cài đặt NodeJs từ ptrang web chính thức của NodeJs
    • Nếu NodeJs và NPM được cài đặt, hãy mở và giải nén tệp zip từ mẫu gốc bạn đã tải xuống trước đó trong một thư mục trên máy tính của bạn
    • Mở Terminal
    • Điều hướng đến thư mục tệp dự án của bạn (để thiết bị đầu cuối có thể đọc thư mục mẫu thu được)
    • Nhập thiết bị đầu cuối:
    npm install
    • Sau đó
    npm start
    • Ngoài ra, sử dụng lệnh này :
    npm run install:clean

    điều này sẽ xóa node_modules và package-lock.json, đồng thời tập lệnh install và tập lệnh start sẽ tự động chạy

    • Hướng đến
      http://localhost:3000

LƯU Ý: Để biết thêm thông tin, bạn có thể tham khảo tài liệu hướng dẫn tham khảo từ CreativeTim tại đây hoặc tài liệu CreativeTim được đề xuất tại đây.

Cài đặt trình hướng dẫn và thêm bất kỳ mẫu nào

  • Giữ các tệp cục bộ trên máy chủ. Nagkataon na gumagamit ako ng XAMPP. Maaari mong gamitin người tiếc cục bộ cho máy chủ thực; WAMP, MAMP, Wordpress, o Node.js, o xin lỗi.
  • Thiết bị đầu cuối làm đầy Magbukas
  • Mag-điều hướng sa thư mục dự án. Halimbawa:

sa halimbawang ito ginagamit khi mặc định là thiết bị đầu cuối Windows 7 ;

C:\Windows\system32>cd C:\xampp\htdocs\material-kit-react-modification
C:\xampp\htdocs\material-kit-react-modification>npm start
  • pagkatapos, patakbuhin / i-type :
npm start

CẢNH BÁO: ang utos na "npm install" ay hindi kinakangan!

  • sa yugtong ito awtomaticong open ng browser ang port http: // localhost: 3000. Kung hindi ito awtomatisong magbubukas, maaari mo itong buksan nang manu-mano sa pamagitan ng pagta-type sa url na patlang ng browser ang address na http: / / localhost: 3000. Kung nakakuha khi chúng tôi đang thưởng thức terminal na tulad nito, nangangahulugan ito na lahat ay gumagana nang perpekto. TAPOS NA!.
C:\xampp\htdocs\material-kit-react-modification>npm start

> material-kit-react@1.9.0 start C:\xampp\htdocs\material-kit-react-modification
> react-scripts start

Compiled successfully!

You can now view material-kit-react in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.100.8:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

CHÚC MAY MẮN. CHÚC MAY MẮN!



Tags: React Bản mẫu trên 06 Tháng mười 2020

Bình luận

Forum Diskusi

Post a reply
2932 views

Trả lời cuộc thảo luận này