Material Kit React + Pagbabago 0 mga oras na nakita

Paglalarawan

Ang React Material Kit ay Materyal-UI@4.1.0 Libreng Kit na may bago at sariwang disenyo na inspirasyon ng materyal na disenyo ng Google. Hiningi mo ito, kaya't nagawa namin ito. Napakasarap na ipakilala sa iyo ang konsepto ng mga materyales sa isang hanay ng madaling gamiting at magagandang sangkap. Kasabay ng muling pag-aayos ng mga elemento ng Materyal-UI, mahahanap mo ang tatlong mga halimbawang pahina na may buong code, upang matulungan kang magdisenyo ng iyong susunod na proyekto.

Ang Materyal ng React Kit ay gumagamit ng ilaw, ibabaw at paggalaw. Gumagamit ito ng isang sadyang pagpili ng kulay, edge-to-edge na koleksyon ng imahe at malakihang typography. Ang pangkalahatang layout ay kahawig ng isang sheet ng papel na sumusunod sa maraming magkakaibang mga layer, upang ang lalim at regularidad ay malinaw. Ang pangunahing nabigasyon ay nananatili sa kaliwa at ang mga aksyon sa kanan.

Ang bagong disenyo ay may mga elemento ng pagsasaliksik sa tinta at papel at kung paano nakikipag-ugnay ang mga bagay at materyales sa totoong buhay. Ang resulta ay isang maganda, pare-pareho na hanay ng mga elemento na makakatulong sa iyong makapagsimula sa iyong susunod na proyekto. Ang React Material Kit ay isang mahusay na tool kung nais mong lumikha ng isang pagkakaroon ng web para sa iyong Android application at kailangang maging pare-pareho, nag-iiwan ng isang pakiramdam ng magkatulad na mga elemento ng biswal. Ito rin ay isang mahusay na mapagkukunan sa sarili nitong, mukhang maganda at tumutulong sa iyo na bumuo ng iyong web page.

Gumagamit ang React Material Kit ng isang mahusay na balangkas na nagbibigay sa amin ng mga kalamangan tulad ng mga material effects, animasyon, ripples, at transisyon.

material-kit-react.webp

Orihinal na Pinagmulan

Ang template na ito ay dating nai-publish sa website ng Creative Team

Lisensya

MIT - Copyright (c) 2018 Creative Team

Mga Tampok

Ang React Material Kit ay itinayo sa tuktok ng Material UI gamit ang create-react-app. Ang mga orihinal na tampok sa libreng bersyon ng template na ito bago ang pagbabago 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
  • Mga sumusuporta sa mga sangkap :
    • 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 sangkap ReactJs
  • Eslint
  • Gulp, at
  • Prettier

Pagbabago

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

  • Naka-install ang NPX!

  • Minify JS gamitin Terser v4.8.0

  • Minify CSS gamitin Less v3.11.3

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

  • Komiler gamitin Autoprefixer 9.8.4

  • Support source MAP JS (pinasadya)

  • Support source MAP CSS (pinasadya)

  • Dikonfigurasi gamitin 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
  • Pangkalahatang pag-optimize ng tema

  • Pagliit ng mga Asset

Mga Pagpapabuti ng Template

  • I-clear ang mga babala sa browser console
[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 babalang nasa itaas ay isang pandaigdigang problema at isang BUG sa React. Maaari mong makita ang solusyon na ito dito

Patnubay at Paghahanda para magamit

Ipinapalagay kong magsisimula ka sa pamamagitan ng pag-download ng orihinal na template na ito gamit ang pindutan ng pag-download sa dulo ng artikulong ito. Sige, umabot na tayo sa point!.

  • Ang pinaka-pangunahing mga hakbang, dapat pamilyar ka sa paglalaro ng NPM at NODEJS. Kung ikaw ay isang nagsisimula, huwag mag-atubiling pag-aralan ang kakaunting materyal na ito sa website NodeJS.org ito Ang pangunahing susi ay hindi maging tamad na basahin at maunawaan!.
  • Upang magamit ang template na ito kailangan mong gawin ang mga sumusunod na hakbang :

    • I-download at I-install ang NodeJs mula sa pahina ng opisyal na website ng NodeJs
    • Kung ang NodeJs at NPM ay na-install na, pagkatapos buksan at kunin 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 folder ng file ng proyekto (upang mabasa ng terminal ang nakuha na folder ng template)
      • Mag-type sa terminal :
    npm install
    • Tapos
    npm start
    • Bilang kahalili, gamitin ang utos 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

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

Nagpapatakbo ang wizard ng isang binagong template

  • Patakbuhin ang isang lokal na server. Nagkataon na 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.
  • Magbukas ng isang terminal
  • Mag-navigate sa folder ng proyekto. Halimbawa:

sa halimbawang ito ginagamit ko ang default na Windows 7 terminal;

C:\Windows\system32>cd C:\xampp\htdocs\material-kit-react-modification
C:\xampp\htdocs\material-kit-react-modification>npm start
  • pagkatapos, patakbuhin / i-type :
npm start

TANDAAN: ang utos na "npm install" ay hindi kinakailangan!

  • sa yugtong ito awtomatikong bubuksan ng browser ang port http://localhost: 3000. Kung hindi ito awtomatikong magbubukas, maaari mo itong buksan nang manu-mano sa pamamagitan ng pagta-type sa url na patlang ng browser ang address na http://localhost: 3000. Kung nakakuha ka ng isang mensahe sa terminal na tulad nito, nangangahulugan ito na ang lahat ay gumagana nang perpekto. TAPOS NA!.
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.

GOOD LUCK. GOOD LUCK!



Tags: React Template sa 06 October 2020

Magkomento

Forum Diskusi

Post a reply
3472 views

Tumugon sa talakayang ito