Design Approach

Using new material UI

Introduction

Using Material UI design Layout uplift the steadiness across all the platforms, environment and also make responsive for any size of web-pages by using spacing and elements. We all may have faced sometimes instability of web-pages regarding composition components  or regarding responsiveness of web-pages. 

Design with ReactJS

We will create simple and attractive responsive login page through the help of React Material-ui library, as shown below

Using Material UI

As World is rapidly changing, so are the technologies. Nowadays it’s a bit hard to deliver requirements with Custom styling. Material UI is one of new technology which helps to design a well functionality front-end which attracts a maximum number of users. Material UI is a component library of ReactJS released in 2014 which is an open source project. Components of material UI works in isolation as they are self-supporting and only use styles which need to display

Installation

Material UI can be installed through npm or yarn for that we have to go to directory of existing React app and the run the following command:

 #With npm  

  npm install @material-ui/core

 #with yarn

  yarn add @material-ui/core

After executing the above command now we need to install contentful JavasScript Library to get access to the Contentful Back-end.

   $ npm install contentful

For digital teams, Contentful offers content infrastructure to power websites, applications, and tablets. In contrast to a CMS, Contentful was worked to incorporate with the in vogue programming stack. It provides a central hub for organised content, as well as powerful management and distribution APIs and a personalised web app, allowing developers and content creators to ship their products more efficiently.

Now we will check is everything working perfect by starting web-development server

 $ npm start

• Once you run the above command we need to install one more dependency that is Material UI Icons:- 

npm i @material-ui/icons

• Everything has been setup and working fine. Let’s create a Login component using material UI. So now we will create a component of the Login page and import in App.js.

import React from ‘react’

import { Grid, Avatar, Paper, TextField, Button, Typography, Link } from “@material-ui/core”;

import LockOutlinedIcon from ‘@material-ui/icons/LockOutlined’;

import FormControlLabel from ‘@material-ui/core/FormControlLabel’;

import Checkbox from ‘@material-ui/core/Checkbox’;

const Login = () => {

  const paperStyle = {padding :20, height :’70vh’, width :340, margin :’20px auto’}

  const avtartStyle = {backgroundColor:’#1bbd7e’}

  const btnStyle = { margin : ‘8px 0’}

  return (

     <Grid>

         <Paper elevation={10} style={paperStyle}>

             <Grid align=’center’>

                  <Avatar style={avtartStyle}><LockOutlinedIcon/></Avatar>

                  <h2>Sign In</h2>

             </Grid>

            <TextField label=’Username’ placeholder=’Enter Username’                                                                                   fullWidth required/><br></br>

             <TextField label=’Password’ placeholder=’Enter Password’ type=’password’ fullWidth required/>

             <FormControlLabel

                  control={

                      <Checkbox

                          name=”checkedB”

                          color=”primary”

                      />

                  }

              label=”Remember me”

              />

              <Button type=’submit’ color=’primary’ variant=’contained’ style={btnStyle} fullWidth>Sign In</Button>

              <Typography>

                      <Link href=”#” >Forget Password ?</Link>

              </Typography>

              <Typography>Do you have an account?

                      <Link href=”#” >Sign Up</Link>

              </Typography>

         </Paper>

     </Grid>

  )

}

export default Login;

• Now we have to call it in the App.js component.

import ‘./App.css’;

import Login from ‘./components/login’;

function App() {

 return (

   <div className=”App”>

     <h1>React App</h1>

     <Login/>  #it will display Login here

   </div>

 );

}

export default App;

Output:

Here we are getting “Login Here” and successfully imported the login component.

Now we will remove some unwanted lines as well as files from the code to make it simple. Through a material UI you won’t need to design any particular things everythings has been designed in a perfect manner. We need to import the exact items we need.

So as you can see below i did not write any long code for creating the app, i’ve used a simple component to create this app.

• And also have look of App component in App.js

 import Login from ‘./components/login’;

 function App() {

  return (

    <div className=”App”>    

      <Login/>

    </div>

  );

 }

 export default App;

And here we done with minimum effort we design a responsive login page, This is why ReactJs libraries are very compatible with developers.

Why Should We Use Material-UI?

The React component Material-UI is basically based on Material Design which is developed by Google and it allows us to create web-development which used to be faster than any other environment and easy in styling.

After developing the above small app with react material-ui i would like to address 5 most helpful points which i have noticed.

• Responsiveness  
• Flexible
• Good Documentation 
• Open Source
• Consistent Appearance 
• Regular Updates

Conclusion: The most common React UI component library is Material-UI. It’s a native and cross platform set of React components inspired by Google’s Material Design. It’s easy, light, and user-friendly, and it’s still getting updates on a regular basis. NASA, Capgemini, Bethesda, Uniqlo, and J.P. Morgan are among the businesses that use Material-UI.

Hopefully this blog helps to start with React App from scratch.

Sources:

• Material-UI: https://material-ui.com