Material Kit React + Pengubahsuaian 0 masa dilihat

Penerangan

Kit Bahan React adalah Material-UI@4.1.0 Kit Percuma dengan reka bentuk baru dan segar yang diilhamkan oleh reka bentuk bahan Google. Anda memintanya, jadi kami berjaya. Sangat menyeronokkan untuk memperkenalkan anda kepada konsep bahan dalam satu set komponen yang senang digunakan dan cantik. Bersama dengan menyusun semula elemen Material-UI, anda akan menemui tiga halaman contoh dengan kod penuh, untuk membantu anda merancang projek seterusnya.

React Kit Material menggunakan cahaya, permukaan dan pergerakan. Ia menggunakan pilihan warna, gambar dari tepi ke tepi dan tipografi berskala besar yang disengajakan. Susun atur umum menyerupai sehelai kertas yang mengikuti beberapa lapisan yang berlainan, sehingga kedalaman dan keteraturannya jelas. Navigasi utama tetap di sebelah kiri dan tindakan di sebelah kanan.

Reka bentuk baru ini mempunyai unsur penyelidikan mengenai dakwat dan kertas dan cara objek dan bahan berinteraksi dalam kehidupan sebenar. Hasilnya adalah sekumpulan elemen yang indah dan konsisten yang dapat membantu anda memulakan projek seterusnya. React Material Kit adalah alat yang hebat jika anda ingin membuat kehadiran web untuk aplikasi Android anda dan perlu konsisten, meninggalkan rasa elemen yang serupa secara visual. Ia juga sumber yang hebat, kelihatan cantik dan membantu anda membina laman web anda.

React Material Kit menggunakan rangka kerja yang sangat baik yang memberi kita kelebihan seperti kesan bahan, animasi, riak, dan peralihan.

material-kit-react.webp

Sumber Asal

Templat ini pernah diterbitkan di laman web sebelumnya Creative Tim

Lesen

MIT - Hak Cipta (c) Creative Tim 2018

Ciri-ciri

Kit Bahan React dibina di atas UI Bahan menggunakan aplikasi create-react. Ciri-ciri asli dalam templat versi percuma ini sebelum pengubahsuaian adalah seperti berikut :

  • @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
  • Komponen sokongan:
    • 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

Teknologi Utama

  • Material-UI untuk komponen ReactJs
  • Eslint
  • Gulp, dan
  • Prettier

Pengubahsuaian

Proses pengubahsuaian templat ini merangkumi teknologi berikut dalam konfigurasinya :

  • NPX sudah terinstall!

  • Minify JS menggunakan Terser v4.8.0

  • Minify CSS menggunakan Less v3.11.3

  • Minify SCSS menggunakan Node Sass v4.14.1 + Dart Sass v1.26.9

  • Komiler menggunakan Autoprefixer 9.8.4

  • Support source MAP JS (disesuaikan)

  • Support source MAP CSS (disesuaikan)

  • Dikonfigurasi menggunakan 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
  • Pengoptimuman tema keseluruhan

  • Pengurangan aset

Penambahbaikan Templat

  • Peringatan yang jelas pada konsol penyemak imbas
[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
  • Amaran di atas adalah masalah global dan merupakan BUG on React. Anda dapat melihat jalan keluar untuk masalah ini di sini

Panduan dan Persediaan untuk digunakan

Saya menganggap anda akan memulakan dengan memuat turun templat asal ini dengan menggunakan butang muat turun di akhir artikel ini. Baiklah, mari kita sampai ke titik !.

  • Langkah paling asas, anda mesti biasa bermain dengan NPM dan NODEJS. Sekiranya anda seorang pemula, sila pelajari bahan yang tidak banyak di laman web ini NodeJS.org. Kunci utama adalah jangan malas membaca dan memahami !.
  • Untuk menggunakan templat ini, anda perlu melakukan langkah-langkah berikut:

    • Muat turun dan Pasang NodeJ dari laman web rasmi NodeJs
    • Sekiranya NodeJ dan NPM telah dipasang, buka dan ekstrak fail zip dari templat asal yang anda muat turun sebelumnya ke folder di komputer anda
    • Buka Terminal
    • Arahkan ke folder fail projek anda (sehingga terminal dapat membaca folder templat yang diekstrak)
    • Taipkan terminal :
    npm install
    • Kemudian
    npm start
    • Sebagai alternatif, gunakan arahan ini :
    npm run install:clean

    ini akan membuang node_modules dan package-lock.json, dan secara automatik akan menjalankan skrip install dan skrip start

    • Navigasi ke
    http://localhost:3000

CATATAN: Untuk maklumat lebih lanjut, anda boleh merujuk rujukan dokumentasi tutorial dari CreativeTim di sini atau dokumentasi yang disyorkan CreativeTim di sini.

Ahli sihir menjalankan templat yang diubah suai

  • Jalankan pelayan tempatan. Saya menggunakan XAMPP. Anda boleh menggunakan pelayan tempatan lain seperti; WAMP, MAMP, Wordpress, atau Node.js, atau sesuatu yang lain.
  • Buka terminal
  • Navigasi ke folder projek. Contoh:

dalam contoh ini saya menggunakan terminal Windows 7 lalai;

C:\Windows\system32>cd C:\xampp\htdocs\material-kit-react-modification
C:\xampp\htdocs\material-kit-react-modification>npm start
  • kemudian, jalankan/taip :
npm start

CATATAN: perintah "npm install" tidak diperlukan!

  • pada peringkat ini penyemak imbas akan membuka port secara automatik http://localhost: 3000. Sekiranya ia tidak dibuka secara automatik, anda boleh membukanya secara manual dengan mengetikkan bidang url penyemak imbas alamat http://localhost: 3000. Sekiranya anda mendapat mesej di terminal seperti ini, ini bermakna semuanya berfungsi dengan sempurna. SELESAI !.
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.

SEMOGA BERJAYA. SEMOGA BERJAYA!



Tags: React Templat pada 06 Oktober 2020

Komen

Forum Diskusi

Post a reply
3329 views

Balas ke diskusi ini