Steps to create React Application And Installing Module
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
Step 3: After creating the React.js application, install the material-ui modules using the following command.
npm i @material-ui/core @mui/icons-material @mui/material @mui/styled-engine @emotion/react @emotion/styled
Project Structure:
The updated dependencies in package.json file will look like.
"dependencies": {
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@material-ui/core": "^4.12.4",
"@mui/icons-material": "^5.14.18",
"@mui/material": "^5.14.18",
"@mui/styled-engine": "^5.14.18",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
Example: This example uses Material UI AppBar and Toolbar Components to implement a Header in the application.
Javascript
// Filename - App.js import React from "react" ; import Header from "./Header" ; function App() { return ( // Using the newly created Header // component in this main component <Header /> ); } export default App; |
Javascript
// Filename - Header.js import * as React from "react" ; // importing material UI components import AppBar from "@mui/material/AppBar" ; import Toolbar from "@mui/material/Toolbar" ; import Typography from "@mui/material/Typography" ; import Button from "@mui/material/Button" ; import IconButton from "@mui/material/IconButton" ; import MenuIcon from "@mui/icons-material/Menu" ; export default function Header() { return ( <AppBar position= "static" > <Toolbar> { /*Inside the IconButton, we can render various icons*/ } <IconButton size= "large" edge= "start" color= "inherit" aria-label= "menu" sx={{ mr: 2 }} > { /*This is a simple Menu Icon wrapped in Icon */ } <MenuIcon /> </IconButton> { /* The Typography component applies default font weights and sizes */ } <Typography variant= "h6" component= "div" sx={{ flexGrow: 1 }} > w3wiki Header </Typography> <Button color= "inherit" >Login</Button> </Toolbar> </AppBar> ); } |
Step to run the application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
How to create Header in React JS ?
The Header is an important element of a website’s design. It’s the first impression of the website. It provides useful links to other areas of the website that the user may want to visit. In this article, we will create a functioning Header using React JS and Material UI.
Contact Us