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.

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 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 to be consistent, leaving the impression of visually similar elements. 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 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 React Js components
• Eslint
• Gulp, and
• Prettier

Modification

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

• NPX 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 using Autoprefixer 9.8.4
• Support source MAP JS (customized)
• Support source MAP CSS (customized)
• Configured using Babel v7.10.3
• Transpile with Babylon
• 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
  • Overall theme optimization
  • Minimize 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 troubleshooting here

Guide and Preparation for use

I assume you will 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 this NodeJS.org website. 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 of 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 script install and script start

   • Navigate to : http://localhost:3000

• NOTES : For more information, you can refer to the tutorial documentation reference from CreativeTim here or CreativeTim recommendation documentation here.

Guide to running the modified template

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

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

• NOTES : the npm install command is not required!. in 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.100.8:3000

    Note that the development build is not optimized.
    To create a production build, use npm run build.

it means everything is working perfectly. FINISHED ! .

GOOD LUCK. GOOD LUCK!