How to Add Material UI in Reactjs

Introduction

In this post, we’ll 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

Prerequisites

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

Create ReactJS project

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

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

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.

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

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

import React, { Component } from 'react'  
import Button from '@material-ui/core/Button';  
export class Form extends Component {  
        render() {  
                return (  
                        <div>  
                                <Button variant="contained" color="primary">  
                                     Material UI  
                                </Button>  
                        </div>  
                )  
        }  
}  
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.

import React, { Component } from 'react'  
import AppBar from '@material-ui/core/AppBar';  
import Toolbar from '@material-ui/core/Toolbar';  
import TextField from '@material-ui/core/TextField';  
import Checkbox from '@material-ui/core/Checkbox';  
export class Navbar extends Component {  
        render() {  
                return (  
                        <div>  
                                <AppBar position="static">  
                                        <Toolbar>  
                                                Material UI  
                                 </Toolbar>  
                                </AppBar>  
                                <TextField  
                                        placeholder="Placeholder"  
                                        label="TextBox" />  
                                <Checkbox  
  
                                        value="primary"  
                                        inputProps={{ 'aria-label': 'primary checkbox' }}  
                                />  
                        </div>  
                )  
        }  
}  
  
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

import React, { Component } from 'react'  
import Breadcrumbs from '@material-ui/core/Breadcrumbs';  
import Link from '@material-ui/core/Link';  
function handleClick(event) {  
  event.preventDefault();  
  alert('BreadCrumb');  
}  
export class List extends Component {  
  render() {  
    return (  
      <div>  
         <Breadcrumbs aria-label="breadcrumb">  
      <Link color="inherit" href="/" onClick={handleClick}>  
        Demo1  
      </Link>  
      <Link color="inherit" href="/getting-started/installation/" onClick={handleClick}>  
      Demo2  
      </Link>  
      <Link  
        color="textPrimary"  
        href="/components/breadcrumbs/"  
        onClick={handleClick}  
        aria-current="page"  
      >  
          Demo3  
      </Link>  
    </Breadcrumbs>  
      </div>  
    )  
  }  
}  
  
export default List  

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.

Thank for read!

#react #Add Material UI #node-js #vscode