การรวบรวมบทความและเทมเพลต

หน้าแค็ตตาล็อกนี้มีบทความที่เป็นตัวแทนและคอลเลกชันของเทมเพลต Nickgenom ที่ดีที่สุดที่นำมาจากแหล่งที่น่าสนใจต่างๆ บนอินเทอร์เน็ต

material kit react.webp
การดัดแปลง, React, เทมเพลต

Material Kit React + Kār prạb pelī̀yn

Azkiya
06 ตุลาคม 2020

Material Kit React เป็นฟรี Material-UI v4.1.0 Kit พร้อมการออกแบบที่สดใหม่ซึ่งได้รับแรงบันดาลใจจากการออกแบบวัสดุของ Google คุณขอมา เราก็จัดให้ ขอแนะนำให้รู้จักแนวคิดของวัสดุในชุดส่วนประกอบที่สวยงามและใช้งานง่าย นอกจากการจัดเรียงองค์ประกอบ Material-UI แล้ว คุณจะพบหน้าตัวอย่างสามหน้าพร้อมโค้ดแบบเต็ม เพื่อช่วยคุณออกแบบโครงการต่อไปของคุณ

Material Kit React ใช้แสง พื้นผิว และการเคลื่อนไหว ใช้ตัวเลือกสีโดยเจตนา รูปภาพจากขอบถึงขอบ และรูปแบบตัวอักษรขนาดใหญ่ เลย์เอาต์ทั่วไปคล้ายกับกระดาษแผ่นหนึ่งซึ่งเรียงตามชั้นต่างๆ หลายชั้น เพื่อให้เห็นความลึกและความสม่ำเสมอ การนำทางหลักยังคงอยู่ทางด้านซ้ายและการดำเนินการทางด้านขวา

การออกแบบใหม่นี้มีองค์ประกอบของการวิจัยเกี่ยวกับหมึกและกระดาษ และวิธีที่วัตถุและวัสดุโต้ตอบกันในชีวิตจริง ผลลัพธ์ที่ได้คือชุดองค์ประกอบที่สวยงามและสม่ำเสมอ ซึ่งสามารถช่วยให้คุณเริ่มต้นโครงการต่อไปได้ Material Kit React เป็นเครื่องมือที่ยอดเยี่ยมหากคุณต้องการสร้างตัวตนบนเว็บสำหรับแอป Android ของคุณและต้องมีความสอดคล้องกัน โดยทิ้งความประทับใจขององค์ประกอบที่มีลักษณะคล้ายคลึงกัน นอกจากนี้ยังเป็นแหล่งข้อมูลที่ยอดเยี่ยมด้วยตัวมันเอง ดูสวยงาม และช่วยคุณสร้างหน้าเว็บของคุณ

Material Kit React ใช้เฟรมเวิร์กที่น่าทึ่งซึ่งสามารถให้ข้อได้เปรียบแก่เรา เช่น เอฟเฟกต์วัสดุ แอนิเมชั่น ระลอกคลื่น และทรานซิชัน

material-kit-react.webp

ต้นฉบับ

เทมเพลตนี้เคยเผยแพร่บนเว็บไซต์ไปแล้ว Creative Tim.

ใบอนุญาต

MIT - ลิขสิทธิ์ (c) 2018 Creative Tim.

ลักษณะเฉพาะ

Material Kit React สร้างขึ้นบน Material UI โดยใช้ create-react-app ฟีเจอร์ดั้งเดิมในเทมเพลตเวอร์ชันฟรีนี้ก่อนแก้ไขมีดังนี้ :

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

เทคโนโลยีหลัก

  • Material-UI สำหรับส่วนประกอบ ReactJs
  • Eslint
  • Gulp, และ
  • Prettier

การดัดแปลง

กระบวนการแก้ไขเทมเพลตนี้มีเทคโนโลยีต่อไปนี้ในการกำหนดค่า :

  • ติดตั้ง NPX แล้ว!
  • ลดขนาด JS โดยใช้ Terser v4.8.0
  • ลดขนาด CSS โดยใช้ Less v3.11.3
  • ลดขนาด SCSS โดยใช้ Node Sass v4.14.1 + Dart Sass v1.26.9
  • คอมไพเลอร์โดยใช้ Autoprefixer 9.8.4
  • รองรับ MAP JS (กำหนดเอง)
  • รองรับ MAP CSS ต้นทาง (กำหนดเอง)
  • กำหนดค่าโดยใช้ Babel v7.10.3
  • "Transpil" กับ "Babel"
  • สนับสนุน SASS
  • รองรับคำนำหน้าอัตโนมัติ
  • ติดตั้งการพึ่งพา :
    • @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
    • การเพิ่มประสิทธิภาพธีมโดยรวม
    • ลดขนาดสินทรัพย์

การซ่อมแซมแม่แบบ

กระบวนการแก้ไขเทมเพลตนี้มีเทคโนโลยีต่อไปนี้ในการกำหนดค่า :

  • ล้างคำเตือนใน คอนโซลเบราว์เซอร์ :
    [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
  • คำเตือนด้านบนเป็นปัญหาระดับโลกและเป็น BUG ใน React คุณสามารถดูวิธีแก้ปัญหานี้ ที่นี่

คู่มือและการเตรียมใช้งาน

ฉันคิดว่าคุณจะเริ่มต้นด้วยการดาวน์โหลดเทมเพลตดั้งเดิมนี้โดยใช้ปุ่มดาวน์โหลดที่ท้ายบทความนี้ เอาล่ะ เข้าเรื่องกันเลย!.

  1. ขั้นตอนพื้นฐานที่สุด คุณควรคุ้นเคยกับการเล่นกับ NPM และ NODEJS หากคุณเป็นมือใหม่ โปรดศึกษาเนื้อหาที่กระจัดกระจายนี้ในเว็บไซต์ NodeJS.org นี้ ที่สำคัญอย่าขี้เกียจอ่านทำความเข้าใจ!
  2. หากต้องการใช้เทมเพลตนี้ คุณต้องทำตามขั้นตอนต่อไปนี้ :

    • ดาวน์โหลดและติดตั้ง NodeJs จาก หน้าเว็บไซต์อย่างเป็นทางการของ NodeJs

    • หากมีการติดตั้ง NodeJs และ NPM ไว้แล้ว ให้เปิดและแตกไฟล์ zip จากเทมเพลตดั้งเดิมที่คุณดาวน์โหลดไว้ก่อนหน้านี้ไปยังโฟลเดอร์บนคอมพิวเตอร์ของคุณ

    • เปิดเทอร์มินัล

    • นำทางไปยังโฟลเดอร์ไฟล์โครงการของคุณ (เพื่อให้เทอร์มินัลสามารถอ่านโฟลเดอร์เทมเพลตที่แยกออกมาได้)

    • พิมพ์เทอร์มินัล : npm install

    • แล้ว : npm start

    • หรือใช้คำสั่งนี้ : npm run install:clean

    • สิ่งนี้จะลบ node_modules และ package-lock.json และจะเรียกใช้สคริปต์ install และสคริปต์ start โดยอัตโนมัติ

    • นำทางไปยัง : http://localhost:3000

  • หมายเหตุ : สำหรับข้อมูลเพิ่มเติม คุณสามารถดูเอกสารอ้างอิงบทแนะนำจาก CreativeTim ที่นี่ หรือเอกสารแนะนำ CreativeTim ที่นี่.

คำแนะนำในการเรียกใช้เทมเพลตที่แก้ไข

เรียกใช้เซิร์ฟเวอร์ภายในเครื่อง"" ฉันกำลังใช้ XAMPP. คุณสามารถใช้เซิร์ฟเวอร์ภายในเครื่องอื่น ๆ เช่น; WAMP, MAMP, Wordpress หรือ Node.js หรืออย่างอื่น

  1. เปิดเทอร์มินัล
  2. นำทางไปยังโฟลเดอร์โครงการ. ตัวอย่าง :
    C:\Windows\system32>cd C:\xampp\htdocs\material-kit-react-modification
    C:\xampp\htdocs\material-kit-react-modification>npm start
  1. แล้ว, วิ่ง/พิมพ์ : npm start
  • หมายเหตุ : คำสั่ง npm install ไม่จำเป็นต้องใช้!. ในขั้นตอนนี้ เบราว์เซอร์จะเปิดพอร์ต http://localhost:3000. โดยอัตโนมัติ หากไม่เปิดโดยอัตโนมัติ คุณสามารถเปิดได้ด้วยตนเองโดยพิมพ์ที่อยู่ http://localhost:3000. ในช่อง URL ของเบราว์เซอร์ หากคุณได้รับข้อความในเทอร์มินัลดังนี้ :
    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.

หมายความว่าทุกอย่างทำงานได้อย่างสมบูรณ์. เสร็จ ! .

โชคดี. โชคดี!


ดาวน์โหลด

รหัสผ่าน : nickgenom.com


ทิ้งข้อความไว้

1-1 dari 1

ตอบกลับการสนทนานี้

คุณไม่สามารถแก้ไขโพสต์หรือสร้างการตอบกลับ: คุณต้องเข้าสู่ระบบก่อนจึงจะสามารถโพสต์ได้.

คำพูดของภูมิปัญญา

" ความรักของฉันที่มีต่อเธอเป็นเหมือนหนี้บุญคุณเจ้าหนี้ ตอนแรกมันรู้สึกเล็กน้อย แต่เมื่อเวลาผ่านไปมันกลับกลายเป็นเรื่องใหญ่ "

อ้างอิง บทความ :

คอลเลกชันเทมเพลตเว็บไซต์ :

We Build

แท็ก โพสต์: Bootstrap, การดัดแปลง, เทมเพลต 04 สิงหาคม 2021

Above - Template Pendidikan

แท็ก โพสต์: Bootstrap, เทมเพลต 04 สิงหาคม 2021

Portfolio - (เทมเพลตพิมพ์เขียว)

แท็ก โพสต์: HTML5, เทมเพลต 04 สิงหาคม 2021

Coming Sssoon + Mods

แท็ก โพสต์: Bootstrap, การดัดแปลง, เทมเพลต 30 ตุลาคม 2020

Mobster + Mods

แท็ก โพสต์: Bootstrap, เทมเพลต 29 ตุลาคม 2020

SB Admin + Kār prạb pelī̀yn

แท็ก โพสต์: Bootstrap, การดัดแปลง, เทมเพลต 06 ตุลาคม 2020
เกี่ยวกับ
Rss
  • บทความฟรี | การรวบรวมบทความและเทมเพลต https://nickgenom.com/th/%E0%B8%9F%E0%B8%AD%E0%B8%A3%E0%B8%B1%E0%B9%88%E0%B8%A1 Artikel dan Koleksi Template https://nickgenom.com/th/%E0%B8%9F%E0%B8%AD%E0%B8%A3%E0%B8%B1%E0%B9%88%E0%B8%A1%E0%B8%AB%E0%B8%B1%E0%B8%A7%E0%B8%82%E0%B9%89%E0%B8%AD/artikel-dan-koleksi-template-2 พ., 20 ต.ค. 2021 00:11:34 +0000

    apa sih ini?
    Artikel dan Koleksi Template https://nickgenom.com/th/%E0%B8%9F%E0%B8%AD%E0%B8%A3%E0%B8%B1%E0%B9%88%E0%B8%A1%E0%B8%AB%E0%B8%B1%E0%B8%A7%E0%B8%82%E0%B9%89%E0%B8%AD/artikel-dan-koleksi-template จ., 18 ต.ค. 2021 20:10:22 +0000