How to Add Material UI in ReactJS

React components that implement Google’s Material Design.

Material UI is one of the world’s most popular UI framework backed by Google.

Material Design (codenamed Quantum Paper) is a design language that Google developed in 2014. Material Design uses more grid-based layouts which are responsive, animations and transitions, padding, and depth effects such as lighting and shadows.

Before installing you must have npm and node installed, if not please go through the below link

https://nodejs.org/en/

https://docs.npmjs.com/getting-started

Now Setup the new react project, if you’r new to reactjs , click here to install the react project

1. create-react-app materialreact
2. cd materialreact/
3. npm start
4. After set up, install material UI
5. npm install @material-ui/core (Please note that react >= 16.3.0 and react-dom >= 16.3.0 are peer dependencies.)
6. Now the material UI is installed , and you can use it in your react components.

// Example Quick Start
import React from 'react';
import ReactDOM from 'react-dom';
import Button from '@material-ui/core/Button';

function App() {
  return (
    <Button variant="contained" color="primary">
      Hello World
    </Button>
  );
}

ReactDOM.render(<App />, document.querySelector('#app'));

For more reference about Material UI components , please click below link

https://material-ui.com/demos/app-bar/