Material UI | ReactJS AppBar

27 Nov, 2020
Material-UI is a library that provides React components for easy and fast web development. We can easily put together really aesthetic and functional components and make it work according to our use as all the components are configurable. This saves a lot of time as we don’t have to struggle with CSS to make things presentable. Material-UI components work in isolation. They are self-supporting, and will only inject the styles they need to display. 
You’ll learn how to set up and use Material-UI in your React web application as we build a demo ” Sign In ” application.
As you can see the user interface consists of material design elements. We’ll use Material-UI components to display a Sign In form to the user. The application consists of an App Bar on top which contains the title of the application, two text field which is used to input email and password and a Button to Sign In.
Generating The React Project: First, we need to create a new React project. This can be done by using the create-react-app script in the following way:
npx create-react-app signin-material-ui
After executing this command a new project directory signin-material-UI is available. Change into the newly created project folder and you’ll find the React starter project.
Start your React project by:
npm start
Installing Material-UI Library & Dependencies: To be able to use Material-UI components we have to make sure that we have installed it on our project which can be done by:
npm install @material-ui/core
Implementing The Sample Application: Deleting The Default Content, before starting building our project we need to delete the default contents of the project responsible for the start screen by:
Select all files in the src folder and delete them.
Create a new file index.js in the src folder.
Now we can add our own code to the index.js file.
Components we will be using :
Importing Above Components: We have to import these components before we can make use of them in our project by writing import statements for every component in our index.js file along with necessary import statements of React and ReactDOM.JavascriptJavascriptimport React from "react";import ReactDOM from "react-dom";import AppBar from "@material-ui/core/AppBar";import Toolbar from "@material-ui/core/Toolbar";import Button from "@material-ui/core/Button";import TextField from "@material-ui/core/TextField";import FormControlLabel from "@material-ui/core/FormControlLabel";import Checkbox from "@material-ui/core/Checkbox";import Link from "@material-ui/core/Link";import Grid from "@material-ui/core/Grid";import Typography from "@material-ui/core/Typography";import Container from "@material-ui/core/Container";Creating  Signing function: First, we will create a container element inside the SignIn function which will be used in wrapping all the components.JavascriptJavascriptfunction SignIn(){return(    <Container component="main" maxWidth="xs">        <div>        .        .        .        </div>    </Container>    )}  ReactDOM.render(<SignIn />, document.getElementById("root"));Creating an App Bar component:JavascriptJavascript<AppBar position="static">          <Toolbar>            <Typography variant="h6">Sign In</Typography>          </Toolbar></AppBar>Output: We did not included any component, there is only a title.Creating Sign In form component: The form will contain two text fields each for email and password, a remember me checkbox, a Sign In button, and some links.JavascriptJavascript<form noValidate>                // Email Textfield          <TextField            variant="outlined"            margin="normal"            required            fullWidth            id="email"            label="Email Address"            name="email"            autoComplete="email"            autoFocus          />                      // Password Textfield          <TextField            variant="outlined"            margin="normal"            required            fullWidth            name="password"            label="Password"            type="password"            id="password"            autoComplete="current-password"          />                      // Remember Me Checkbox          <FormControlLabel            control={<Checkbox value="remember"                                color="primary" />}            label="Remember me"          />                      // Sign In button          <Button type="submit"                   fullWidth variant="contained"                   color="primary">             Sign In          </Button>          <Grid container>            <Grid item xs>                            // Forgot Password link              <Link href="#" variant="body2">                Forgot password?              </Link>            </Grid>            <Grid item>                            // Sign Up Link              <Link href="#" variant="body2">                 {"Don't have an account? Sign Up"}              </Link>            </Grid>          </Grid>        </form>Output: By making this component, we have completed our project. 
Importing Above Components: We have to import these components before we can make use of them in our project by writing import statements for every component in our index.js file along with necessary import statements of React and ReactDOM.JavascriptJavascriptimport React from "react";import ReactDOM from "react-dom";import AppBar from "@material-ui/core/AppBar";import Toolbar from "@material-ui/core/Toolbar";import Button from "@material-ui/core/Button";import TextField from "@material-ui/core/TextField";import FormControlLabel from "@material-ui/core/FormControlLabel";import Checkbox from "@material-ui/core/Checkbox";import Link from "@material-ui/core/Link";import Grid from "@material-ui/core/Grid";import Typography from "@material-ui/core/Typography";import Container from "@material-ui/core/Container";
Importing Above Components: We have to import these components before we can make use of them in our project by writing import statements for every component in our index.js file along with necessary import statements of React and ReactDOM.
Javascript
import React from "react";import ReactDOM from "react-dom";import AppBar from "@material-ui/core/AppBar";import Toolbar from "@material-ui/core/Toolbar";import Button from "@material-ui/core/Button";import TextField from "@material-ui/core/TextField";import FormControlLabel from "@material-ui/core/FormControlLabel";import Checkbox from "@material-ui/core/Checkbox";import Link from "@material-ui/core/Link";import Grid from "@material-ui/core/Grid";import Typography from "@material-ui/core/Typography";import Container from "@material-ui/core/Container";
Creating  Signing function: First, we will create a container element inside the SignIn function which will be used in wrapping all the components.JavascriptJavascriptfunction SignIn(){return(    <Container component="main" maxWidth="xs">        <div>        .        .        .        </div>    </Container>    )}  ReactDOM.render(<SignIn />, document.getElementById("root"));
Creating  Signing function: First, we will create a container element inside the SignIn function which will be used in wrapping all the components.
Javascript
function SignIn(){return(    <Container component="main" maxWidth="xs">        <div>        .        .        .        </div>    </Container>    )}  ReactDOM.render(<SignIn />, document.getElementById("root"));
Creating an App Bar component:JavascriptJavascript<AppBar position="static">          <Toolbar>            <Typography variant="h6">Sign In</Typography>          </Toolbar></AppBar>Output: We did not included any component, there is only a title.
Creating an App Bar component:
Javascript
<AppBar position="static">          <Toolbar>            <Typography variant="h6">Sign In</Typography>          </Toolbar></AppBar>
Output: We did not included any component, there is only a title.
Creating Sign In form component: The form will contain two text fields each for email and password, a remember me checkbox, a Sign In button, and some links.JavascriptJavascript<form noValidate>                // Email Textfield          <TextField            variant="outlined"            margin="normal"            required            fullWidth            id="email"            label="Email Address"            name="email"            autoComplete="email"            autoFocus          />                      // Password Textfield          <TextField            variant="outlined"            margin="normal"            required            fullWidth            name="password"            label="Password"            type="password"            id="password"            autoComplete="current-password"          />                      // Remember Me Checkbox          <FormControlLabel            control={<Checkbox value="remember"                                color="primary" />}            label="Remember me"          />                      // Sign In button          <Button type="submit"                   fullWidth variant="contained"                   color="primary">             Sign In          </Button>          <Grid container>            <Grid item xs>                            // Forgot Password link              <Link href="#" variant="body2">                Forgot password?              </Link>            </Grid>            <Grid item>                            // Sign Up Link              <Link href="#" variant="body2">                 {"Don't have an account? Sign Up"}              </Link>            </Grid>          </Grid>        </form>Output: By making this component, we have completed our project. 
Creating Sign In form component: The form will contain two text fields each for email and password, a remember me checkbox, a Sign In button, and some links.
Javascript
<form noValidate>                // Email Textfield          <TextField            variant="outlined"            margin="normal"            required            fullWidth            id="email"            label="Email Address"            name="email"            autoComplete="email"            autoFocus          />                      // Password Textfield          <TextField            variant="outlined"            margin="normal"            required            fullWidth            name="password"            label="Password"            type="password"            id="password"            autoComplete="current-password"          />                      // Remember Me Checkbox          <FormControlLabel            control={<Checkbox value="remember"                                color="primary" />}            label="Remember me"          />                      // Sign In button          <Button type="submit"                   fullWidth variant="contained"                   color="primary">             Sign In          </Button>          <Grid container>            <Grid item xs>                            // Forgot Password link              <Link href="#" variant="body2">                Forgot password?              </Link>            </Grid>            <Grid item>                            // Sign Up Link              <Link href="#" variant="body2">                 {"Don't have an account? Sign Up"}              </Link>            </Grid>          </Grid>        </form>
Output: By making this component, we have completed our project. 
Complete Code: This is index.js if you clear the src folder and created a single indes.js file.
Javascript
import React from "react";import ReactDOM from "react-dom";import AppBar from "@material-ui/core/AppBar";import Toolbar from "@material-ui/core/Toolbar";import Button from "@material-ui/core/Button";import TextField from "@material-ui/core/TextField";import FormControlLabel from "@material-ui/core/FormControlLabel";import Checkbox from "@material-ui/core/Checkbox";import Link from "@material-ui/core/Link";import Grid from "@material-ui/core/Grid";import Typography from "@material-ui/core/Typography";import Container from "@material-ui/core/Container";  function SignIn() {  return (    <Container component="main" maxWidth="xs">      <div>        <AppBar position="static">          <Toolbar>            <Typography variant="h6">                Sign In            </Typography>          </Toolbar>        </AppBar>        <form noValidate>          <TextField            variant="outlined"            margin="normal"            required            fullWidth            id="email"            label="Email Address"            name="email"            autoComplete="email"            autoFocus          />          <TextField            variant="outlined"            margin="normal"            required            fullWidth            name="password"            label="Password"            type="password"            id="password"            autoComplete="current-password"          />          <FormControlLabel            control={<Checkbox value="remember"                                color="primary" />}            label="Remember me"          />          <Button type="submit"                   fullWidth variant="contained"                   color="primary">            Sign In          </Button>          <Grid container>            <Grid item xs>              <Link href="#" variant="body2">                Forgot password?              </Link>            </Grid>            <Grid item>              <Link href="#" variant="body2">                {"Don't have an account? Sign Up"}              </Link>            </Grid>          </Grid>        </form>      </div>    </Container>  );}  ReactDOM.render(<SignIn />, document.getElementById("root"));
Output:
Material-UI
Picked
react-js
Technical Scripter 2020
JavaScript
Technical Scripter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Remove elements from a JavaScript Array
Roadmap to Learn JavaScript For Beginners
Difference Between PUT and PATCH Request
JavaScript | Promises
How to filter object array based on attributes?
Lodash _.debounce() Method
JavaScript String includes() Method
Async/Await Function in JavaScript
JavaScript | fetch() Method