Koleksyon ng Mga Artikulo at Mga Template

Nagtatampok ang pahina ng katalogo na ito ng mga kinatawan ng artikulo at isang koleksyon ng pinakamahusay na mga template ng Nickgenom na kinuha mula sa iba't ibang mga kagiliw-giliw na mapagkukunan sa internet

material kit react.webp
Pagbabago, React, Template

Material Kit React + Pagbabago

Azkiya
06 Oktober 2020

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

Ginagamit ng Material Kit React ang ilaw, mga ibabaw, at galaw. Gumagamit ito ng sinasadyang mga pagpipilian 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 maliwanag. Ang pangunahing nabigasyon ay mananatili sa kaliwa at 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 Material Kit React ay isang mahusay na tool kung nais mong lumikha ng pagkakaroon ng web para sa iyong Android app at kailangang maging pare-pareho, naiwan ang impression ng mga magkatulad na biswal na elemento. Ito rin ay isang mahusay na mapagkukunan sa sarili nitong, maganda ang hitsura at tumutulong sa iyo na bumuo ng iyong mga web page.

Gumagamit ang Material Kit React ng kamangha-manghang balangkas na maaaring magbigay sa amin ng mga kalamangan tulad ng mga materyal na epekto, animasyon, ripples at transisyon.

material-kit-react.webp

Orihinal na Pinagmulan

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

Lisensya

MIT - Copyright (c) 2018 Creative Tim.

Tampok

Ang Material Kit React 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
  • 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

  • Materyal-UI para sa mga bahagi ng 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 na ang NPX!
  • I-minify ang JS gamit ang Terser v4.8.0
  • I-minimize ang CSS gamit ang Less v3.11.3
  • I-minimize ang SCSS gamit ang Node Sass v4.14.1 + Dart Sass v1.26.9
  • Ang tagatala ay gumagamit ng Autoprefixer 9.8.4
  • Pinagmulan ng suporta MAP JS (na-customize)
  • Pinagmulan ng suporta sa MAP CSS (na-customize)
  • Na-configure gamit ang Babel v7.10.3
  • Transpile sa Babilonya
  • Suportahan ang SASS
  • Suportahan ang Autoprefixer
  • Mag-install ng Mga Dependency :
    • @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
    • I-minimize ang mga assets

Pag-aayos ng Template

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

  • Malinaw na 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 babala sa itaas ay isang pandaigdigang isyu at isang BUG sa React. Maaari mong makita ang workaround na ito dito

Patnubay at Paghahanda para magamit

Ipagpalagay ko na magsisimula ka sa pamamagitan ng pag-download ng orihinal na template na ito gamit ang pindutan ng pag-download sa dulo ng artikulong ito. O sige, diretso tayo sa point!.

  1. Ang pinaka-pangunahing hakbang, dapat kang masanay sa paglalaro sa NPM at NODEJS. Kung ikaw ay isang nagsisimula, mangyaring pag-aralan ang kalat-kalat na materyal na ito sa NodeJS.org website. Ang pangunahing susi ay hindi maging tamad na basahin at maunawaan!.
  2. 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 naka-install na ang NodeJs at NPM, pagkatapos buksan at kunin ang zip file ng orihinal na template na na-download mo nang mas maaga 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 script na install at ang script na start

    • Mag-navigate sa : http://localhost:3000

  • TANDAAN : Para sa karagdagang impormasyon, maaari kang mag-refer sa sanggunian ng dokumentasyon ng tutorial mula sa CreativeTim dito o dokumentasyon ng rekomendasyon ng CreativeTim dito.

Patnubay sa pagpapatakbo ng binagong template

Patakbuhin ang 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.

  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
  1. pagkatapos, patakbuhin/i-type : npm start
  • TANDAAN : ang utos na npm install ay hindi kinakailangan !. sa yugtong ito, awtomatikong bubuksan ng browser ang port na http://localhost:3000. Kung hindi ito awtomatikong magbubukas, maaari mo itong buksan nang manu-mano sa pamamagitan ng pagta-type sa patlang ng url ng browser ng address na http://localhost:3000. Kung nakakuha ka ng isang mensahe sa terminal na 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.

nangangahulugan ito na ang lahat ay ganap na nangyayari. TAPOS ! .

GOOD LUCK. GOOD LUCK!



Mag-iwan ng komento

1-1 mula sa 1

Tumugon sa talakayang ito

Hindi ka maaaring mag-edit ng mga post o lumikha ng mga tugon: Dapat naka-log in ka bago ka makapag-post.

Salita ng karunungan

" Igalang ang iyong mga magulang, nakapagtapos sila sa pag-aaral nang walang tulong ng Google. "

Sanggunian sa Artikulo :

Koleksyon ng Template ng Website :

We Build

Mga tag post: Bootstrap, Pagbabago, Template 04 Agustus 2021

Blueprint - (Template ng Blueprint)

Mga tag post: Bootstrap, Template 04 Agustus 2021

Above - Template Pendidikan

Mga tag post: Bootstrap, Template 04 Agustus 2021

Portfolio - (Template ng Blueprint)

Mga tag post: HTML5, Template 04 Agustus 2021

Coming Sssoon + Mods

Mga tag post: Bootstrap, Pagbabago, Template 30 Oktober 2020

Mobster + Mods

Mga tag post: Bootstrap, Template 29 Oktober 2020

Material Kit React + Pagbabago

Mga tag post: Pagbabago, React, Template 06 Oktober 2020

SB Admin + Pagbabago

Mga tag post: Bootstrap, Pagbabago, Template 06 Oktober 2020

Space Science + Pagbabago

Mga tag post: HTML5, Pagbabago, Template 01 Oktober 2020

Moderna + Pagbabago

Mga tag post: Bootstrap, Pagbabago, Template 30 September 2020
Tungkol sa
Rss
  • Libreng Mga Artikulo | Koleksyon ng Mga Artikulo at Mga Template https://nickgenom.com/tl/forum Artikel dan Koleksi Template https://nickgenom.com/tl/paksa-ng-paksa/artikel-dan-koleksi-template-2 Rab, 20 Okt 2021 00:11:34 +0000

    apa sih ini?
    Artikel dan Koleksi Template https://nickgenom.com/tl/paksa-ng-paksa/artikel-dan-koleksi-template Sen, 18 Okt 2021 20:10:22 +0000