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 

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 

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