How To Create Material UI In React

Introduction

In this article, we will learn to create a new ReactJs project using npm new command and then we will install material design. After that, we will create a simple AppBar and List example in Visual Studio code 

Steps to follow,

Now we will start by creating a new project. 

Step 1 

Create a React project setup using the below commands or however, you create your React app. 

npx create-react-app projectname    

Example, 

npx create-react-app sample-material 

Step 2 - Installing Material UI 

Material-UI is simply a library that allows us to import and use different components to create a user interface in our React applications. 

Run the below command in the terminal.  

npm install @material-ui/core 

How to Create Material UI in React

Run the below command in the terminal.  

npm install @material-ui/core 

Run the command below to use Material-UI icons in our project. 

npm install @material-ui/icon 

Step 3

Now, we will import the above component into the app.js file 

import AppBar from '@material-ui/core/AppBar'; 
import Toolbar from '@material-ui/core/Toolbar'; 
import Typography from '@material-ui/core/Typography'; 
import List from '@material-ui/core/List'; 
import ListItem from '@material-ui/core/ListItem'; 
import ListItemText from '@material-ui/core/ListItemText'; 

The app bar lets us display information and action relevant for the current screen. 

<AppBar position="static"> 
    <Toolbar> 
        <Typography variant="title" color="inherit"> 
            BasicList 
        </Typography> 
      <div style={{ flex: '1 1 0px' }} /> 
   </Toolbar> 
</AppBar> 

We add an AppBar component with a Toolbar inside to add content to it. 

List

Lists are a continuous group of text or images. They are composed of items containing primary and supplemental actions, which are represented by icons and text 

<List className="list" component="nav"> 
 { 
   this.state.list.map((item, i) => { 
   return ( 
      <ListItem key={'item_' + i} button className={this.isSelected(i) ? 'selected' : null} onClick={() => this.onSelected(i)}> 
           <ListItemText primary='item' ></ListItemText> 
           <ListItemText className="side" secondary={item}></ListItemText> 
       </ListItem> 
       ) 
    }) 
   } 
</List>    

Step 4 - Src/App.js

import React from 'react'; 
import AppBar from '@material-ui/core/AppBar'; 
import Toolbar from '@material-ui/core/Toolbar'; 
import Typography from '@material-ui/core/Typography'; 
import List from '@material-ui/core/List'; 
import ListItem from '@material-ui/core/ListItem'; 
import ListItemText from '@material-ui/core/ListItemText'; 
class App extends React.Component { 
  constructor(props) { 
    super(props); 
   //  letss list = []; 
    this.state = { 
      list: [1,2,3,4,5,6,7,8,9,10], 
      selectedIndex: null, 
    } 
  } 
  onSelected(item) { 
    this.setState({ selectedIndex: item }); 
  } 
  isSelected(item) { 
    return this.state.selectedIndex === item; 
  } 
  render() { 
    return ( 
      <div> 
        <AppBar position="static"> 
          <Toolbar> 
            <Typography variant="title" color="inherit"> 
             BasicList 
          </Typography> 
            <div style={{ flex: '1 1 0px' }} /> 
          </Toolbar> 
        </AppBar> 
        {this.state.list.length < 1 &&  
          this.getEmptyComponent() 
        } 
        <List className="list" component="nav"> 
          { 
            this.state.list.map((item, i) => { 
              return ( 
                <ListItem key={'item_' + i} button className={this.isSelected(i) ? 'selected' : null} onClick={() => this.onSelected(i)}> 
                  <ListItemText primary='item' ></ListItemText> 
                  <ListItemText className="side" secondary={item}></ListItemText> 
                </ListItem> 
              ) 
            }) 
          } 
        </List>    
      </div> 
    ); 
  } 
}   
export default App; 

Step 5

Now we will run the application. 

npm run start 

How to Create Material UI in React

On successful execution of the above command, it will show the browser, 

How to Create Material UI in React

Recommended Ebook

Printing in C# Made Easy

Download Now!
Similar Articles