Add Material UI In React Application

Introduction

 
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 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 interface development. Now Material-UI supported by all major browsers and platforms. Learn more about ui libraries
 
You can check my previous article in which we discussed about React strap UI library from the below mentioned link.
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.