Step 1: Run your first react app and try to use VS code and use VS terminal to run node commands.
step 2: create working folder to store react app using the command : “npx create-react-app folder Name”.
step 3:Create database in firebase add project in firebase and run the command on the terminal “npm install -g firebase-tools”.
step 4:Delete tests folders and logo.svg file created by react.
step 5:Add our header name in app.js file.
step 6:Delete all the contents from app.css file.
step 7:Add * {
margin:0;
}
in index.css file.
step 8:Run first edited project.
step 9:After step 3 create a folder inside src file to store some code used in the firebase.
The above content will be displayed after executing all the steps.
step 10:Add header and home components in the folder app.js.
step 11:Create component Header.js inside src file.
The Header.js component is used to create the picture in the form :
step 12:Install ES7 in VS code and type rfce and click enter insider Header.js component.
step 13:Create Header.css component inside src file.
From the header we need to add:
- AMAZON logo
- Search bar + search input fields and there childrens.
step 12: Add image src and use amazon logo.
step 13: Add header search class name to create header search bar.
step 14:Inside the header search add the input text form field.
step 15:Create header navigation class.
step 16:Inside the header navigation class add 3 div’s and add appropriate class names to 3 of them.
step 17:Import the Header component file in app.js.
step 18:Style the Header component in Header.style component.
step 19:Install material ui and material ui icons.
step 20:After implementing css established on header field we got the final output as:
step 21: Creating body of the site.
step 22:Create the next component called Home.js inside src file.
The Home container is used to create:
