Koleksi Artikel dan Templat

Halaman katalog ini mempunyai artikel perwakilan dan koleksi templat Nickgenom terbaik yang diambil dari pelbagai sumber menarik di internet

material kit react.webp
Pengubahsuaian, React, Templat

Material Kit React + Pengubahsuaian

Azkiya
06 Oktober 2020

Material Kit React adalah Kit Material-UI v4.1.0 Percuma dengan reka bentuk baru dan segar yang diilhamkan oleh reka bentuk bahan Google. Anda memintanya, jadi kami berjaya. Dengan senang hati memperkenalkan anda 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.

Material Kit React menggunakan cahaya, permukaan, dan gerakan. Ia menggunakan pilihan warna yang disengajakan, gambar dari tepi ke tepi dan tipografi berskala besar. Susun atur umum menyerupai selembar 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. Material Kit React adalah alat yang hebat jika anda ingin membuat kehadiran web untuk aplikasi Android anda dan perlu konsisten, meninggalkan kesan elemen serupa secara visual. Ia juga sumber yang hebat, kelihatan cantik dan membantu anda membina laman web anda.

Material Kit React menggunakan rangka kerja yang luar biasa yang dapat 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) 2018 Creative Tim.

Ciri

Material Kit React dibina di atas Material UI menggunakan aplikasi create-react-app. 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
  • 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

Teknologi Utama

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

Pengubahsuaian

Proses pengubahsuaian templat ini merangkumi teknologi berikut dalam konfigurasinya :

  • NPX sudah dipasang!
  • Minimumkan JS menggunakan Terser v4.8.0
  • Minimumkan CSS menggunakan Less v3.11.3
  • Minimumkan SCSS menggunakan Node Sass v4.14.1 + Dart Sass v1.26.9
  • Penyusun menggunakan Autoprefixer 9.8.4
  • Sumber sokongan MAP JS (disesuaikan)
  • Sumber sokongan MAP CSS (disesuaikan)
  • Dikonfigurasi menggunakan Babel v7.10.3
  • Transpile dengan Babylon
  • Sokong SASS
  • Sokong Autoprefixer
  • Pasang Ketergantungan :
    • @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
    • Minimumkan aset

Pembaikan Templat

Proses pengubahsuaian templat ini merangkumi teknologi berikut dalam konfigurasinya :

  • Peringatan dihapus di console browser :
    [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 in React. Anda dapat melihat penyelesaian ini di sini

Panduan dan Persediaan untuk digunakan

Saya menganggap anda akan memulakan dengan memuat turun templat asal ini menggunakan butang muat turun pada akhir artikel ini. Baiklah, mari kita teruskan!.

  1. Langkah paling asas, anda harus terbiasa bermain dengan NPM dan NODEJS. Sekiranya anda seorang pemula, sila pelajari bahan jarang ini di laman web NodeJS.org ini. Kunci utama adalah jangan malas membaca dan memahami!.
  2. Untuk menggunakan templat ini, anda perlu melakukan langkah-langkah berikut :

    • Muat turun dan Pasang NodeJ dari halaman laman web rasmi NodeJs

    • Sekiranya NodeJs dan NPM sudah dipasang, buka dan ekstrak fail zip templat asal yang anda muat turun sebelumnya ke folder di komputer anda.

    • Buka Terminal

    • Arahkan ke folder fail projek anda (supaya 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 cadangan CreativeTim di sini.

Panduan untuk 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.

  1. Buka terminal
  2. Navigasi ke folder projek. Contohnya :
    C:\Windows\system32>cd C:\xampp\htdocs\material-kit-react-modification
    C:\xampp\htdocs\material-kit-react-modification>npm start
  1. 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 :
    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.

itu bermaksud semuanya berjalan dengan sempurna. SELESAI!.

SEMOGA BERJAYA. SEMOGA BERJAYA!



Tinggalkan komen

Hantar balasan
24041 dilihat

1-1 daripada 1

Balas perbincangan ini

Anda tidak dapat mengedit siaran atau membuat balasan: Anda mesti log masuk sebelum anda boleh menghantar.

Kata-kata hikmat

" Sekiranya anda fikir saya malas, maka anda salah! Sebenarnya saya menggunakan mod penjimatan tenaga. "

Rujukan Artikel :

Platform Laman Web CMS Moden

Teg jawatan: Rujukan 05 Ogos 2021

Pelbagai Jenis Lesen

Teg jawatan: Kod, Rujukan 29 September 2020

CSS | Istilah popular di laman web

Teg jawatan: Kod, Rujukan 15 September 2020

Javascript | Istilah popular di laman web

Teg jawatan: Kod, Rujukan 15 September 2020

HTML | Istilah popular di laman web

Teg jawatan: Kod, Rujukan 13 September 2020

Koleksi Animasi Gunakan Codepens

Teg jawatan: Kod, Rujukan 07 September 2020

Koleksi Templat Laman Web :

Mengenai
Rss
  • Artikel Percuma | Koleksi Artikel dan Templat https://nickgenom.com/ms/forum Artikel dan Koleksi Template https://nickgenom.com/ms/forum-topik/artikel-dan-koleksi-template-2 Rab, 20 Okt 2021 00:11:34 +0000

    apa sih ini?
    Artikel dan Koleksi Template https://nickgenom.com/ms/forum-topik/artikel-dan-koleksi-template Isn, 18 Okt 2021 20:10:22 +0000