Artikel dan Koleksi Template

Halaman katalog ini menayangkan artikel representatif dan koleksi template terbaik Nickgenom yang diambil dari berbagai sumber menarik di internet

material kit react.webp
Modifikasi, React, Template

Material Kit React + Modifikasi

Azkiya
06 Oktober 2020

Material Kit React adalah Material-UI v4.1.0 Kit Gratis dengan desain baru dan segar yang terinspirasi oleh desain material Google. Anda memintanya, jadi kami membuatnya. Sangat menyenangkan untuk memperkenalkan kepada Anda konsep material dalam satu set komponen yang mudah digunakan dan indah. Bersamaan dengan penataan ulang elemen Material-UI, Anda akan menemukan tiga halaman contoh dengan kode lengkap, untuk membantu Anda merancang proyek Anda berikutnya.

Material Kit React memanfaatkan cahaya, permukaan, dan gerakan. Ini menggunakan pilihan warna yang disengaja, citra tepi-ke-tepi dan tipografi skala besar. Tata letak umum menyerupai lembaran kertas mengikuti beberapa lapisan berbeda, sehingga kedalaman dan keteraturannya jelas. Navigasi utamanya tetap di kiri dan tindakan di kanan.

Desain baru ini memiliki elemen hasil penelitian tentang tinta dan kertas serta cara objek dan bahan berinteraksi dalam kehidupan nyata. Hasilnya adalah serangkaian elemen yang indah dan konsisten yang dapat membantu Anda memulai proyek berikutnya. Material Kit React adalah alat yang hebat jika Anda ingin menciptakan keberadaan web untuk aplikasi Android Anda dan perlu konsisten, meninggalkan kesan elemen yang secara visual serupa. Ini juga merupakan sumber daya yang bagus dengan sendirinya, tampak cantik dan membantu Anda membangun halaman web Anda.

Material Kit React menggunakan kerangka kerja yang luar biasa sehingga mampu memberikan kita keunggulan seperti efek material, animasi, riak, dan transisi.

material-kit-react.webp

Sumber Asli

Template ini telah dipublikasi sebelumnya di situs web Creative Tim.

Lisensi

MIT - Hak Cipta (c) 2018 Creative Tim.

Fitur

Material Kit React dibangun di atas Material UI menggunakan create-react-app. Fitur asli dalam template versi gratis ini sebelum di modifikasi adalah sebagai 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

Tekhnologi Utama

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

Modifikasi

Proses modifikasi pada template ini menyertakan tekhnologi 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
  • Kompiler 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
    • Optimalisasi tema secara keseluruhan
    • Minimalisasi assets

Perbaikan Template

Proses modifikasi pada template ini menyertakan tekhnologi berikut dalam konfigurasinya :

  • Membersihkan peringatan 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
  • Peringatan di atas adalah masalah global dan merupakan BUG pada React. Anda dapat melihat pemecahan masalah ini di sini

Panduan dan Persiapan untuk penggunaan

Saya asumsikan Anda akan memulai dengan mengunduh template asli ini menggunakan tombol unduh di akhir artikel ini. Baiklah, kita langsung ke intinya saja!.

  1. Langkah paling dasar, Anda harus terbiasa bermain dengan NPM dan NODEJS. Jika Anda pemula, silahkan pelajari materi yang tidak banyak ini di situsweb NodeJS.org ini. Kunci utamanya adalah jangan malas untuk membaca dan memahami!.
  2. Untuk menggunakan template ini Anda harus melakukan beberapa langkah berikut :

    • Unduh dan Instal NodeJs dari halaman situsweb resmi NodeJs

    • Jika NodeJs dan NPM sudah terisntal, lalu buka dan ekstrak file zip dari template asli yang sudah Anda unduh tadi ke folder di komputer Anda

    • Buka Terminal

    • Arahkan ke folder proyek file Anda (agar terminal dapat membaca folder template yang telah di ekstrak tadi)

    • Ketik di terminal : npm install

    • Lalu : npm start

    • Alternatif lain, gunakan perintah ini : npm run install:clean

    • ini akan menghapus node_modules dan package-lock.json, dan secara otomatis akan menjalankan skrip install dan skrip start

    • Navigasikan ke : http://localhost:3000

  • CATATAN : Untuk informasi lebih lanjut, Anda dapat melihat referensi dokumentasi tutorial dari CreativeTim di sini atau dokumentasi rekomendasi CreativeTim di sini.

Panduan menjalankan template modifikasi

Jalankan server local. Kebetulan saya menggunakan XAMPP. Anda dapat menggunakan server local lainnya seperti; WAMP, MAMP, Wordpress, atau Node.js, atau yang lainnya.

  1. Buka terminal
  2. Arahkan ke folder proyek. Contoh :
    C:\Windows\system32>cd C:\xampp\htdocs\material-kit-react-modification
    C:\xampp\htdocs\material-kit-react-modification>npm start
  1. lalu, jalankan/ketik : npm start
  • CATATAN : perintah npm install tidak diperlukan!. dalam tahap ini browser secara otomatis akan membuka port http://localhost:3000. Jika tidak terbuka secara otomatis, Anda dapat membukanya secara manual dengan mengetikkan di bidang url browser alamat http://localhost:3000. Jika Anda mendapatkan pesan 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.

artinya semuanya berjalan sempurna. SELESAI ! .

SELAMAT MENCOBA. SEMOGA BERHASIL!



Tinggalkan Komentar

Kirimkan balasan
24305 dilihat

1-1 dari 1

Balas diskusi ini

Anda tidak dapat mengedit posting atau membuat balasan: Anda harus masuk sebelum dapat memposting.

Kata-kata Bijak

“ Suatu saat Anda akan dibuat gila oleh sesuatu dari dalam diri Anda sendiri, itulah cinta. “

Referensi Artikel :

Platform Situsweb CMS Modern

Tag posting: Referensi 05 Agustus 2021

Ragam Jenis Lisensi

Tag posting: Kode, Referensi 29 September 2020

CSS | Istilah populer dalam situsweb

Tag posting: Kode, Referensi 15 September 2020

HTML | Istilah populer dalam situsweb

Tag posting: Kode, Referensi 13 September 2020

Koleksi Animasi Guna Pakai Codepens

Tag posting: Kode, Referensi 07 September 2020

Koleksi Template Situsweb :

We Build

Tag posting: Bootstrap, Modifikasi, Template 04 Agustus 2021

Blueprint - (Template Cetakbiru)

Tag posting: Bootstrap, Template 04 Agustus 2021

Above - Template Pendidikan

Tag posting: Bootstrap, Template 04 Agustus 2021

Portofolio - (Template Cetakbiru)

Tag posting: HTML5, Template 04 Agustus 2021

Coming Sssoon + Modifikasi

Tag posting: Bootstrap, Modifikasi, Template 30 Oktober 2020

Mobster + Modifikasi

Tag posting: Bootstrap, Template 29 Oktober 2020

Material Kit React + Modifikasi

Tag posting: Modifikasi, React, Template 06 Oktober 2020

SB Admin + Modifikasi

Tag posting: Bootstrap, Modifikasi, Template 06 Oktober 2020

Space Science + Modifikasi

Tag posting: HTML5, Modifikasi, Template 01 Oktober 2020

Moderna + Modifikasi

Tag posting: Bootstrap, Modifikasi, Template 30 September 2020
Tentang
Rss
  • Artikel Bebas | Artikel dan Koleksi Template https://nickgenom.com/id/forum Artikel dan Koleksi Template https://nickgenom.com/id/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/id/forum-topik/artikel-dan-koleksi-template Sen, 18 Okt 2021 20:10:22 +0000