How to use Material UI Menus in React?

Before starting with How, Let start with What is Material UI in react, its installation, and other details.

Material Design is a design language created in 2014 by Google and is exceptionally well known for web and portable applications.

Material Design is enlivened by the physical world and its surfaces, including how they reflect light and cast shadows. Material surfaces rethink the modes of paper and ink. With the parts from the Material-UI library, it's anything but difficult to utilize Material Design components in your React web or portable application. To install these we have to run the following commands:  npm install @material-ui/core

Component of Material UI

Some Common components of Material UI:

• App bars
• Top 
• Bottom  
• Button 
• Text and contained Buttons
• Toggle buttons
• Icon Toggle buttons
• Data Tables 
• Sortable
• Selectable
• Pagination
• Lists
  • Single line
  • Two-line
  • Three line
  • Checkbox
  • Expand/collapse
  • Switch
  • Reorder
• Types:
• Avatar
• Icon
• Thumbnail
• Controls
• Menus
  • Cascade
  • Text field dropdown menu
  • Editable dropdown menu
• Dropdown menu 
• Exposed dropdown menu
• Contextual
• Selection Controls
• Checkbox
• Radio Button 
• Switch 
• Text Fields 
  • Single-line
  • Multi-line
  • Text-area
  • Full-width
  • Helper text
  • Error message
  • Icons
  • Character counter
• Standard 
• Filled
• Outline 
• Types:
• Assistive Element
• Toolbar
• Tooltip
• Desktop
• Mobile

Now we start with the set-up of the UI menus and how to use it in the React Application.

Step 1: First we have to set up the project by using create-react-app, you can name the project as “react-material-UI” or what were you want to.

npm create-react-app react-material-UI

Step 2: The Next step is to install some dependencies which are material UI library and Contentful JavaScript library using the following command.

 npm install @material-ui/core

 npm install contentful

 npm start

By this, the browser opens up, and the default page of the React Application runs at localhost:3000.

Step 3: Now we need to install Roboto font, and font icon in the application and run

     npm install typeface-roboto –save

     npm install @material-ui/icons

Step 4: Open the project on the code editor for checking the material library into the package.json file.

Step 5: Open the App.js, delete all existing code from it. Add new code for use of components in the application such as Textfield, Button, Grid and Typography, etc for UI purpose. For a text box, we use Textfield, for adding a button in the application we use button component, for heading we use Typography.

Code:

import React from 'react';  
import Button from '@material-ui/core/Button';  
import TextField from '@material-ui/core/TextField';  
import Grid from '@material-ui/core/Grid';  
import Typography from '@material-ui/core/Typography';  
import 'typeface-roboto';  
class App extends React.Component {  
   handleLogin = () => {  
   alert("Login form example using MATERIAL UI");  
}  
render() {  
   return (  
      <Grid  
         container  
         spacing={0}  
         direction="column"  
         alignItems="center"  
         justify="center"  
         style={{ minHeight: '100vh' }}  
         >  
   <Typography component="h1" variant="h5">  
      Log in  
   </Typography>  
   <form onSubmit={this.handleLogin}>  
   <TextField  
      variant="outlined"  
      margin="normal"  
      fullWidth  
      label="Email Address"  
   />  
   <TextField  
      variant="outlined"  
      margin="normal"  
      fullWidth  
      label="Password"  
      type="password"  
   />  
   <Button  
      type="submit"  
      fullWidth  
      variant="contained"  
      color="primary"  
      >  
      Log In  
      </Button>  
   </form>  
  </Grid>  
  );  
 }    
}  
export default App;

It just a basic example but by using other components of Material-UI you can design nice and responsive with proper coloring, spacing, Texting, and Heading.