Post
Ask Question

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 are a group of components, that include 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, slider 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 is 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.

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 the following command

npm install @material-ui/core --save

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

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

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

 Add the following code in the 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 properties of the 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 a reference to this component in the App.js file run the project and check the result.

Material ui

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 the Material UI library in React applications. Reactstrap is a component library for React.UI. Libraries are a group of components, that include all components, which make it easy for designers and developers to make the UI.


Similar Articles