Material Kit React + Modification

A complete description of the article to inform more clearly and clearly is a mandatory requirement. We have thought about how Nickgenom users will find the most useful information.

| English | | Filipino | | Indonesia | | Malay | | Thai | | Vietnamese |
0 times seen

Material Kit React + Modification

published on : 06 October 2020

React Material Kit is Material-UI v4.1.0 Free Kit with a new and fresh design inspired by Google's material design. You asked for it, so we made it. It's great fun to introduce you to the concept of materials in an easy-to-use and beautiful component set. Along with rearranging the Material-UI elements, you'll find three sample pages with full code, to help you design your next project.

Material Kit React takes advantage of light, surfaces, and motion. It uses a deliberate choice of color, edge-to-edge imagery and large-scale typography. The general layout resembles a sheet of paper following several different layers, so that depth and regularity are clear. Main navigation remains on the left and actions on the right.

This new design features research-generated elements of ink and paper and the way objects and materials interact in real life. The result is a beautiful, consistent set of elements that can help you get started on your next project. React Material Kit is a great tool if you want to create a web presence for your Android application and need to be consistent, leaving a sense of visually similar elements. It's also a great resource on its own, looks beautiful and helps you build your web page.

Material Kit React uses an excellent framework so it is able to give us advantages like material effects, animations, ripples, and transitions .

Original Source

This template was previously published on the Creative Team website

Licence

MIT - Copyright (c) 2018 Creative Team

Features

The React Material Kit is built on top of the Material UI using create-react-app. The original features in this free version of the template before modification are as follows :

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

Main Technology

  • Material-UI for the React Js component
  • Eslint
  • Gulp, and
  • Prettier

Modification

The modification process of this template includes the following technologies in its configuration :

  • NPX is already installed!
  • Minify JS using Terser v4.8.0
  • Minify CSS using Less v3.11.3
  • Minify SCSS using Node Sass v4.14.1 + Dart Sass v1.26.9
  • Compiler uses Autoprefixer 9.8.4
  • Support source MAP JS (customized)
  • Support source MAP CSS (customized)
  • Configured using Babel v7.10.3
  • Transpiles 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
  • Optimization of the overall theme
  • Minimize assets

Template Improvements

The modification process of this template includes the following technologies in its configuration :

  • Clears warnings in the 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
  • The warning above is a global issue and is a BUG in React. You can see a solution to this problem here

Guide and Preparation for use

I'm assuming you'll start off by downloading this original template using the download button at the end of this article. Okay, let's get to the point!.

  • At its most basic, you should be familiar with playing with NPM and NODEJS. If you are a beginner, please study this material which is not much on the NodeJS.org here. The main key is not to be lazy to read and understand!
  • To use this template you need to do the following steps:
    • Download and Install NodeJs from the official NodeJs website page
    • If NodeJs and NPM have been installed, then open and extract the zip file from the original template that you downloaded earlier to a folder on your computer
    • Open Terminal
    • Navigate to your project file folder (so that the terminal can read the extracted template folder)
    • Type in the terminal: npm install
    • Then: npm start
    • Alternatively, use this command: npm run install: clean
    • will delete node_modules and package-lock.json, and will automatically run the install script and the start script
    • Navigate to: http://localhost:3000

NOTE: For more information, you can refer to the tutorial documentation reference from CreativeTim here or CreativeTim recommended documentation here.

The wizard runs a modified template

  • Run the local server. I happen to use XAMPP. You can use other local servers such as; WAMP, MAMP, Wordpress, or Node.js, or something else.
  • Open a terminal
  • Navigate to the project folder. Example :
    C:\Windows\system32>cd C:\xampp\htdocs\material-kit-react-modification
    C:\xampp\htdocs\material-kit-react-modification>npm start
  • then, run / type : npm start

NOTE: the npm install command is not required!
at this point the browser will automatically open the port http://localhost:3000. If it doesn't open automatically, you can open it manually by typing in the browser url field the address http://localhost:3000. If you get a message in the terminal like this, it means that everything is working perfectly. DONE !.

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


This file is uploaded using an external service


Tags:

Comment