Bài báo và Bộ sưu tập Mẫu

Trang danh mục này có các bài báo đại diện và bộ sưu tập các mẫu Nickgenom tốt nhất được lấy từ nhiều nguồn thú vị khác nhau trên internet

material kit react.webp
Sửa đổi, React, Bản mẫu

Material Kit React + Sửa đổi

Azkiya
06 Tháng mười 2020

Material Kit React là một Bộ Material-UI v4.1.0 miễn phí có 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ó. Rất vui được giới thiệu với bạn về 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.

Material Kit React sử dụng ánh sáng, bề mặt và chuyển động. Nó sử dụng các lựa chọn màu sắc có chủ đích, 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, do đó độ sâu và đều đặn được thể hiệ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 này 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. Material Kit React 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 ấn tượng 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 các trang web của mình.

Material Kit React sử dụng một khung công tác tuyệt vời có thể mang lại cho chúng ta 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 đã được xuất bản trước đây trên trang web Creative Tim.

Giấy phép

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

Tính năng

Material Kit React được xây dựng trên giao diện người dùng Material UI 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í này của mẫu trước khi sửa đổ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
  • Supporting components :
    • 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ệ chính

  • Material-UI cho các thành phần React Js
  • Eslint
  • Gulp, và
  • Prettier

Sửa đổ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!
  • Giảm thiểu JS bằng Terser v4.8.0
  • Giảm thiểu CSS bằng cách sử dụng Less v3.11.3
  • Giảm thiểu SCSS bằng Node Sass v4.14.1 + Dart Sass v1.26.9
  • Trình biên dịch sử dụng Autoprefixer 9.8.4
  • Nguồn hỗ trợ MAP JS (tùy chỉnh)
  • Nguồn hỗ trợ MAP CSS (tùy chỉnh)
  • Được định cấu hình bằng Babel v7.10.3
  • Transpile với Babel
  • Hỗ trợ SASS
  • Hỗ trợ Autoprefixer
  • Cài đặt phụ thuộc :
    • @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ủ đề tổng thể
    • Giảm thiểu tài sản

Sửa chữa Mẫu

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ó :

  • Xóa cảnh báo trong 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à là một BUG trong React. Bạn có thể xem giải pháp 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 thẳng vấn đề thôi!.

  1. Bước cơ bản nhất, bạn nên làm quen với việc chơi với NPM và NODEJS. Nếu bạn là người mới bắt đầu, vui lòng nghiên cứu tài liệu thưa thớt này trên trang web [NodeJS.org] (https://nodejs.org/en/knowledge/getting-started/npm/what-is-npm/). Chìa khóa chính là đừng lười đọc và hiểu!
  2. Để sử dụng mẫu này, bạn phải thực hiện các bước sau :

    • Tải xuống và cài đặt NodeJs từ trang 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 mà bạn đã tải xuống trước đó vào một thư mục trên máy Tính của bạn

    • Mở thiết bị đầu cuối

    • Đ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 đã trích xuất)

    • 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ẽ loại bỏ node_modules và package-lock.json, đồng thời sẽ tự động chạy các tập lệnh install và các tập lệnh start

    • 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 đề xuất CreativeTim tại đây.

Hướng dẫn chạy mẫu đã sửa đổi

Chạy máy chủ cục bộ. Tôi tình cờ đang sử dụng XAMPP. Bạn có thể sử dụng các máy chủ cục bộ khác như; WAMP, MAMP, Wordpress hoặc Node.js hoặc thứ gì khác.

  1. Mở thiết bị đầu cuối
  2. Điều hướng đến thư mục dự án. Thí dụ :
    C:\Windows\system32>cd C:\xampp\htdocs\material-kit-react-modification
    C:\xampp\htdocs\material-kit-react-modification>npm start
  1. sau đó, chạy/gõ : npm start
  • LƯU Ý : lệnh npm install là không bắt buộc !. trong giai đoạn này, trình duyệt sẽ tự động mở cổng http://localhost:3000. Nếu nó không tự động mở, bạn có thể mở nó theo cách thủ công bằng cách nhập vào trường url của trình duyệt địa chỉ http://localhost:3000. Nếu bạn nhận được một thông báo trong thiết bị đầu cuối như thế này :
    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.

nó có nghĩa là mọi thứ đang diễn ra hoàn hảo. HOÀN THÀNH ! .

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



Để lại một bình luận

Gửi trả lời
24348 dilihat

1-1 dari 1

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

Bạn không thể chỉnh sửa bài đăng hoặc tạo câu trả lời: Bạn phải đăng nhập trước khi có thể đăng bài.

Từ của trí tuệ

" Thật khó để mọi người tự trách mình. Đau mỏi cổ sau khi ngủ dậy mà người đáng trách chính là chuyện chăn gối. "

Tham khảo Bài báo :

Bộ sưu tập mẫu trang web :

We Build

Thẻ bài đăng: Bootstrap, Sửa đổi, Bản mẫu 04 Tháng tám 2021

Above - Template Pendidikan

Thẻ bài đăng: Bootstrap, Bản mẫu 04 Tháng tám 2021

Coming Sssoon + Mods

Thẻ bài đăng: Bootstrap, Sửa đổi, Bản mẫu 30 Tháng mười 2020

Mobster + Mods

Thẻ bài đăng: Bootstrap, Bản mẫu 29 Tháng mười 2020

Material Kit React + Sửa đổi

Thẻ bài đăng: Sửa đổi, React, Bản mẫu 06 Tháng mười 2020

SB Admin + Sửa đổi

Thẻ bài đăng: Bootstrap, Sửa đổi, Bản mẫu 06 Tháng mười 2020

Space Science + Sửa đổi

Thẻ bài đăng: HTML5, Sửa đổi, Bản mẫu 01 Tháng mười 2020

Moderna + Sửa đổi

Thẻ bài đăng: Bootstrap, Sửa đổi, Bản mẫu 30 Tháng chín 2020
Trong khoảng
Rss
  • Các bài báo miễn phí | Bài báo và Bộ sưu tập Mẫu https://nickgenom.com/vi/dien-dan Artikel dan Koleksi Template https://nickgenom.com/vi/dien-dan-chu-de/artikel-dan-koleksi-template-2 T4, 20 Th10 2021 00:11:34 +0000

    apa sih ini?
    Artikel dan Koleksi Template https://nickgenom.com/vi/dien-dan-chu-de/artikel-dan-koleksi-template T2, 18 Th10 2021 20:10:22 +0000