Skip to main content
react-theme-using-material-ui

React Layout Using Material Design

This React.js tutorial helps to create a layout theme using material design. I am using the material-ui react component to create a beautiful theme using React. These React components are based on Google’s Material Design. Material Design is very popular for web and mobile applications.

Material-UI React components libraries can be found at: https://material-ui.com.

Create React Theme Using Google Material Design

We will create a header, footer, and home component, It’s a simple layout for any website or application. The header and footer is the partial file that can be used in any other component. I am not creating a layout file since we do not use the sidebar.

So we have two reusable components: Header and Footer.

Also Checkout other tutorials of React.js,

Create React APP Using npx

Let’s create a 'material-design-example' react app using npx. The npx is a package runner tool that comes with npm (Node Package Manager) and is used to execute binaries from npm packages. You can use the following command to create an app:

$ npx create-react-app material-design-example

The above command will create a new React project with a basic structure and development environment.

Let’s navigate to the newly created project folder using the following command:

$ cd material-design-example

Now run npm start, The browser opens up and You will see the default React application is loaded and displaying a ‘hello message’.

You can access your React app in a web browser at http://localhost:3000.

How To Install Material UI in React.JS

Now open index.html file and include robot font and icon libs:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Installing Material-UI Library

We will install the Material-UI library and dependencies using npm or yarn, which are package managers commonly used with React applications.

$npm install @mui/material @mui/icons-material

The above command will download all components and dependencies into the node_modules folder.

We will change the existing folder structure and use it below.

  • src
    • Components
      • App
        • index.js
        • style.css
      • Shared
        • Header.js
        • Footer.js
      • Home
        • index.js

Create Header and Footer Component For React Layout

We will create header and footer components. These components will help maintain consistency across your application.

Create a Shared folder inside the src/Components directory to keep your shared components organized.

Create Header Component

First, we will create a Header.js file under src/Component/Shared folder. We will use AppBar, Toolbar and MenuIcon React components to create home navigation. We will add the below code to this file.

import React from 'react';
import {
  AppBar,
  Toolbar,
  IconButton,
  InputBase,
  Typography,
} from '@material-ui/core';
import MenuIcon from '@material-ui/icons/Menu';
import SearchIcon from '@material-ui/icons/Search';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import { fade } from '@material-ui/core/styles/colorManipulator';

const styles = theme => ({
  grow: {
    flexGrow: 1,
  },
  search: {
    position: 'relative',
    marginLeft: '8px',
    width: 'auto',
    float: 'left',
    borderRadius: theme.shape.borderRadius,
    backgroundColor: fade(theme.palette.common.white, 0.15),
    '&amp;:hover': {
      backgroundColor: fade(theme.palette.common.white, 0.25),
    },
  },
   searchIcon: {
    width: 119,
    height: '100%',
    position: 'absolute',
    pointerEvents: 'none',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  inputRoot: {
    color: 'inherit',
    width: '100%',
  },
  inputInput: {
    paddingTop: theme.spacing.unit,
    paddingRight: theme.spacing.unit,
    paddingBottom: theme.spacing.unit,
    paddingLeft: theme.spacing.unit * 10,
    transition: theme.transitions.create('width'),
    width: '100%',
    [theme.breakpoints.up('sm')]: {
      width: 120,
      '&amp;:focus': {
        width: 200,
      },
    },
  }
});
class Header extends React.Component {
  render() {
  const { classes } = this.props;
  return (<appbar position="static">
     <toolbar>
          <iconbutton color="inherit" aria-label="Open drawer">
            <menuicon>
          </menuicon></iconbutton>
          <typography variant="h6" color="inherit" nowrap="">
            React Material-UI
          </typography>

<div classname="{classes.grow}/">

<div classname="{classes.search}">

<div classname="{classes.searchIcon}">
              <searchicon>
            </searchicon></div>

            <inputbase placeholder="Search…" classes="{{" root:="" classes.inputroot,="" input:="" classes.inputinput,="" }}="">
          </inputbase></div>

        
  
  );
}
}

Header.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(Header);
</div>
</toolbar></appbar>

Customize the content and styling as per your project requirements

Create Footer Component

Create a Footer.js file under src/Component/Shared folder. We will use Paper React components to create an attractive footer for the theme. We will add the below code to this file.

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';

const styles = theme => ({
  root: {
    ...theme.mixins.gutters(),
    paddingTop: theme.spacing.unit * 2,
    paddingBottom: theme.spacing.unit * 2,
  },
  footer: {
    backgroundColor: theme.palette.background.paper,
    marginTop: theme.spacing.unit * 8,
    padding: `${theme.spacing.unit * 6}px 0`,
  }
});

function Footer(props) {
  const { classes } = props;

  return (
    <footer classname="{classes.footer}">
      <paper classname="{classes.root}" elevation="{1}">
        <typography variant="h5" component="h3">
          React App with Material UI
        </typography>
        <typography component="p">
          @2018 All right reserved
        </typography>
      </paper>
    </footer>
  );
}

Footer.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(Footer);

Create Home Component

Let’s create a index.js file under src/Component/Home folder. We will create a simple message to notify you that the home component has been rendered.

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';

const styles = theme => ({
  content: {
  	 ...theme.mixins.gutters(),
    backgroundColor: theme.palette.background.paper,
    paddingTop: theme.spacing.unit * 2,
    paddingBottom: theme.spacing.unit * 2,
     
  }
});
function Home(props) {
  const { classes } = props;
  return (

<div classname="{classes.content}">
        <typography variant="h5" component="h3">
          Welcome Home!
        </typography>
</div>

  );
}

Home.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(Home);

Create Layout Using Header, Footer and Home Component

We will use all Header, Footer, and Home Component in app.js file, We will import all these components and use them into App.js, Open app.js file and add the below code:

import React, { Component } from 'react'
import Header from './Components/Shared/Header'
import Footer from './Components/Shared/Footer'
import Home from './Components/Home'
class App extends Component {
  render() {
    return (

<div>
        <header>
        <home>
        <footer>
      </footer></home></header>
</div>

    )
  }
}
export default App

Conclusion:

We have successfully created Header, Footer and Home components for a React layout. These components are essential for maintaining a consistent design throughout your application. We have kept all common components in the shared folder.

3 thoughts to “React Layout Using Material Design”

Leave a Reply

Your email address will not be published. Required fields are marked *