Add Material UI In React Application

 In this article, we will learn how to use the Material-UI library in a React application. UI libraries is a group of components, it includes all components, which makes it easy for designers and developers to make the UI. Material UI includes all components like buttons, cards, dialog boxes, table icons, menus, sliders input, forms, etc.

Material UI is one of the most popular UI frameworks developed by Google. The Material UI library is designed for faster, easier, and developer-friendly user interfaces development. Now Material-UI is supported by all major browsers and platforms. Learn more about UI libraries

 

You can check my previous article in which we discussed React strap UI library from the below-mentioned link.

• Add Reactstrap Components In ReactJS

Prerequisites

• Basic knowledge of React.js
• Visual Studio Code IDE

Create ReactJS project

 

Let's first create a React application using  the following command.

1. npx create-react-app matform  

Open the newly created project in Visual Studio Code and install Material-UI.

 

Install Material-UI

 

Now Install Material-UI by using following command

1. npm install @material-ui/core --save  

Now, right click on "src" folder and add a new component named 'Form.js.I

 

First let’s add a material UI button in this component. To use react Material UI button add the following reference in this component.

1. import Button from '@material-ui/core/Button';  

 Add the following code in form component and run the project.

1. import React, { Component } from 'react'  
2. import Button from '@material-ui/core/Button';  
3. export class Form extends Component {  
4.         render() {  
5.                 return (  
6.                         <div>  
7.                                 <Button variant="contained" color="primary">  
8.                                      Material UI  
9.                                 </Button>  
10.                         </div>  
11.                 )  
12.         }  
13. }  
14. export default Form  

We use variant and color property of Button component. 

 

Now let's create a component named "Navbar.js" and add the following code.

1. import React, { Component } from 'react'  
2. import AppBar from '@material-ui/core/AppBar';  
3. import Toolbar from '@material-ui/core/Toolbar';  
4. import TextField from '@material-ui/core/TextField';  
5. import Checkbox from '@material-ui/core/Checkbox';  
6. export class Navbar extends Component {  
7.         render() {  
8.                 return (  
9.                         <div>  
10.                                 <AppBar position="static">  
11.                                         <Toolbar>  
12.                                                 Material UI  
13.                                  </Toolbar>  
14.                                 </AppBar>  
15.                                 <TextField  
16.                                         placeholder="Placeholder"  
17.                                         label="TextBox" />  
18.                                 <Checkbox  
19.   
20.                                         value="primary"  
21.                                         inputProps={{ 'aria-label': 'primary checkbox' }}  
22.                                 />  
23.                         </div>  
24.                 )  
25.         }  
26. }  
27.   
28. export default Navbar  

Add reference of this component in App.js file and run the project and check the result.

 

Now let's create another component named 'List.js'. In this component we add breadcrumbs. Add the following code

1. import React, { Component } from 'react'  
2. import Breadcrumbs from '@material-ui/core/Breadcrumbs';  
3. import Link from '@material-ui/core/Link';  
4. function handleClick(event) {  
5.   event.preventDefault();  
6.   alert('BreadCrumb');  
7. }  
8. export class List extends Component {  
9.   render() {  
10.     return (  
11.       <div>  
12.          <Breadcrumbs aria-label="breadcrumb">  
13.       <Link color="inherit" href="/" onClick={handleClick}>  
14.         Demo1  
15.       </Link>  
16.       <Link color="inherit" href="/getting-started/installation/" onClick={handleClick}>  
17.       Demo2  
18.       </Link>  
19.       <Link  
20.         color="textPrimary"  
21.         href="/components/breadcrumbs/"  
22.         onClick={handleClick}  
23.         aria-current="page"  
24.       >  
25.           Demo3  
26.       </Link>  
27.     </Breadcrumbs>  
28.       </div>  
29.     )  
30.   }  
31. }  
32.   
33. export default List  
34.  
    

Now run the project and check the result.

 

Summary

 

In this article we learned how to install Material UI library in React applications. Reactstrap is a component library for React.UI. Libraries is a group of components, it includes all components, which make it easy for designesr and developers to make the UI.