React Material UI

In this article, we are going to learn about what Material UI library is and how to install a Material UI library in React web applications.

Material Design is a language of design that was introduced by Google in 2014 for creating more complex, responsive web applications and mobile applications. To use material design in React web applications we need to installa  Material UI library in our project. The Material UI open source library provides a set of components that we can use in React applications. We can customize the theme and components of Material UI library.
 
Official website
 
https://material-ui.com
 
Prerequisites
Steps for Material UI installation:
 
Steps 1
 
To install Material UI library, we need to create a React application.
 
Execute the following npm command to create a web application.
 
npx create-react-app reactjs-materailui
 
Create a project
 
Steps 2
 
Now, change the project directory and run development server.
 
Use the below command,
 
cd reactjs-materailui
npm start
 
Run npm command
 
After successful execution of the above command, it will automatically open the browser and run your newly created application on the browser.
 
Default URL :- http://localhost:3000/
 
Startup page of React application,
 
Default screen of react app
 
Steps 3
 
Next, we need to install Material UI library by using the below command,
 
npm install @material-ui/core
 
Install material UI lib
 
Steps 4
 
We need to import/install Roboto Font in our application. (Material UI library was designed with Roboto font.)
 
using CDN: - add below CDN link into index.html
 
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
 
Index page
 
Using install library
 
Execute the below command,
 
npm install typeface-roboto –save
 
Import following line of code into index.js file (Need to import into entry point)
 
import 'typeface-roboto';
 
Steps 5
 
Import Material icons to use the font icon component. Execute the below command to install icons.
 
npm install @material-ui/icons
 
Steps 6
 
Now, it;s time to open your project in code editor. Execute the below command to open created project in Visual Studio code.
 
code .
 
Open vs code editor
 
Steps 7
 
Check material UI library and Roboto font entry into package.json file
 
package josn file
 
Let’s create a login form using Material UI,
 
In this example, I am going to create a basic login form UI using Material UI library so that you will get an idea about how to add component in React applications and how to use that component in project code.
 
Demo screen
Demo login form
Remove existing code from App.js file and add a basic code like below,
  1. import React from 'react';  
  2. class App extends React.Component {  
  3.    render() {  
  4.       return (  
  5.       );  
  6.    }  
  7. }  
  8. export default App;  
To add text box for email address and password field, import TextField component from Material UI library. To add button for login form we should import Button component, similarly Grid component for grid layout, Typography for heading. Import the below line of code into App.js file
  1. import TextField from '@material-ui/core/TextField';  
  2. import Button from '@material-ui/core/Button';  
  3. import Grid from '@material-ui/core/Grid';  
  4. import Typography from '@material-ui/core/Typography';  
To create a textbox for email address we need to add TextField component in App component of App.js. Add TextField tag like below code in App component.
 
Code
  1. class App extends React.Component {  
  2.    render () {  
  3.       return (  
  4.          <TextField  
  5.             variant="outlined"  
  6.             margin="normal"  
  7.             label="Email Address"  
  8.          />  
  9.       );  
  10.    }  
  11. }  
  12. export default App;  
Text box
Similarly, add <Button /> tag and <Grid /> tag for creating button and grid layout.
 
Complete Code
  1. import React from 'react';  
  2. import Button from '@material-ui/core/Button';  
  3. import TextField from '@material-ui/core/TextField';  
  4. import Grid from '@material-ui/core/Grid';  
  5. import Typography from '@material-ui/core/Typography';  
  6. import 'typeface-roboto';  
  7. class App extends React.Component {  
  8.    handleLogin = () => {  
  9.    alert("Login form example using MATERIAL UI");  
  10. }  
  11. render() {  
  12.    return (  
  13.       <Grid  
  14.          container  
  15.          spacing={0}  
  16.          direction="column"  
  17.          alignItems="center"  
  18.          justify="center"  
  19.          style={{ minHeight: '100vh' }}  
  20.          >  
  21.    <Typography component="h1" variant="h5">  
  22.       Log in  
  23.    </Typography>  
  24.    <form onSubmit={this.handleLogin}>  
  25.    <TextField  
  26.       variant="outlined"  
  27.       margin="normal"  
  28.       fullWidth  
  29.       label="Email Address"  
  30.    />  
  31.    <TextField  
  32.       variant="outlined"  
  33.       margin="normal"  
  34.       fullWidth  
  35.       label="Password"  
  36.       type="password"  
  37.    />  
  38.    <Button  
  39.       type="submit"  
  40.       fullWidth  
  41.       variant="contained"  
  42.       color="primary"  
  43.       >  
  44.       Log In  
  45.       </Button>  
  46.    </form>  
  47.   </Grid>  
  48.   );  
  49.  }    
  50. }  
  51. export default App;  
Output
Login form design
You can see I have created a basic login form design using Material UI library. Design is looking nice and responsive with proper spacing, coloring, and heading.
 

Summary

 
In this article, I discussed Material UI library and how to install Material UI library in React web applications. At the end of this article, we saw how to add Material UI components in React web applications and an example of basic login form design.