Material Kit React + Kār prạb pelī̀yn 0 ครั้งที่เห็น

คำอธิบาย

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

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

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

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

material-kit-react.webp

แหล่งที่มาเดิม

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

ใบอนุญาต

MIT - ลิขสิทธิ์ (c) 2018 CreativeTim

คุณสมบัติ

React Material Kit สร้างขึ้นที่ด้านบนของ 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
  • ส่วนประกอบที่รองรับ :
    • 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 แล้ว!

  • Minify JS ใช้ Terser v4.8.0

  • Minify CSS ใช้ Less v3.11.3

  • Minify SCSS ใช้ Node Sass v4.14.1 + Dart Sass v1.26.9

  • Komiler ใช้ Autoprefixer 9.8.4

  • Support source MAP JS (กำหนดเอง)

  • Support source MAP CSS (กำหนดเอง)

  • กำหนดค่าโดยใช้้ 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
  • การเพิ่มประสิทธิภาพธีมโดยรวม

  • การลดสินทรัพย์

การปรับปรุงเทมเพลต

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

คำแนะนำและการเตรียมการใช้งาน

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

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

    • ดาวน์โหลดและติดตั้ง NodeJs จาก หน้าเว็บไซต์อย่างเป็นทางการของ NodeJs
    • หาก NodeJs และ NPM ได้รับการติดตั้งแล้วให้เปิดและแตกไฟล์ zip จากเทมเพลตดั้งเดิมที่คุณดาวน์โหลดไว้ก่อนหน้านี้ไปยังโฟลเดอร์บนคอมพิวเตอร์ของคุณ
    • เปิด Terminal
    • ไปที่โฟลเดอร์ไฟล์โครงการของคุณ (เพื่อให้เทอร์มินัลสามารถอ่านโฟลเดอร์เทมเพลตที่แยกออกมาได้)
    • พิมพ์เทอร์มินัล :
    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 หรืออย่างอื่น
  • เปิดเทอร์มินัล
  • ไปที่โฟลเดอร์โครงการ ตัวอย่าง:

ในตัวอย่างนี้ฉันใช้เทอร์มินัล Windows 7 เริ่มต้น ;

C:\Windows\system32>cd C:\xampp\htdocs\material-kit-react-modification
C:\xampp\htdocs\material-kit-react-modification>npm start
  • จากนั้นเรียกใช้ / พิมพ์ :
npm start

หมายเหตุ: ไม่จำเป็นต้องใช้คำสั่ง "npm install"!

  • ในขั้นตอนนี้เบราว์เซอร์จะเปิดพอร์ต http://localhost: 3000 โดยอัตโนมัติ หากไม่เปิดโดยอัตโนมัติคุณสามารถเปิดได้ด้วยตนเองโดยพิมพ์ที่อยู่ http://localhost: 3000 ของเบราว์เซอร์ หากคุณได้รับข้อความในเทอร์มินัลเช่นนี้แสดงว่าทุกอย่างทำงานได้อย่างสมบูรณ์ เสร็จ!รณ์ เสร็จ!.
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.

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



Tags: React เทมเพลต บน 06 ตุลาคม 2020

แสดงความคิดเห็น

Forum Diskusi

Post a reply
3330 views

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