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

The Material Kit React makes use of light, surfaces and motion. It uses intentional color choices, 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 evident. The main navigation remains on the left and the actions on the right.

This new design has elements of research on 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. Material Kit React is a great tool if you want to create a web presence for your Android app and need consistent, visually similar elements to leave the impression. It's also a great resource on its own, looks pretty and helps you build your web pages.

Material Kit React uses an amazing framework that can give us advantages such as material effects, animations, ripples and transitions.

Original Source

This template has been previously published on the website Creative Tim.

Licence

MIT - Copyright (c) 2018 Creative Tim.

Feature

Material Kit React is built on top of Material UI using create-react-app. The original features in this free version of the template before being modified 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

• UI-Material for ReactJs components
• Eslint
• Gulp, dan
• Prettier

Modification

The process of modifying 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
• The compiler uses Autoprefixer 9.8.4
• Support source MAP JS (customized)
• Support source MAP CSS (customized)
• Configured using Babel v7.10.3
• Transpile with Babel
• SASS Support
• 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
  • Overall theme optimization
  • Minimizing assets

Template Repair

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

• Clear warnings in 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 this workaround here

Guidelines and Preparation for use

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

• 1. The most basic step, you should get used to playing with NPM and NODEJS. If you are a beginner, please study this sparse material on the website NodeJS.org this. The main key is not to be lazy to read and understand!.
• 2. To use this template you have to do the following steps:
  • Download and Install NodeJs from NodeJs official website page
  • If NodeJs and NPM are already 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 terminal : npm install
  • Then : npm start
  • Alternatively, use this command : npm run install:clean this will remove node_modules and package-lock.json, and will automatically run the install script and the start script Navigate to : http://localhost:3000
• NOTES: For more information, you can refer to the tutorial documentation reference from CreativeTim here or CreativeTim's recommendation documentation here.

Guide to run the modified template

Start the local server. I happen to be using XAMPP. You can use other local servers like; WAMP, MAMP, Wordpress or Node.js, or others.

• 1. Open terminal
• 2. 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
  

• 3. then, run/type : npm start

• the command npm install is not required!.
• at this stage the browser will automatically open 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:

       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.1000.8:3000
  
       Note that the development build is not optimized.
       To create a production build, use npm run build.
  

it means everything is going perfectly. FINISHED !.