Tobi writes
Implementing Material UI In your React web application

Implementing Material UI In your React web application

Subtitle: A beginner’s guide to the use of Material UI in the react application.

Oluwatobi's photo
Oluwatobi
·

8 min read

Table of contents

Table of Contents

  • Introduction

  • Uses of Material UI

  • Setting up React Application

  • Installing Material UI

  • Understanding basic Material UI terminologies

  • Project: Setting up a basic login page using Material UI

  • Advanced learning guides available

  • Conclusion

Introduction

The ability to implement aesthetically pleasing user interface designs is an important skill for a budding front-end web developer. This has necessitated the development of some easy-to-deploy UI development frameworks for front-end development such as Font Awesome, Material UI and Chakra UI among others.

Material UI was developed by Google Inc. as a robust user interface framework. It offers lots of user interface components that help give you the Midas touch to your website. In this tutorial, we would be introducing you to the use of Material UI, walk you through some basic terminologies, Implement the web application styling functionality and then design a simple login page together.

However, to proceed with this tutorial, here are some basic requirements expected of you to have.

  • Knowledge of JavaScript and React

  • Knowledge of NPM package installation

  • Knowledge of basic CSS styling

React Application Set-up

So right now, let’s set up our React web application. First, navigate to the folder you intend to create your project using the Command prompt. Then enter npm create-react-app React-Material-UI which is my name choice for this project. You can change it to whatever you want.

Wait for a few minutes till the web application is set up. You can then navigate to the project folder and launch the application by entering npm start on the Command prompt.

You can now navigate to http://localhost:3000 to view the default homepage.

To test our new application, open the project folder in your preferred code editor and navigate to the app.jsx file. Edit it and replace the default code within the div element with “I love Material UI”. You can now refresh the browser. You should see a screen similar to this.

Installing Material UI

Right now, let’s return to our command prompt user interface. To successfully set up material UI, we would need to install its packages as stated in its documentation.

So right now, type in npm install @mui/material @emotion/react @emotion/styled. After it completes the installation, we have our Material UI library ready to use.

Setting up Material UI

Now we would go ahead and earn how to set up the Material UI package in our React application. In our App.jsx file, let’s import the Material UI package. We would test this by rendering a Button called Hello World.

import Button from '@mui/material/Button'
import React from 'react'


const App = () => {

    return (

        <div>
            <Button variant="contained" >Hello World</Button>
        </div>
    )
}

export default App

The button Component is imported from The @mui/material folder. This contains countless other reusable components that can be used. Some of these components will be used in our tutorial. We would expatiate more on the button component as we go on in the tutorial, but for now, We have successfully implemented Material UI in our React application.

Having done this, let's now delve into the nitty-gritty of Material UI. We would be discussing basic terminologies and components used in Material UI and provide examples when necessary.

Understanding basic Material UI terminologies

So in this section, we hope to explain some basic terminologies in Material UI and also test out its functionality. This knowledge would also be useful for our registration form project later in the tutorial.

Typography: This component is used in Material Ui in rendering texts in the web application. It replaces the conventional <h> element used in HTML. Its advantages mainly stem from the fact that it allows the user to ensure consistent text styling and ensure uniform text fonts. Knowing fully well that texts have different meanings and play different roles depending on their size and boldness, the Typography component helps you to specify the type of text string you want with its Variant property. Typography also allows you to inherit the text style of the parent element using the variant attribute inherited.

import Typography from '@mui/material/Typography'

import React from 'react'

const App = () => {

    return (
        <div>
         <Typography variant="button" > Hello World</Typography>

         <Typography variant="h2"> Hello World</Typography>

         <Typography variant="h4"> Hello World</Typography>

         <Typography variant="h6"> Hello World</Typography>

         <Typography variant="caption"> Hello World</Typography>
        </div>

    )

}

export default App

Date Picker: Material UI as a demonstration of its richness, provides an easy alternative to the HTML date element with the TextField Date component. This can be set up b following the code below.

<TextField type="date" />

Icons: One of the best features that Material UI offers is that it comes with its icons pre-installed. Right now, we will be learning how to use the icons as components and also adding color to them. 

import Typography from '@mui/material/Typography'

import React from 'react'

import Blender from '@mui/icons-material/esm/Blender'

import AddCommentSharp from '@mui/icons-material/esm/AddCommentSharp'



const App = () => {

    return (

        <div>
         <Typography variant="h2"> Hello World</Typography>

        <Blender  color=”success”

/>

<AddCommentSharp  color=”action”/>
        </div>

    )

}

export default App

This is what it displays.

List: This is another useful Material UI component that helps replace the conventional “boring” html < li> method of rendering lists on a web page. Material UI List can be easily set up by importing List, ListItem and LIstItemText. List serves as a parent component while ListItem serves as the parent component for each item. The LIstItemText is the component that renders the text of the list component. 

import List from '@mui/material/List';

import React, { useState } from 'react'

import ListItem from '@mui/material/ListItem';

import ListItemText from '@mui/material/ListItemText';



const App = () => {



  const [lists ,  setLists] = useState([

   "john", "MAlik", "Bella", "Barbie"]);



    return (

        <div> 

        <List>

{lists.map((list , index) =>  (

  <ListItem key={index} button dense>

    <ListItemText primary={list} />

  </ListItem>



)

)

}

        </List>     

        </div>

    )

}

export default App

Select: This Material UI component is somewhat similar to the default html select options element. However, it allows for easy labeling, efficiently manages the option selected and provides additional features that enhance its aesthetics. Instead of the options element used in default html, the MenuItem component is used.

<Select label="Gender">

               <MenuItem value={"male"}>Male</MenuItem>

               <MenuItem value={"Female"}>Female</MenuItem>

               <MenuItem value={"Others"}>Others</MenuItem>

                         </Select>

Grid: A quite underrated feature of Material Ui is how it quite eliminates the need to import a CSS styling document by providing inline styling options that are equally effective. One important Material UI component is the Grid component which allows for easy structuring and page responsiveness. It can serve as a structuring template for the entire page i.e. Grid container or it can be used to structure children elements i.e. Grid Item.

Spacing: This attribute in the Grid container provides a numerical value that is used to structure the layouts and adequately space the Grid items.

Breakpoints: For devices whose screen width is less than 600px, the xs value is applied while For devices whose screen width is less than 960px, the sm value is applied. The md value is applied for values above 960 to 1280px. Lg which is less than 1920px and xl which is greater than 1920 px can also be used. 

import Button from '@mui/material/Button'

import Rating from '@mui/material/Rating'

import Grid from '@mui/material/Grid'

import React from 'react'



const Mat = () => {

    return (

        <div>

          <Grid container spacing={3}>

            <Grid item xs={12} sm ={6} md={3}>

              Hello World

            </Grid>

            <Grid item xs={12} sm ={6} md={3}>

              Hello World

            </Grid>

            <Grid item xs={12} sm ={6} md={3}>

              Hello World

            </Grid>

            <Grid item xs={12} sm ={6} md={3}>

              Hello World

            </Grid>

          </Grid>

        </div>

    )

}

export default Mat

This is what you are expected to see.

Basic Project:

In this section, we would be designing a minimalistic registration page using plain Material UI with little or no complexities introduced. At the end of the tutorial, we should have an outcome quite similar to this.

So first of all, we would be importing various components we intend to use in this project.

import React from 'react';

import Grid from '@mui/material/Grid'

import {FormControl, Select,TextField, Stack,Typography,MenuItem, FormControlLabel, Button, FormLabel, FormGroup } from '@mui/material'

We would now initialize the project by writing its react functions.

const SignUp =() => {
    return (
<> 
</>
)
}
export default  SignUp

Now that we have the basic skeleton of our app all ironed out, let’s start working on the features. Firstly, we would begin by working on the form Header. We would be using the Material UI Typography component for this. The variant is The H2 element tag and the text are justified and aligned to the center.

 <Typography variant="h2" justifyContent="center" textAlign="center"> 

 Registration  Form

</Typography>

So we would then go on to import the Material UI FormControl component which would serve as the container for our form. The FormGroup is used to handle each different subsection in the form. It serves as the default html div element. The FormGroup encloses the FormLabeL which replaces the label html element.

We would also introduce the TextField component which replaces our input HTML element. It provides additional features as it has inbuilt capacities to detect errors inputted. Below is a code snippet on how to set it up.

<TextField label="Surname" required type="text" fullWidth />

Having completed this, let's go ahead to complete the project. Attached below is the entire code snippet for this project tutorial. Feel free to modify and improve on it from the knowledge gotten from this tutorial.

import React from 'react';

import Grid from '@mui/material/Grid'

import {FormControl  , Select,TextField, Stack, Typography , MenuItem, FormControlLabel, Button,  FormLabel, FormGroup, Checkbox , } from '@mui/material'

const SignUp =() => {

    return (

<> 



    <Typography variant="h2"  justifyContent="center" textAlign="center">  Registration  Form</Typography>

<Stack  justifyContent="center"  direction="row">



    <FormControl style={{width: '500px'}}>

        <FormGroup sx={{mb: 2}}>

             <FormLabel sx={{mb: 1}}  >Surname </FormLabel>

             <TextField  label="Surname" required  type="text" fullWidth  />

        </FormGroup>

        <FormGroup sx={{mb: 2}} >

             <FormLabel    sx={{mb: 1}} >Middle Name </FormLabel>

             <TextField  label="Middle Name" required  type="text" fullWidth  />

        </FormGroup>

        <FormGroup sx={{mb: 2}}>

             <FormLabel sx={{mb: 1}} >Email Address  </FormLabel>

             <TextField  label="Email Address" required  type="text" fullWidth />

        </FormGroup>

        <FormGroup sx={{mb: 2}}>

             <FormLabel sx={{mb: 1}} >Gender </FormLabel>

           <Select label="Gender">

               <MenuItem value={"male"}>Male</MenuItem>

               <MenuItem value={"Female"}>Female</MenuItem>

               <MenuItem value={"Others"}>Others</MenuItem>

                         </Select>

        </FormGroup>

        <FormGroup sx={{mb: 2}}>

             <FormLabel sx={{mb: 1}} >Date Of Birth</FormLabel>

             <TextField  FormLabel="Surname" required  type="date"   fullWidth/>

        </FormGroup>





        <FormGroup sx={{mb: 2}}>

             <Button variant="contained">Submit</Button>

        </FormGroup>

    </FormControl>

    </Stack>

</>

    )

}

export default SignUp;

Other Features

So far, we are almost done with the tutorial. However, this is just a beginner guide and we didn’t exhaust all the goodies material UI has to offer in this single tutorial. To know more about Material UI and its other functionalities, I would love to recommend some useful materials which were helpful to me. I sure do hope that they also help you as well.

  • Material UI documentation

  • StackOverflow

  • Material UI Cookbook PDF

  • Lama Dev YouTube channel

    Conclusion

So we have been able to learn about material UI basics and build a minimalistic but aesthetic sign up form with our new knowledge. I sincerely hope you learnt and enjoyed this innovative tutorial on Material UI . Feel free to check out my other articles on similar topics here. Till next time, keep on coding.

material uireact beginner