How to implement Material UI in React?

Material-UI is a library that provides React components for easy and fast web development. So, in this article, we will see how to implement Material UI in React.

How to implement Material UI in React?

We can easily put together really beautiful components and make them work according to our use as all the components are configurable. This saves a lot of time as we dont have to struggle with CSS to make things presentable. Material-UI components work in isolation. They are self-supporting, and will only inject the styles they need to display.

Youll learn how to set up and use Material-UI in your React web application as we build a demo Sign In application.

As you can see the user interface consists of material design elements. Well use Material-UI components to display a Sign In form to the user. The application consists of an App Bar on top which contains the title of the application. Then you can use two text fields to input email and password and a Button to Sign In.

Generating The React Project:

First, we need to create a new React project. This can be done by using the create-react-app script in the following way:

npx create-react-app signin-material-ui
After executing this command a new project directory sign in-material-UI is available. Change into the newly created project folder and youll find the React starter project. Start your React project by:

npm start
Installing Material-UI Library & Dependencies:
To use Material-UI components we have to make sure that we have installed them on our project which can be done by:

npm install @material-ui/core
Implementing The Sample Application: Before starting building our project we need to delete the default contents of the project responsible for the start screen by:

Select all files in the src folder and delete them.
Create a new file index.js in the src folder.
So, now we can add our own code to the index.js file.

Example:

Create Signing function: First, we will create a container element inside the SignIn function. Also, this will be used in wrapping all the components.

function SignIn(){
return(


.
.
.


)
}

ReactDOM.render(, document.getElementById("root"));

Creating an App Bar component:

Sign In


Creating Sign In form component: The form will contain two text fields each for email and password, a remember me checkbox, a Sign In button, and some links.

      // Email Textfield      // Password Textfield      // Remember Me Checkbox      }        label="Remember me"      />      // Sign In button        Sign In          // Forgot Password link            Forgot password?          // Sign Up Link            {"Don't have an account? Sign Up"}

Complete Code:

So, this is index.js if you clear the src folder and create a single indes.js file.

import React from "react";
import ReactDOM from "react-dom";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Button from "@material-ui/core/Button";
import TextField from "@material-ui/core/TextField";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Checkbox from "@material-ui/core/Checkbox";
import Link from "@material-ui/core/Link";
import Grid from "@material-ui/core/Grid";
import Typography from "@material-ui/core/Typography";
import Container from "@material-ui/core/Container";

function SignIn() {
return (





Sign In




variant="outlined"
margin="normal"
required
fullWidth
id="email"
label="Email Address"
name="email"
autoComplete="email"
autoFocus
/>
variant="outlined"
margin="normal"
required
fullWidth
name="password"
label="Password"
type="password"
id="password"
autoComplete="current-password"
/>
control={ color="primary" />}
label="Remember me"
/>
fullWidth variant="contained"
color="primary">
Sign In




Forgot password?




{"Don't have an account? Sign Up"}






);
}

ReactDOM.render(, document.getElementById("root"));

Conclusion:

So, in this article, we have been through how to implement Material UI in React. Also, feel free to comment with your suggestions and feedback on the post. Moreover, at BOSC Tech Labs, we have a team of highly experienced React JS developers. They can assist you in developing your customized web app. So contact us to hire experienced React JS developers.

Content Source: https://bosctechlabs.com/how-to-implement-material-ui/