Chat
1
x
Artikulo

Material Kit React + Mod

Ang Material Kit React ay isang Libreng Material-UI v4.1.0 Kit na may bago at sariwang disenyo na inspirasyon ng materyal na disenyo ng Google. Hiniling mo ito, kaya ginawa namin ito. Isang kasiyahang ipakilala sa iyo ang konsepto ng mga materyales sa isang hanay ng mga madaling gamitin at magagandang bahagi. Kasama ng muling pagsasaayos ng mga elemento ng Material-UI, makakahanap ka ng tatlong sample na pahina na may buong code, upang matulungan kang magdisenyo ng iyong susunod na proyekto.

Ang Material Kit React ay gumagamit ng liwanag, mga ibabaw at paggalaw. Gumagamit ito ng mga sinadyang pagpipilian ng kulay, gilid-sa-gilid na koleksyon ng imahe at malakihang palalimbagan. Ang pangkalahatang layout ay kahawig ng isang sheet ng papel na sinusundan ng ilang iba't ibang mga layer, upang ang lalim at pagiging regular ay maliwanag. Ang pangunahing nabigasyon ay nananatili sa kaliwa at ang mga aksyon sa kanan.

Ang bagong disenyong ito ay may mga elemento ng pananaliksik sa tinta at papel at ang paraan ng pakikipag-ugnayan ng mga bagay at materyales sa totoong buhay. Ang resulta ay isang maganda, pare-parehong hanay ng mga elemento na makakatulong sa iyong makapagsimula sa iyong susunod na proyekto. Ang Material Kit React ay isang mahusay na tool kung gusto mong lumikha ng presensya sa web para sa iyong Android app at kailangan ng pare-pareho, visual na katulad na mga elemento upang mag-iwan ng impression. Isa rin itong mahusay na mapagkukunan sa sarili nitong, mukhang maganda at tumutulong sa iyong buuin ang iyong mga web page.

Gumagamit ang Material Kit React ng kamangha-manghang framework na maaaring magbigay sa amin ng mga pakinabang gaya ng mga materyal na epekto, animation, ripples at transition.

material%20kit%20react.webp

Orihinal na Pinagmulan

Ang template na ito ay dati nang nai-publish sa website Creative Tim.

Lisensya

MIT - Copyright (c) 2018 Creative Tim.

Mga Tampok

Ang Material Kit ng React ay binuo sa ibabaw ng Material UI gamit ang create-react-app. Ang mga orihinal na tampok sa libreng bersyon na ito ng template bago mabago ay ang mga sumusunod:

  • @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

Pangunahing Teknolohiya

  • Material-UI para sa mga bahagi ng ReactJs
  • Eslint
  • Gulp, dan
  • Prettier

Baguhin

Kabilang sa proseso ng pagbabago sa template na ito ang mga sumusunod na teknolohiya sa pagsasaayos nito:

  • Naka-install na ang NPX!
  • Paliit ang JS gamit ang Terser v4.8.0
  • Paliit ang CSS gamit ang Less v3.11.3
  • Paliit ang SCSS gamit ang Node Sass v4.14.1 + Dart Sass v1.26.9
  • Gumagamit ang compiler ng Autoprefixer 9.8.4
  • Support source MAP JS (customized)
  • Support source MAP CSS (customized)
  • Na-configure gamit ang Babel v7.10.3
  • Transpile kasama si Babel
  • Suporta sa SASS
  • Suporta sa Autoprefixer
  • I-install ang 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

Pag-aayos ng Template

Kabilang sa proseso ng pagbabago sa template na ito ang mga sumusunod na teknolohiya sa pagsasaayos nito:

  • 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
    
  • Ang babala sa itaas ay isang pandaigdigang isyu at isang BUG sa React. Makikita mo ang pag-troubleshoot na ito dito

Mga Alituntunin at Paghahanda para sa paggamit

Ipagpalagay ko na magsisimula ka sa pag-download ng orihinal na template na ito gamit ang download button sa dulo ng artikulong ito. Sige, dumiretso tayo sa punto!.

  • 1. Ang pinakapangunahing hakbang, dapat kang masanay sa paglalaro ng NPM at NODEJS. Kung ikaw ay isang baguhan, mangyaring pag-aralan ang kalat-kalat na materyal na ito sa website NodeJS.org ito. Ang pangunahing susi ay hindi maging tamad magbasa at umunawa!.
  • 2. Upang magamit ang template na ito kailangan mong gawin ang mga sumusunod na hakbang:
    • I-download at I-install ang mga NodeJ mula sa pahina ng opisyal na website ng NodeJs
    • Kung naka-install na ang NodeJs at NPM, buksan at i-extract ang zip file mula sa orihinal na template na na-download mo kanina sa isang folder sa iyong computer
    • Buksan ang Terminal
    • Mag-navigate sa iyong project file folder (upang mabasa ng terminal ang na-extract na template folder)
    • I-type ang terminal : npm install
    • Pagkatapos : npm start
    • Bilang kahalili, gamitin ang command na ito : npm run install:clean aalisin nito ang node_modules at package-lock.json, at awtomatikong tatakbo ang install script at ang start script Mag-navigate sa : http://localhost:3000
  • MGA TALA: Para sa higit pang impormasyon, makikita mo ang sanggunian sa dokumentasyon ng tutorial mula sa CreativeTim di sini o dokumentasyon ng rekomendasyon ng CreativeTim dito.

Gabay sa pagpapatakbo ng binagong template

Simulan ang lokal na server. Gumagamit ako ng XAMPP. Maaari mong gamitin ang iba pang mga lokal na server tulad ng; WAMP, MAMP, Wordpress o Node.js, o iba pa.

  • 1. Buksan ang terminal
  • 2. Mag-navigate sa folder ng proyekto. Halimbawa:
        C:\Windows\system32>cd C:\xampp\htdocs\material-kit-react-modification
        C:\xampp\htdocs\material-kit-react-modification>npm start
    
  • 3. pagkatapos, tumakbo/mag-type : npm start
MGA TALA :
  • ang command na npm install ay hindi kailangan!.
  • sa yugtong ito ang browser ay awtomatikong magbubukas ng port http://localhost:3000. Kung hindi ito awtomatikong bumukas, maaari mo itong buksan nang manu-mano sa pamamagitan ng pag-type sa field ng url ng browser ng address na http://localhost:3000. Kung nakatanggap ka ng mensahe sa terminal tulad nito:
         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.
    

ibig sabihin, naging perpekto ang lahat. TAPOS NA!.

GOOD LUCK. GOOD LUCK!

Download

Password : nickgenom.com

ang file na ito ay na-upload gamit ang isang panlabas na serbisyo

Umalis komento

Artikel

Magpadala ng tugon
388131 nakita

- of 0

Tumugon sa talakayang ito

Hindi ka maaaring mag-edit ng mga post o gumawa ng mga tugon: You should be logged in before you can post.