Components of a Ecom Website
1) Header
2) Carousel(Slider)
3) Product Card
4) Product listing
5) Search
6) Cart
7) AddToCart
8) Checkout page
9) Wishlist
10)Categories
11) Payment
Can I build it completely using HTML Css and JS
Yes(Absolutely hard)
API call to the backend
Get the data and display the data on the frontend
Javascript- Creation of DOM using JS
document.createElement(div)
React
Advantages
Virtual DOM
Code Reusability
Component(Part of point 2)
Uni Directional
Single page application(React router)
Disadvantages
Bad SEO(Search Engine optimisation)
Search Engine optimisation
Bots would crawl your website and check for
1) Tags
a) Heading
b) Paragraphs
2) Meta tags to tell the bot about your website
Next js - (https://nextjs.org/)
Npx create-react-app <name>
Vite
Webpack
https://codesandbox.io/
Component in React
1) function
2) Html written inside javascript is known as JSX(Javascript xml notation)
3) Return jsx
4) Export the function to be used wherever it is needed
JSX and js can be used interchangeably both work JSX is better so that you know it is
a react component
Add function
function add() {
return 2+3;
}
Making it dynamic
function add(a,b) {
return a+b;
}
Arguments in react are passed using something known as Props
props would be passed as on object
When you want to get the data you would have to create an API and the API would be
returning the data to the frontend from the backend
https://designer.mocky.io/design/confirmation
Mock api creation website
How to make an API call?
1) Fetch
2) Axios
3) AJAX (https://www.w3schools.com/js/js_ajax_http.asp)
Interview question
1) Build your own fetch
JSON
[
{
"id": 1,
"category": 1,
"title": "Apple iPhone 14",
"price": 100000
},
{
"id": 2,
"category": 1,
"title": "Apple iPhone 13",
"price": 70000
},
{
"id": 3,
"category": 1,
"title": "Google Pixel 7",
"price": 50000
},
{
"id": 4,
"category": 1,
"title": "Nokia 1100",
"price": 2000
},
{
"id": 5,
"title": "Samsung Galaxy S10",
"price": 100000
},
{
"id": 6,
"category": 1,
"title": "Sony Xperia S10",
"price": 100000
},
{
"id": 7,
"category": 2,
"title": "Apple Macbook Air M1",
"price": 120000
},
{
"id": 8,
"category": 2,
"title": "HP Pavilion E5",
"price": 70000
},
{
"id": 9,
"category": 3,
"title": "Tshirt",
"price": 1000
},
{
"id": 10,
"category": 3,
"title": "Jeans",
"price": 7000
}
]
How to get the data to be printed on the screen
1) Wait for the data (you are not taking advantage of the async behaviour of
js)
2) Rerender the component once data arrives
Hooks in JS
Helper function
Helper
Is used to remove the redundant tasks and provide them in a simple function
Something that is going to happen again and again would be put in a hook
useState hook
Lets you create a state variable
State
1) Once set it would be retained over the rerenders
2) Once set it would cause a rerender
let [products, setProducts] = useState([]);
useState would return a state variable and a function to set that state variable
Products = []; // wrong
setProducts([]) // correct
I want to call the fetch function only one on the first function call and not again and
again
In order to achieve the above you have another hook
useEffect- This is going to control the amount of times a function would be called basis
a dependency array
Only once
useEffect(function(){
}, [])
everytime
useEffect(function(){
})
every time the state variable is changed
useEffect(function(){
}, [products])
Every time products is changes the function inside useEffect would be called again and
again
Folder structure of our application
1) Components
a) ComponentName
i) ComponentName.jsx
ii) ComponentName.css
iii) index.js
2) Pages
a) PageName
i) PageName.jsx
ii) PageName.css
iii) index.js
3) Utils
4) Context
5) Hooks
What advantage does index.js bring?
import Products from './components/Products/';
Find products.js or products.jsx
If this is not found then
Find folder with name Products
index.js
https://www.freecodecamp.org/news/javascript-modules/
AddToCart Component
Two buttons + and -
Show quantity
Single button when quantity is 0
Create a state of cart
I would create this state variable in the top most parent that is app.js in our case
Data structure of the cart?
Array of objects
Object of objects
let cart = {
1: {
Id: 1,
title: “samsung”,
Price: “20000”,
Quantity: 2,
},
2: {
Id: 2,
title: “samsung2”,
Price: “30000”,
Quantity: 1,
}
cart[product.id].quantity += 1
Prop drilling: Process of passing a prop from the top most parent down to the place
where it is needed to be used is known as prop drilling
Context:
I will provide you with a wrapper (psuedo parent) which could be used to provide all the
global state and functions to all the children.
Features needed from context
1. Psuedo Parent(Provider)
2. Access the values set in the context
3. Way to set these values
Redux, MobX
Things to be done in increasing and decreasing quantity ?
If the quantity of product is 0
1) Show add to cart button
2) Once value is greater than 0 show + and - with quantity
3) If value is 0 in the add to cart function create an object for that particular
product and add to cart
4) If the value is greater than 0 then just increment the quantity of the product
available in cart
5) Decrease the value of quantity by 1 till it not 0
6) Once it is 0 remove the product(object) from the cart.
If you are changing anything in the state variable then the component would be
rerendered?
State variable having a value 10 a is 10
20
Rerender
A is 10 and you change to 10
State variable is
let cart = {
1: {
Id: 1,
title: “samsung”,
Price: “20000”,
Quantity: 2,
},
2: {
Id: 2,
title: “samsung2”,
Price: “30000”,
Quantity: 1,
}
}
let newCart = cart;
Passed by reference
let newCart = {...cart};
React wont know for change of a key that something in the object has changed because
the object keys cant be compared for rerendered
In case of object you need to change the reference
https://javascript.info/currying-partials
https://www.thatjsdude.com/
https://www.toptal.com/javascript/interview-questions
1) Keys
2) Virtual dom
3) Hooks
4) Context
5) Redux
6) State management
7) Custom hook
https://github.com/siddharthInterviewbit/Ecom-Masterclass
