DEV Community: hrb11182

React-Router-6

hrb11182 — Tue, 02 Aug 2022 15:42:00 +0000

Before starting to code we need to understand the file structure we are going to use in this tutorial.

Public Folder has the default files which comes with create-react-app.

src Folder it has two folders final which contains completed code and rest of the files and pages folder will be used in this tutorial.

Css code to follow along.

*,
::after,
::before {
  box-sizing: border-box;
}
/* fonts */
/* @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600&family=Montserrat&display=swap"); */

html {
  font-size: 100%;
} /*16px*/

:root {
  /* colors */
  --primary-100: #e2e0ff;
  --primary-200: #c1beff;
  --primary-300: #a29dff;
  --primary-400: #837dff;
  --primary-500: #645cff;
  --primary-600: #504acc;
  --primary-700: #3c3799;
  --primary-800: #282566;
  --primary-900: #141233;

  /* grey */
  --grey-50: #f8fafc;
  --grey-100: #f1f5f9;
  --grey-200: #e2e8f0;
  --grey-300: #cbd5e1;
  --grey-400: #94a3b8;
  --grey-500: #64748b;
  --grey-600: #475569;
  --grey-700: #334155;
  --grey-800: #1e293b;
  --grey-900: #0f172a;
  /* rest of the colors */
  --black: #222;
  --white: #fff;
  --red-light: #f8d7da;
  --red-dark: #842029;
  --green-light: #d1e7dd;
  --green-dark: #0f5132;

  /* fonts  */

  --small-text: 0.875rem;
  --extra-small-text: 0.7em;
  /* rest of the vars */
  --backgroundColor: var(--grey-50);
  --textColor: var(--grey-900);
  --borderRadius: 0.25rem;
  --letterSpacing: 1px;
  --transition: 0.3s ease-in-out all;
  --max-width: 1120px;
  --fixed-width: 600px;

  /* box shadow*/
  --shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

body {
  background: var(--backgroundColor);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: 400;
  line-height: 1.75;
  color: var(--textColor);
}

p {
  margin-bottom: 1.5rem;
  max-width: 40em;
}

h1,
h2,
h3,
h4,
h5 {
  margin: 0;
  margin-bottom: 1.38rem;
  font-family: var(--headingFont);
  font-weight: 400;
  line-height: 1.3;
  text-transform: capitalize;
  letter-spacing: var(--letterSpacing);
}

h1 {
  margin-top: 0;
  font-size: 3.052rem;
}

h2 {
  font-size: 2.441rem;
}

h3 {
  font-size: 1.953rem;
}

h4 {
  font-size: 1.563rem;
}

h5 {
  font-size: 1.25rem;
}

small,
.text-small {
  font-size: var(--small-text);
}

a {
  text-decoration: none;
}
ul {
  list-style-type: none;
  padding: 0;
}

.img {
  width: 100%;
  display: block;
  object-fit: cover;
}
/* buttons */

.btn {
  cursor: pointer;
  color: var(--white);
  background: var(--primary-500);
  border: transparent;
  border-radius: var(--borderRadius);
  letter-spacing: var(--letterSpacing);
  padding: 0.375rem 0.75rem;
  box-shadow: var(--shadow-1);
  transition: var(--transition);
  text-transform: capitalize;
  display: inline-block;
}
.btn:hover {
  background: var(--primary-700);
  box-shadow: var(--shadow-3);
}
.btn-hipster {
  color: var(--primary-500);
  background: var(--primary-200);
}
.btn-hipster:hover {
  color: var(--primary-200);
  background: var(--primary-700);
}
.btn-block {
  width: 100%;
}

/* alerts */
.alert {
  padding: 0.375rem 0.75rem;
  margin-bottom: 1rem;
  border-color: transparent;
  border-radius: var(--borderRadius);
}

.alert-danger {
  color: var(--red-dark);
  background: var(--red-light);
}
.alert-success {
  color: var(--green-dark);
  background: var(--green-light);
}
/* form */

.form {
  width: 90vw;
  max-width: 400px;
  background: var(--white);
  border-radius: var(--borderRadius);
  box-shadow: var(--shadow-2);
  padding: 2rem 2.5rem;
  margin: 3rem 0;
}
.form-label {
  display: block;
  font-size: var(--small-text);
  margin-bottom: 0.5rem;
  text-transform: capitalize;
  letter-spacing: var(--letterSpacing);
}
.form-input,
.form-textarea {
  width: 100%;
  padding: 0.375rem 0.75rem;
  border-radius: var(--borderRadius);
  background: var(--backgroundColor);
  border: 1px solid var(--grey-200);
}

.form-row {
  margin-bottom: 1rem;
}

.form-textarea {
  height: 7rem;
}
::placeholder {
  font-family: inherit;
  color: var(--grey-400);
}
.form-alert {
  color: var(--red-dark);
  letter-spacing: var(--letterSpacing);
  text-transform: capitalize;
}
/* alert */

@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}
.form h5 {
  text-align: center;
}
.form .btn {
  margin-top: 0.5rem;
}
.loading {
  width: 6rem;
  height: 6rem;
  border: 5px solid var(--grey-400);
  border-radius: 50%;
  border-top-color: var(--primary-500);
  animation: spinner 0.6s linear infinite;
}
.loading {
  margin: 0 auto;
}
/* title */

.title {
  text-align: center;
}

.title-underline {
  background: var(--primary-500);
  width: 7rem;
  height: 0.25rem;
  margin: 0 auto;
  margin-top: -1rem;
}

.section {
  padding: 2rem 0;
  width: 90vw;
  max-width: var(--max-width);
  margin: 0 auto;
}

.navbar {
  width: 90vw;
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  gap: 1rem;
}

.link {
  color: var(--grey-500);
}

.active {
  color: var(--primary-500);
}
.products article {
  margin-bottom: 1rem;
}

.products h5 {
  margin-bottom: 0;
}

.product img {
  width: 200px;
  height: 150px;
}

Copy and paste this CSS code in Index.css to follow along

Now lets start it.

Let's set our first route so open App.js from src.

Line 1 imported the BrowserRouter( browser router which is going to connect to the actual browser), Routes(the routes component which is going to be a parent for all our routes), Route(we'll use it to set up a single page). from react-router-dom.

Line 5 to 9 wrapped everything in BrowserRouter.
Line 7 we set single route path specifies that what we are going to see in the search bar as shown below.

Now we set its value to be / means Home suppose we have www.react-router-tutorial domain so when any one visit this url what we are going to see is specified by this /.

here we passed an attribute element which is a JSX to show when anyone visit this route in our case our domain is http://localhost:3000/ so if we visit this we will be able to see Home.

Line 8 we appended testing after / but in Line 10 we directly wrote about without using / so don't worry both are same now if we visit browser you will get.

Look at the url after / we changed the text we have been served with different content now we can take it to multiple levels as shown below.

Line 17 to 24 set a multi-level route see Line 18 now let's move to browser and check.

Up till now we were setting up the route and displaying the hardcoded content in the form of element attribute passed in Route now we will see dynamic way.

In order to do that we will use the pages folder.

We will use Home, About and Products and set up the route for them as shown below.

About.js

Home.js

Products.js

Line 3, 4 and 5 imported the components / pages from pages folder.

Line 11, 12 and 13 we set up the same way we did earlier in this tutorial but this time instead of rendering hard coded JSX we are displaying an entire component in element attribute of the Route.

In all three above figures look at the search bar.

Link to component from components-:

Means up till now we were using search bar to navigate now we will try to provide the buttons to navigate.

In order to create the functionality so that we can navigate between pages we can use two things first is the anchor tag and second Link tag provided by react-router-dom.

Line 21 to 28 we created using anchor tag means last two buttons if you visit browser.

Line 7 to 20 created 4 links using Link tag.

Now questions arises what's the difference.

If you visit browser you will get this first 4 buttons Link tag last 2 using anchor tag.

If you click on first 4 buttons then page won't reload as you can see that at the left top corner of image we got a semi circle like this Means page didn't reload.

If you click on the last 2 then that button changed to x means page reloaded.

Now you must have noticed we created same route twice Line 7 to 9 same as Line 11 to 13 in one of them we used /about and another just about both are same in anchor tag also we done the same and it created the same thing but all the buttons will work so / is not compulsory but need to be used.

Now we will create the link in all pages.

Removed un necessary links from Home.js.

We clicked About.

Clicked Products.

Clicked Home.

Back to Home.

Error Page -:

What if user typed something in the search bar other then the specified route suppose we typed http://localhost:3000/admin since we haven't created any route for this so we have nothing to serve the user so for such cases we use Error Page if any one types other then specified route they will get this error page.

For this we need to move to App.js where we set up our Routes.

Line 6 imported Error.js which looks like this.

Back to App.js.

Line 15 we set a route as "*" means if anyone type something else other then the above specified routes then show them the Error page.

We don't have this route in our App.

Navbar -:

Now we will see that how we can setup a navbar so that it can be accessed from every where in our App.

Move to App.js.

Line 11 we added navbar and in Line 18 the footer.
Now if we move to the browser on our every page we can see that our nav and footer will be common.

This was the basic approach of adding some shared layout between pages.

Navbar -:

Here we will learn nested routes, shared layout, index page.

Nested Routes -:

Here you can see that Line 12 to 16 we made a route for home using / and inside that route nested some more route so that any one types http://localhost:3000/about we should get About component lets move to browser.

But we can see that it didn't work but now you may question that what if we set homes route equal /something same thing we did between Line 17 to 22 now let's move to browser.

This also didn't worked every time we were just able to access the Home Page or you can say that the parent component of the nested route components.

In order to do that move to the parent and import Outlet as shown below.

Now use it like a component as shown below Line 7.

Done, now if you move to the browser you will get the nested routes.

You must have noticed that Home page is shared to all the nested routes so why don't we add a navbar over here so that we can navigate and remove all the buttons as below about.

So in order to do that let's create a components folder in src as shown below.

Create a new file in this Navbar.js and add this lines of code.

Move to Home.js.

Line 5 to 10 took a react fragment and wrapped every thing.

Here Navbar acts as a shared components because inside section we fetched the content of different routes nested in Home with the help of Outlet but we kept Navbar out of it so it will be common for each nested route.

Here outlet works as an empty component which acts according to the route, when we call any component like we used outlet it will show the content of that component but outlet shows the content where the route takes.

Both are working but what if we click Home.

We got nothing because we haven't setup anything for the Home page.

Now let's setup the Index Page which will be displayed when ever we visit Home.

Index Page -:

First of all go to pages and create a new file Index.js since we know that we are using Home.js to display our nested routes using Outlet and a shared component across them that is Navbar as shown below.

Now we need a different page so that we can show it at the Home route that's why Index.js.

Now let's use it in the App.js.

Line 7 imported Index.js.
Line 14 we create a route for our home page but it has some different syntax instead of path we wrote index.

Index- Index in the route will copy the path of the parent route in our case / and display the specified component.

Now if you visit browser.

We got what we written in index.js.

NavLink -:

It is a property provided by the react-router-dom it make sure that the link which is active needs to have different style.

Create a new file StyledNavbar in components and add the following code.

Here we used NavLink instead of Link rest is same as we did earlier in Navbar.js.

Now move to Home.js and import this instead of Navbar.js.

Now if you visit browser you will be able to look that link which is active means the page on which we are currently present is of different color.

Why its happening ?
Its happening because when we use NavLink it goes to the CSS file associated to that file and search for the class link and active once found it will apply the style written in Link to all links and style of class active to active links only.

Since we are just using Index.css to style so let's see is there any class of same name and what if we tweak it.

Yes we have let's make the active color red.

Let's see browser.

It worked.

What if we remove this classes ?

No styling.

Inline styling in NavLink-:

Line 6 to 13 we can see that we passed inline.
Here in NavLink we passed style attribute in this attribute we passed an arrow function inside {} and in function parenthesis we passed property as an object and in the function return statement we specified the color rule using ternary operator.

Now if you move to browser you will get.

When we are at Aboutcolor of Home is grey.

If we click it it's color become red.
Now what if we want to apply CSS using CSS Classes.

Here we used the same class we seen before.

We can see that CSS is applied.

URL Params -:

Helps us to show the dynamic data suppose we have a page products where different products can be found we need to make a functionality that when any one clicks on a single product then a separate page must open for it so are we going to create a page for each product no we will just use a single page and display every product on that.

Suppose we have data coming from database and every product have same set of data then we just fetch the data and show it on the same page.

Move to App.js add a new route.

Line 8 imported SingleProduct let's see what inside it.

Back to App.js.
Line 18 we created a new route for SingleProduct but in path we specified that it will open after products page and it need the productId to show some thing.

So lets visit browser.

We are at the products page see URL.
Now how we will be able to access SingleProduct by providing the id after product in URL.

Let's visit browser.

We provided id as 665 so we got SingleProduct.

Navigate to SingleProduct and add this lines of code.

Line 1 imported useParams hook.
Line 3 console logged it.
Lets see browser.

Here we can see that in console we got the id we actually passed in the URL so useParams is used to capture that.

Now let's display this id as JSX.

Line 4 stored the id in a variable using object destructuring.

Line 8 displayed at as JSX.

Line 9 link back to Products.

Able to display the id passed.

Now we will iterate over the products in the data.js and view it in products.

Now if you move to data.js it will look like this.

We have three attributes in each fields id, name and image and we have total 5 items.

Now let's visit Products.js and add this lines of code.

Line 2 imported products the data file.

Line 8 iterated over the products.

Line 11 displayed product.name.

Line 12 generated the button where passed the id as URL from where we can grab in SingleProduct.js.

Lets Visit Browser.

Git the products list let's click on Bar Stool.

Got the id of the Bar Stool lets confirm it with data.js.

Both are same.

Move to SingleProduct.js and add this code.

Line 3 imported Products from data.js.

Line 6 fetched the id coming from Products.js using useParams as we did before while showing id's as JSX.

Line 8 we iterated through the products find the product whose id matched with productId and stored it in oneProduct.

Line 10 with the help of Object destructuring we copied the image url as well as name.

Line 15 and 16 displayed them.

Now in the browser.

Got the product.

useNavigate()-:

Now we will look that how we can navigate to any page programatically using useNavigate.

First move to App.js add the specified lines of code.

Line 3 imported useState.

Line 11 and 12 imported Dashboard and Login.

Line 15 defined useState.

Line 25 and 26 set the route for the login and dashboard and in element passed setUser in Login and user in Dashboard.

Now moved to StyledNavbar and add two more links in your navbar.

Line 24 to 29 added a NavLink to Login.

Now lets move to Login.js.

It has this lines of code and this can be easily understandable if not refer Advanced react.

Now make this changes.

Here in the above two figures we used async in Line 6 and in Line 10 we can keep it or remove it.

Line 2 import useNavigate.

Line 4 accepted setUser the prop coming from App.js.

Line 8 stored useNavigate to a variable.

Line 12 checked that name and email is valid or not if not return.

Line 13 if correct use setUser function coming from App.js this will copy this data to the user in App.js and if you remember that user is sent to dashboard as prop.

Line 14 used navigate to navigate the dashboard if form submitted successfully.

Now let's move to Dashboard.js and add this lines of code.

Line 1 accepted user the prop coming from App.js

Line 4 used optional chaining to display the message.

Now move to browser.

We are at Home lets click Login.

We are at Login and entered the data required lets click Login.

We are at dashboard with message have you noticed it navigated us to dashboard moment we hit login button.

Protected route -:

In Pages create a new file ProtectedRoute.js as shown below.

Initially add this codes to it.

Now move to App.js and import it.

Line 13 we imported it.

Now we wrapped the dashboard in Protectected Route.

Now if you visit browser you will get.

Now move to ProtectedRoute.js and add this lines of code.

Line 1 imported navigate.

Line 3 accepted props passed one is normal prop user and another is children prop.

Line 4 to 7 if not user back to home else return children.

Now you will be able to access dashboard.

If you want to check this functionality then manually type in the search bar this address http://localhost:3000/dashboard we will be redirected to Home page .

Parallax Effects While Scrolling - React

hrb11182 — Fri, 24 Jun 2022 11:11:29 +0000

Here we are going to have a look on three types of parallax effects->
1 - Normal
2 - Dynamic Blur
3 - Reverse

In order to do that we need to install a react package.

Command - npm i react-parallax or yarn add react-parallax

Normal Parallax-

Now move to App.js.

Line 2 imported the Parallax.

Line 3 imported the image.

Line 8 Used the parallax and passed two parameters strength(we will talk about it later) and background image.

Line 9, 10 and 11 passed the content to be displayed on that background.

Now move to browser you will see this.

It is there but needs to be styled so let's add some css to it.

Move to App.js and add the CSS shown below.

Move to the browser it will look some thing like this.

Now you won't be able to scroll since we just have a single component.
So just add another div of class container after the main div it will give more 100vh to scroll because in CSS we gave 100 vh to the div with class container.

Line 14 and 15 we added a new div.

Now if you scroll you will see that image don't move and next div scroll on the top of it which gives a nice effect.

This was the normal parallax.

Now let's import two more images.

Line 4 and 5 imported them.

Blurred Parallax

In order to make the blurred parallax we just need to make strength 300 and it needs one more value blur.

Reverse Parallax

In order to make the reverse parallax we just need to make strength -600.

Whole code look like this.

Now if you move to browser it will work like this.

Strength means how much the back ground image will be scrolled up while scrolling the page if 200 it will be scrolled more with less parallax effect and 800 means it will rest like the content is scrolling on the top of it.

In-Page Navigation Tutorial in React

hrb11182 — Thu, 23 Jun 2022 15:22:00 +0000

Here we are going to have a look that how we can make links to navigate the different pages of the same website.

In order to do that we need to install two packages react-router-dom and react-router-hash-link.

yarn add react-router-dom react-router-hash-link

Here we have About, Our products, and Services so will create a link to the services section only.

Move to your App.js.

Line 6 imported Browser Router.

Line 10 to 30 wrapped every thing inside Browser Router.

Now move to Services.js.

Line 2 Provided an ID service.

Move to your App.js.

Line 7 imported Hashlink as link.

Line 18 to 20 created a hash link to the section with ID - service

Now move to browser.

Got a link to services once you click it will take you to the services page.

If you click it will suddenly take you to that section now we make some changes to make the scroll smooth.

Line 18 added keyword smooth this will do the job.

MI website clone walkthrough

hrb11182 — Sun, 29 May 2022 09:31:48 +0000

Make a new folder where you want to store the project and open it in VS-Code.

This code will create react project for you in the same folder.

Remove all the files except App.js, Index.js, App.css from src.

Move to src/App.css and remove every line of code from there.

Move to src/index.js and make it look like this.

Move to src/App.js and make it look like this.

Create a new folder in src named as data and copy the json file from the source code present at my github account.

Make a folder components in src and with in that one file PreNavbar.js a component and import and use it in App.js.

Now make another folder named styles where we will store the stylings of all the components and start with making the CSS file of the PreNavbar.

Import this CSS in the PreNavbar component.

In PreNavbar add this lines of code inside the div.

All the given links are the real links from the MI India Website.

This will look like this in the browser.

Now let's work on the CSS.

This will look like this in the browser.

In App.css add this styles.

This will result in this.

Now lets add cart icon in our PreNavbar in order to do that visit google icons and search for the cart in the search bar.

Select whatever you want and download as svg.
Once the file is downloaded copy t hat svg code make a variable in PreNavbar.js and add that code in that variable line 5 in the fig below.

Once done use that as shown below.

Now if you visit the browser you will get the cart icon but something like black in color which doesn't look good.

Move to PreNavbar.css and try to change the color of the cart icon line 19 in the figure below.

Now in the browser cart icon will appear.

Now let's add some hover effect to the cart icon line 23.

Style is looking a bit messy so let's add some more styling to it in .preNav > div display it as flex and align it at center line 8.

It will result in something like this.

Working with the NAV-BAR -

Make a navbar component and import it in App.js.

Add the following styling to nav.css.

Lets add something in the Navbar.js.

Now in the browser it will look something like this.

Now we need react-router-dom lets install it using following commands.

Once done with the installation move to App.js and import BrowserRouter from react-router-dom line 4 and wrap all the imported components in to it.

Move to Navbar.js and import Link from react-router-dom line 4 and also import logo line 3 in line 12 to 14 we will use the link tag and with in that we use img tag as shown below.

Here we are just linking the image with the path "/" so that if any one clicks on that image (logo in our case) we can redirect the user to home page or any page with address "/".

We are getting our logo here since our logo is white we are unable to see.

Now we added all the links to the navbar and a search box.

Now we need a search icon beside the search box so copied the svg code from google icons and stored in a variable line 6.

Now use this icon just after the search box.

If you visit the browser it will look some thing like this.

Now visit the nav.css and add this css to it line 12 to 20.

Now website will look some thing like this.

Now add css to the logo.

There is one correction in the file Navbar.js we need to close the div opened in line 12 for the logo as shown in the figure below so in order to do so we added a closing div tag at line 18 and remove an extra closing div tag from the bottom of the page Line 37 in the second fig

Now if we visit our website it will look like this.

Now its time to design search box.

Style the navlink's hover effect.

If you visit MI's website you will see that whenever you hover on the logo it changes from MI to Home now let's work on it.

Now let's design the slider.

In order to do that we will use bootstrap so let's install that.

In order to create the slider move to the components folder and make a new component Slider.js.

In order to read the documentation or to find the way that how the slider will be prepared using bootstrap move to the link shown below in the image.

Copy the code from the site and change accordingly as shown in the fig. below.

In order to make this run we need to import the carousel from bootstrap.

Used image's link in the carousel can be obtained from the file we stored data.

Now move to the App.js and import that slider.

Now if you move to the browser.

But this is not the right way of using the image.
Here we will send data from App.js here we import the data.json file and send the banner data as shown below.

In the above fig in line 6 we imported banner(an object of images and captions of both the sliders used in the website one named as start(an array of image links) another as "End"(array of images with there captions) from the data.json and in line 15 just sent the start part of the banner to the Slider as props since we are designing the carousel at the start of the site.

Now move to the Slider.js.

In the first slider we just need the image not the captions.

In the above figure we imported carousel from the bootstrap in Line 2 and in Line 3 we imported bootstrap's css.

In line 6 we passed start you can pass any letter or word this is just to capture the prop send from the App.js.

In line 8 we passed fade it is the effect needs to be applied while switching between the slides of the carousel.

In line 11 we used map function on the start (Which is accepting the prop(banner.start from data.json) from App.js), so map is iterating all the items in the array banner and every time it encounters an item it store that in the variable item passed in the map function line 11.

Line 13, 14, 15 different tags, classnames and attributes from bootstrap.

Line 15 we passed that item( contains the link from data .json ) in the src.

Now if you move to the browser you carousel will be there.

Here in the slider we didn't used css because we used bootstrap.

Now after the sliders we have offer components showing the offers in the form of cards as shown below.

In order to make this component we again need images from data.json so instead of importing banner from data.json in App.js why don't we import whole data and use it as shown below.

Line 6 imported the whole data instead of just the banner.
Line 7 imported the offers component.
Line 15 instead of banner.start now in order to get the start we need to go one step deeper because we imported data not the banner so data.banner.start
Line 16 we passed offer as props in which we put the array of data offer from data.json

Offer in data.json.

Now lets move to Offers component.

Here in Line 2 we imported offer.js(we will discuss on it later).

Line 6 we passed the data coming from offer(from app.js to offers.

Line 9 we applied map function to the offer to iterate all the items in the offer present in data.json and information of each offer will be stored in the item and index is to count the number of items.

Line 10 we made a component offer.js so we passed all the information coming from data.json about offer, Here in index we just need to pass the index and in src item's image and in link item's url this three are required to do the work but key is an essential if you don't use key map will throw errors in console so we used key and passed the first attribute of the offer data comming from data.json.

Now move to the offer.js.

Line 3 Here we took all the data comming from offers.js.
Line 4 returned an anchor tag with an image tag encapsulated in that.

Here image will show up on the website and will behave like an anchor tag with some link and index is used in template literals as alternate text.

Now just below our carousel we got our offers which doesn't look the way we want so now we need to add some css to it.

Make a css file and move to offers.js and import the Css file.

Now if you move to the browser you will get this.

Now we start working on the Heading component because in the rest of the page multiple headings are used of same style as shown below.

Now lets create a Heading.js.

Once done let's import them in App.js.

Now within the App.js pass a value in the Heading component as shown below.

Here we passed STAR PRODUCTS as the value for heading now the question arises that how we will change the value so answer is that we don't need to do so because we need to use heading multiple times so every time we use heading in the App.js we will pass a new value.

Now move to Heading.js.

Line 2 imported the css file.

Line 4 passed the text coming from the App.js as prop.

Then took two divs and a para tag.

Now let's move to the CSS.

Now if you move to the browser it will look like this.

We are done with the Heading.

Now let's work on the Star Product component.

Once component is made let's import it in App.js and pass the relevant data.

Now before moving ahead lets have a look on the data file to come to know that how the data is arranged in the data.json.

If you look to the design you need to create then you come to know that 1st product (power bank) comes in a big box and next two (earphones and bags) in the two halves of a rectangular box(you can say half of the big box in which power banks are present) and at the bottom rectangular box(you can say half of the big box in which power banks are present) smart bands are present.

Now let's design this.

Line 3 passed the data coming from App.js.

Since every product requires different space so we need separate divs for them.

Line 6 a div consist of an anchor tag having the url of the 0th product(or the 1st product power banks) from the data passed in App.js and an image tag within the anchor tag having the image of the 0th product and at last an alternate text.

Now if you move to browser it will look like this.

We wrapped next three in another div.

Now if you move to browser it will look like this.

Now the role of css comes in.

Now use this css.

Line-2 imported the CSS file lets move to browser.

Now lets work on Hot Accessories.

First of all lets add another heading in the App.js.

Let's look in to the browser in order to understand that what happened.

We got a new heading Hot Accessories at the very bottom.

Now lets work on the menu of Hot Accessories and whenever you click on the menu items a list of items will show up which is different for every menu items as shown below.

Hot Accessories menu

First of all create the component.

Now import it to App.js.

Line 10 imported the HotAccessoriesMenu.
Line 22 Used it.

Made the links here in every link I used to which specifies the path as shown below we are at the music so at the end we are getting /music in the url.

Now we need to style them.

Use this css to style the menu.

Imported the style in HotAccessoriesMenu.js.

Move to the browser it will look like this.

Now start working on the HotAccessories(music).

Create a new file.

Move to App.js.

Line 4 imported Route (we will use it later).

Line 11 imported the component Hot Accessories.

Line 26 using route we specified that if the path is exactly /music then only pass the parameters below to the component HotAccessories.

Before moving ahead let's have a look in to the data.json.

Here we can clearly see that we have an object hotaccessories in data.json and in that object there is an array containing data for each items in the Hot Accessories menu and at the end of the object hotaccessories we have an object hotAccessoriesCover consist of all the cover photos(in the above figure photo of compact bluetooth speaker is the coverphoto of this item of the hotaccessoriesmenu.

Line 27 we passed the data from data.json.

Move to HotAccessories.js.

Line 2 imported HotItemCard(we will talk about it later).

Line 5 passed the value music and music cover comming from App.js.

Line 9 to 11 took a div and just showed the cover image.

Line 15 to 20 another div to show rest of the items.

Line 16 iterated all the data in the music comming from
App.js and stored them in item(one data at a time) index to count the total number of data.

Line 17 Used a component HotItemCard in that we passed all the attributes of the item( Such as its image, name, price and its occurence in data.json using index inorder to clearly understand that let's have a look towards data.json).

In the above image we can see that every item in the music has name, price and its image.

Now let's work on HotItemCard.js.

Line 3 we received all the props coming from HotAccessories.js.

Line 6 used the image and index coming from HotAccessories.js.

Line 7 & 8 used price and names.

Lets visit the browser to have a look what we did so far.

Now we come to know that every image/card is there but not in the fashion we want.

So in order to do so we need to style HotItemCard.js as well as HotAccessories.js so lets dive in to it.

Styling HotItemCard.js

Once done import this CSS file to the HotItemCard.js.

Line 2 imported the style.

This is how the cards look in the browser.

Styling HotAccessories.js

Once done import this CSS file to the HotAccessories.js.

Line 3 imported the style.

This is how it looks in the browser.

Similarly we will design each items from Hot Accessories.

Hot Accessories (Smart devices).

Move to App.js.

Just below music add the route of Smart devices.

In browser if you click smart devices.

Move to HotAccessories.js

Receive the props Line 6.

In the cover image section/div if the music cover is present then show music cover and if smart devices cover is present the smart devices Line 11.

just below music add smart devices here && is used to ensure that if music is present then only show it.

Now if you move to browser you will get this.

Changes we need to make for the rest of the items.

In App.js added routes.

In HotAccessories.js.

Line 6 received all the props.

Done with the cover images.

Sent the data to the HotItemCard.js.

This is the browser view.

Look on the routes at the top of the every images to confirm don't be confused with the cursor.

Now let's design this.

In order to design it we need to do nothing just take the image link and send it to the HotItemCard.js it will do the work for you.

Line 40 we passed that image.

If you move to the browser you will get it.

Product Review Section

Move to App.js and first of all make that heading.

If we look at the browser it will look like this.

Now make a new component ProductReviews.js.

Move to App.js import it and use it.

Line 11 imported it.

Line 52 used that component and passed the data.

Now move to ProductReviews.js.

Line 2 imported the ProductReviewCard.js(we will talk about it later.

Line 5 received the props coming from the App.js.

Line 9 Iterated through the data and stored one at a time in item and index to count the total number of items in the productReviews(line 5 prop).

Line 11 passed the data to ProductReviewCard.js.

Now lets work on ProductReviewCard.js.

Line 3 received all the props coming from ProductReviews.js.
Line 5 to 10 used that data to structure the card.

Now if you move to the browser you will get this.

Now its time to design them.

ProductReviewCard.js

Add this CSS file.

Imported the CSS file line 3.

If you move to the browser it will look like this.

Now let's add some CSS to ProductReviews.js.

Add this CSS file to the ProductReviews.js.

Line 3 Imported the CSS file.

Now if you move to the browser it will look like this.

Now let's work on the Videos Section.

Let's first design the headings move to App.js.

Line 54 added heading.

Make a new component Videos.js.

Imported the Videos.js.

Line 54 using the video component and passed the data.

Now move to the Videos.js.

Line 2 imported VideoCard.js(we will work on it later).

Line 5 received the props.

Line 7 to 13 passed all the data to VideoCard.js to design the card.

Styling Videos.js.

Use this CSS file.

Line 3 imported the CSS file.

Work with VideoCard.js.

Line 5 in a variable stored the SVG code of the play button icon taken from Google icons.

Line 6 received all the props.

Line 8 set the background image using inline css because the image is coming as prop so it can't be carried or passed to any css file.

Line 10 used that play button declared earlier.
Line 11 used the name.

If you move to browser it will look like this now we need to add a css file to it.

Styling VideoCard.js.

Add this CSS file to VideoCard.js.

Line 2 imported the css file.

Now if you move to the browser it will look like this.

Now let's work on the In the press Section.

In order to do that first of all create the heading in App.js.

Line 58 created the Heading.

In the browser it looks like this.

Now create a new component Banner.js.

Now let's move to App.js and import it.

Line 14 imported the component.

Line 60 used the component and passed the data,

If you remember in our data(shown in above fig) we have banner object which has two arrays of items 1st is start and 2nd is end so using start we created the Slider.js component above now we need to use the End array of items to design this Banner.js.

Now move to Banner.js and design it.

Line 2 & 3 imported the bootstrap and its css file.

Line 9 specified the transition style.

Line 11 iterated the data and used it one by one.

Line 13 interval specifies that in 1000 millisec. the slides will change automatically.

Line 20 to 25 used caption to provide the details which was missing in Slider.js

If you don't understand move to the start of the post and have a look to the slider we made before.

Now if you move to the browser it will look like this.

Let's start working on the Footer.

First of all create anew component named Footer.js.

Import it to App.js.

Line 15 imported it.

Line 63 used that component and passed the data.

import React from 'react'
import "../styles/PreFooter.css"
import "../styles/Footer.css"


const repeatIcon = <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z"/></svg>

const shieldIcon = <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm7 10c0 4.52-2.98 8.69-7 9.93-4.02-1.24-7-5.41-7-9.93V6.3l7-3.11 7 3.11V11zm-11.59.59L6 13l4 4 8-8-1.41-1.42L10 14.17z" /></svg>

const mapIcon = <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20.5 3l-.16.03L15 5.1 9 3 3.36 4.9c-.21.07-.36.25-.36.48V20.5c0 .28.22.5.5.5l.16-.03L9 18.9l6 2.1 5.64-1.9c.21-.07.36-.25.36-.48V3.5c0-.28-.22-.5-.5-.5zM10 5.47l4 1.4v11.66l-4-1.4V5.47zm-5 .99l3-1.01v11.7l-3 1.16V6.46zm14 11.08l-3 1.01V6.86l3-1.16v11.84z"/></svg>




const youtubeIcon = <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="-35.20005 -41.33325 305.0671 247.9995"><path d="M229.763 25.817c-2.699-10.162-10.65-18.165-20.747-20.881C190.716 0 117.333 0 117.333 0S43.951 0 25.651 4.936C15.554 7.652 7.602 15.655 4.904 25.817 0 44.237 0 82.667 0 82.667s0 38.43 4.904 56.85c2.698 10.162 10.65 18.164 20.747 20.881 18.3 4.935 91.682 4.935 91.682 4.935s73.383 0 91.683-4.935c10.097-2.717 18.048-10.72 20.747-20.88 4.904-18.422 4.904-56.851 4.904-56.851s0-38.43-4.904-56.85" /><path d="M93.333 117.558l61.334-34.89-61.334-34.893z" fill="#fff"/></svg>



const twitterIcon = <svg  xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="-44.7006 -60.54775 387.4052 363.2865"><path d="M93.719 242.19c112.46 0 173.96-93.168 173.96-173.96 0-2.646-.054-5.28-.173-7.903a124.338 124.338 0 0030.498-31.66c-10.955 4.87-22.744 8.148-35.11 9.626 12.622-7.57 22.313-19.543 26.885-33.817a122.62 122.62 0 01-38.824 14.841C239.798 7.433 223.915 0 206.326 0c-33.764 0-61.144 27.381-61.144 61.132 0 4.798.537 9.465 1.586 13.941-50.815-2.557-95.874-26.886-126.03-63.88a60.977 60.977 0 00-8.279 30.73c0 21.212 10.794 39.938 27.208 50.893a60.685 60.685 0 01-27.69-7.647c-.009.257-.009.507-.009.781 0 29.61 21.075 54.332 49.051 59.934a61.218 61.218 0 01-16.122 2.152 60.84 60.84 0 01-11.491-1.103c7.784 24.293 30.355 41.971 57.115 42.465-20.926 16.402-47.287 26.171-75.937 26.171-4.929 0-9.798-.28-14.584-.846 27.059 17.344 59.189 27.464 93.722 27.464"/></svg>

const facebookIcon = <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 24 24"><path d="M15.12,5.32H17V2.14A26.11,26.11,0,0,0,14.26,2C11.54,2,9.68,3.66,9.68,6.7V9.32H6.61v3.56H9.68V22h3.68V12.88h3.06l.46-3.56H13.36V7.05C13.36,6,13.64,5.32,15.12,5.32Z"/></svg>

const instagramIcon =<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 24 24"><path d="M12,9.52A2.48,2.48,0,1,0,14.48,12,2.48,2.48,0,0,0,12,9.52Zm9.93-2.45a6.53,6.53,0,0,0-.42-2.26,4,4,0,0,0-2.32-2.32,6.53,6.53,0,0,0-2.26-.42C15.64,2,15.26,2,12,2s-3.64,0-4.93.07a6.53,6.53,0,0,0-2.26.42A4,4,0,0,0,2.49,4.81a6.53,6.53,0,0,0-.42,2.26C2,8.36,2,8.74,2,12s0,3.64.07,4.93a6.86,6.86,0,0,0,.42,2.27,3.94,3.94,0,0,0,.91,1.4,3.89,3.89,0,0,0,1.41.91,6.53,6.53,0,0,0,2.26.42C8.36,22,8.74,22,12,22s3.64,0,4.93-.07a6.53,6.53,0,0,0,2.26-.42,3.89,3.89,0,0,0,1.41-.91,3.94,3.94,0,0,0,.91-1.4,6.6,6.6,0,0,0,.42-2.27C22,15.64,22,15.26,22,12S22,8.36,21.93,7.07Zm-2.54,8A5.73,5.73,0,0,1,19,16.87,3.86,3.86,0,0,1,16.87,19a5.73,5.73,0,0,1-1.81.35c-.79,0-1,0-3.06,0s-2.27,0-3.06,0A5.73,5.73,0,0,1,7.13,19a3.51,3.51,0,0,1-1.31-.86A3.51,3.51,0,0,1,5,16.87a5.49,5.49,0,0,1-.34-1.81c0-.79,0-1,0-3.06s0-2.27,0-3.06A5.49,5.49,0,0,1,5,7.13a3.51,3.51,0,0,1,.86-1.31A3.59,3.59,0,0,1,7.13,5a5.73,5.73,0,0,1,1.81-.35h0c.79,0,1,0,3.06,0s2.27,0,3.06,0A5.73,5.73,0,0,1,16.87,5a3.51,3.51,0,0,1,1.31.86A3.51,3.51,0,0,1,19,7.13a5.73,5.73,0,0,1,.35,1.81c0,.79,0,1,0,3.06S19.42,14.27,19.39,15.06Zm-1.6-7.44a2.38,2.38,0,0,0-1.41-1.41A4,4,0,0,0,15,6c-.78,0-1,0-3,0s-2.22,0-3,0a4,4,0,0,0-1.38.26A2.38,2.38,0,0,0,6.21,7.62,4.27,4.27,0,0,0,6,9c0,.78,0,1,0,3s0,2.22,0,3a4.27,4.27,0,0,0,.26,1.38,2.38,2.38,0,0,0,1.41,1.41A4.27,4.27,0,0,0,9,18.05H9c.78,0,1,0,3,0s2.22,0,3,0a4,4,0,0,0,1.38-.26,2.38,2.38,0,0,0,1.41-1.41A4,4,0,0,0,18.05,15c0-.78,0-1,0-3s0-2.22,0-3A3.78,3.78,0,0,0,17.79,7.62ZM12,15.82A3.81,3.81,0,0,1,8.19,12h0A3.82,3.82,0,1,1,12,15.82Zm4-6.89a.9.9,0,0,1,0-1.79h0a.9.9,0,0,1,0,1.79Z"/></svg>






const Footer = ({footer}) => {
    return (
       <>
        <div className="PreFooter">
            <div>
                {repeatIcon}
                 <p> <b>Hassle-free replacement</b> <br/>10-day easy replacement policy on mi.com</p>
               </div>
            <div>{shieldIcon} <p> <b>100% secure payments</b> <br/> We support Cards, Wallets, EMI and COD</p></div>
            <div>{mapIcon} <p> <b>Vast service network</b> <br/> 1000 Mi service-centers across 600 cities</p></div>
        </div>

        <div className="PreFooter2">
             <div> <p>LET'S STAY IN TOUCH</p><span>Get updates on sales specials and more</span></div>

             <div>
                 <div>
                     <input type="email" name="email" placeholder="Enter Email Address" />
                     <button>›</button>
                 </div>
                 <span>Thanks. You're on our email list for special offers.</span>
             </div>

             <div>
                    <p>FOLLOW MI</p>
                    <span>We want to hear from you!</span>
             </div>

             <div>
                {facebookIcon} {youtubeIcon} {instagramIcon} {twitterIcon} 
             </div>
        </div>

        <div className="footer">
                  <div> 
                     <p> SUPPORT</p>
                      {footer.support.map((item,index)=>(
                         <a key={item.url} href={item.url}>{item.name}</a>

                      ))}
                  </div>

                  <div>
                 <p> SHOP AND LEARN</p>
                  {footer.shopAndLearn.map((item,index)=>(
                         <a key={item.url} href={item.url}>{item.name} </a>

                      ))}

                  </div>
                  <div>
                   <p> RETAIL STORE</p>
                    {footer.retailStore.map((item,index)=>(
                         <a key={item.url} href={item.url}>{item.name}</a>

                      ))}
                  </div>

                  <div>
                           <p>  ABOUT</p>
                             {footer.aboutUS.map((item,index)=>(
                         <a key={item.url} href={item.url}>{item.name}</a>

                      ))}
                  </div>

                  <div>
                 <p> CONTACT US</p>
                  {footer.contactUs.map((item,index)=>(
                         <a key={item.url} href={item.url}>{item.name}</a>

                      ))}
                  </div>

                  <div>
                      <div>Chat with our Virtual AI Bot(24/7 Live Agent Support)</div><button>CHAT NOW</button>
                  </div>



        </div>
        <div className="footerBorder">
       <div> Copyright © 2010 - 2021 Xiaomi. All Rights Reserved</div>
        </div>

       </>
    )
}

export default Footer

Since the code of the footer was too long so attached its code here for reference and I will use the code snippits from it to explain.

Line 2 and 3 since the file is big so used two different css files to style the footer.

Line 6 to 23 stored the SVG icons in the variables.

Line 30 received the data coming from App.js.

PreFooter

Line 32 since our footer has 3 parts so we will use three main divs "PreFooter", "PreFooter2" and "Footer" so inorder to wrap them we used this syntactic sugar format.

Line 33 to 40 we made a PreFooter.

In the above fig we can see that our PreFooter has three sections "Hassle free replacement", "100% Secure Payment" and "Vast service network".

PreFooter2

Line 42 to 61 made prefooter2 using input field and all the icons we imported.

Now if you move to the browser it will look like this let's style them.

Since we already imported the CSS files for both PreFooter and Footer so just add codes to the PreFooter file.
PreFooter2

Add the following CSS to the PreFooter.CSS.

.PreFooter{
    margin: 5vmax 0 0 0;
    background-color: white;
    padding: 1vmax;
    padding-bottom: 0;
    display: grid;
    grid-template-columns: repeat(3,1fr);
}

.PreFooter > div{
    align-items: center;
    justify-content: center;
    display: flex;
    color:rgba(66, 66, 66, 0.829);
cursor: pointer;
}
.PreFooter > div:hover svg{
fill: rgb(34, 34, 34);
}
.PreFooter > div:hover p{
    color: rgb(19, 18, 18);
}


.PreFooter svg{
   transform: scale(2) translateY(-0.2vmax);
   fill: rgba(37, 37, 37, 0.322);
  margin: 2vmax;

}


/* --------------------PRE FOOTER 2---------- */


.PreFooter2{
    display: grid;
    height: 150px;
    grid-template-columns: repeat(4,1fr); 
  }

  .PreFooter2 > div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .PreFooter2 > div > p{
    color: rgba(0, 0, 0, 0.842);
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size:1.5vmax;
    width: 18vmax;
    margin: 0% ;
  }
  .PreFooter2 > div > span{
    color: rgba(51, 51, 51, 0.842);
    width: 18vmax;
    font-size:1vmax;
  }

  .PreFooter2 > div > div > input{
    border: none;
    outline: none;
    padding: 0.5vmax 1vmax;
    background-color: rgb(255, 255, 255);
    font-size: 1vmax;

    width: 20.4vmax;
  }
  .PreFooter2 > div > div > button{
    border: none;
    padding: 0.5vmax;
    background-color: rgb(255, 255, 255);
    outline: none;
  }
  .PreFooter2 > div > div{
  border: 1px solid rgba(126, 126, 126, 0.493);
  }

  .PreFooter2 > div:nth-child(2) > span{
    width: 22vmax;
  }


  .PreFooter2 > div:nth-child(3){
    justify-content: center;
    align-items:flex-end;
  }

  .PreFooter2 > div:nth-child(3) > p{
    width: 14vmax;
  }

  .PreFooter2 > div:nth-child(3) > span{
    width: 14vmax;
  }
  .PreFooter2 > div:nth-child(4) {
    flex-direction: row;
  }
  .PreFooter2 > div:nth-child(4) > svg{
    cursor: pointer;
    margin: 1vmax;
    fill: rgba(138, 138, 138, 0.705);
  }
  .PreFooter2 > div:nth-child(4) > svg:hover{
    fill: rgb(94, 94, 94);
  }

And now if you move to the browser it will look like this.

Lets start working on the Footer.

Before discussing about the above code let's have a look on the data.json.

Here you can see that footer is an object and has some array of datas for support, shop and learn, retail store etc so footer will consist that much section.

Line 64 to 70 made the support section of the footer.

Line 72 to 79 made the shop and learn section of the footer.

Line 80 to 86 made the retail store section of the footer.

Line 88 to 94 made the About section of the footer.

Line 96 to 102 made the Contact Us section of the footer.

Line 104 to 106 made the Chat Now button with some text.

Line 110 to 112 a border and the copyright message.

Now if you move to the browser it will look some thing like this let's design them.

.footer{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 2fr;
    padding: 4.5vmax;
    background-color: rgb(37, 37, 37);
    color: rgb(197, 197, 197);
}

.footer > div{
    margin:1vmax;
    display: flex;
    flex-direction: column;

}

.footer > div:nth-child(2){
    display: block;
}
.footer > div:nth-child(2) >a{
        display: inline-block;

}
.footer > div > a{
    color: rgb(197, 197, 197);
    font-size: 1vmax;
    text-decoration: none;
    margin: 0.6vmax 0;
}

.footer > div > a:hover{
    color: white;
}


.footer > div:last-child >div{
    width: 45%;
    margin: 1vmax 0;
    font-size: 0.8vmax;
}

.footer > div:last-child >button{
width: 50%;
border:1px solid white;
background-color: rgb(37, 37, 37);
color: white;
padding: 0.6vmax 0;
font-size: 0.98vmax;
font-weight: 100;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
transition: all 0.5s;
}

.footer > div:last-child >button:hover{
    background-color: rgb(248, 244, 244);
    color: rgb(37, 37, 37);
}

.footerBorder{
    background-color:   rgb(37, 37, 37)  ; 
    color: white;

}
.footerBorder >div{
    border-top: 1px solid rgba(197, 197, 197, 0.185) ;
    color: rgb(197, 197, 197);
    width: 90vmax;
    margin: auto;
    padding: 2vmax;
   font-size: 0.98vmax;
}

Add this CSS Code to Footer.Css.

Now it will look like this in the browser.

SASS or SCSS for beginners.

hrb11182 — Tue, 05 Apr 2022 15:22:54 +0000

SCSS vs SASS -

In order to understand each and everything you need to have knowledge of CSS

SASS (Syntactically Awesome Style Sheets) is a pre-processor scripting language that will be compiled or interpreted into CSS. Sass Script is itself a scripting language whereas SCSS is the main syntax for the SASS which builds on top of the existing CSS syntax.
In CSS3 we call SASS as SCSS.
We are going to use VS code so install it.
Once done install the extension shown below.

Once you are done with the installation of that extension you will be able to see a button at the bottom of your editor's screen.

Now let's have a look at the folder structure you need to maintain to work with the SCSS.

Now click on that button on the bottom about which we talked earlier.
This will compile your SCSS code to the normal CSS code because the browser won't be able to understand SCSS that's why we need a compiler.
And after compilation, your folder structure will change and you get a CSS file too in your folder.

This was the setup and some basics you need to be aware of.

Since you all are aware of CSS so let's have a look at the feature which makes it different from CSS3

1- Use of operators -

Here we used the "+" sign to add two values so here is what will happen? actually, they are going to behave like "10rem".
If you visit your compiled CSS file there you will get something like this.

Similarly we can use "*", "/", "-" too.

2 - SASS Variables -

Now variables are included in CSS too.
Syntax to declare a variable in SCSS.

Dollar sign variable name and then its value.

And it can be used like this.

3 - Nesting -

If any component has its child then they can be styled within their parent's syntax as shown below.

We can take it a step further.

or

4 - Mixin -

Suppose you know that there is a property of CSS you gonna use for lots of time in this case mixin helps you.

First defined and then used that property.

5 - Parameters -

Now suppose we created a mixin of some common styles but their values need to be different in different places then we can pass a parameter in the mixin as shown below.

Now, whenever we use we just need to pass a parameter.

The order of parameters matters in the order in which parameters are defined their values need to be passed in the same order.

6 - SCSS Partials-

It means that instead of writing all the styles on one page we can use different pages too, for example, we can use different pages for mixins, and variables and we can call them when required.

Partials names should start from underscore so that compiler doesn't compile them.

Now let's see how we can get that partial files in our main CSS files.

At the top of your "main.scss" file import them. ( we don't need to include the file extension and underscore here ).

Object Oriented Programming in C++.

hrb11182 — Sat, 02 Apr 2022 03:49:57 +0000

Object Oriented Programing is a set, rules or ideas or a standard in programming which is used to solve the different real world problems.

CLASS -

Classes are the building blocks of 0bject Oriented programming.
It is a user defined datatype.
Class should end with a semicolon else you get compile time error.
It is just like a blueprint by using which we can create different instances of class also known as the objects.
Below figure shows class in C++.

_Access modifiers-_There are three types of access modifiers in C++ public, private and protected.

1-Private- Whatever is private to your class is not going to be accessible outside the the syntax shown in first figure is same as second because class everything inside the class is private by default so we need not to mention that private keyword. class everything inside the class is private by default.

2-Public- Whatever is public to your class will be accessible outside the class too.

3-Protected- It is similar to private in the sense that it cant be accessed outside the class unless with the help of a friend class, the difference is it can be accessed by any derived class or sub class.

OBJECT -

An instance of a class . When a class is created no memory is allocated but when it is instantiated then memory is allocated.
Given fig shows an object of employee class with some values for the properties of the class (line 12 – 15).

CLASS METHODS -

Class methods are the functions belongs to the classes.
It is used to add behavior to the objects.
There are two ways to define them -:

Inside class – In the given figure at line22 we are invoking that method “Introduce Yourself.

Outside class – In order to define a method outside the class you need to declare it inside the class then define it outside the class this is done by specifying the name of the class followed by the scope resolution “ : :” operator followed by the name of the method as mentioned in the given figure.

CONSTRUCTORS -

Constructor is a special member function/method of a class which initializes objects of the class.
In C++ it is automatically called when object is created.
Constructor has same name as the class itself.
Constructor don’t have return type.
If we don’t specify a constructor, C++ compiler generates a default constructor for us.
Three types-: Default, Parameterized, Copy constructer.
Figure given below is an example of Parameterized constructor.
In line 23 – 26 is our objects using constructor.

The figure given below shows the example of copy constructor is a member method/function that initializes an object using another object of the same class.

ENCAPSULATION -

In normal terms Encapsulation is defined as wrapping up of data and information under a single unit. In Object Oriented Programming, Encapsulation is defined as binding together the data and the functions that manipulates them here in the given figure we can see that now our properties / data are private (Name, Company and Age) and they can be only accessed and modified by using different methods (Getter and Setter) and figure 2 shows that how we can access and modify our data using getter and setter.

Since the properties cant be changed directly the only way is using getters and setters so we can add some validation or some check in our function so that no one can exploit our properties or data this is why encapsulation is done as shown in the figure here age will be only modified if its value meets the specified condition.

ABSTRACTION-

Abstraction means displaying only essential information and hiding the details. Data abstraction refers to providing only essential information about the data to the outside world, hiding the background details or implementation consider the pow() method present in math.h header file. Whenever we need to calculate power of a number, we simply call the function pow() present in the math.h header file and pass the numbers as arguments without knowing the underlying algorithm according to which the function is actually calculating power of numbers.
In the given figures we just initialized our abstract class from line 4-6 we associated that class to our employee class line 8 now employee class can define the behaviour of that abstract class and objects can use it without knowing that what is going behind the scenes.

Difference between Encapsulation and Abstraction -

INHERITANCE -

The capability of a class to derive properties and characteristics from another class is called Inheritance.
Sub Class: The class that inherits properties from another class is called Sub class or Derived Class.
Super Class: The class whose properties are inherited by sub class is called Base Class or Super class.

In this figure we created a new class “Developer” which is inheriting from the class employee.

Now when we tried creating the object of class “Developer” then we got an error because we don’t have any constructor for the class “Developer” and default constructor also can’t work here because we inherited from the class employee where we used constructor so some property of developer class has constructor.

Now we have defined constructor for the Developer class too and passed all the parameters of his own as well as of the parent class.

Now in this figure we passed the three parameters which belongs to the base class to the base class constructor and Developer constructor just constructed the fourth attribute.

Now we constructed the object of developer class and passed all the parameters.

In this figure we created a method of class developer here we are using getter function of our employee class in order to access the property of our base class because we can’t access it directly it is Private.

It throws an error because name attribute of base class is private.

Now we can access it because it is protected and protected can be accessed by the child class.

From the derived class we wont be able to access the abstract class / other extra properties of our base class because it is private by default so in order to make it accessible we need to make our inheritance public as done in line 53 of the above figure.

POLYMORPHISM -

The word polymorphism means having many forms. In simple words, we can define polymorphism as the ability of a message to be displayed in more than one form.
Most common use of polymorphism is when a parent class reference is used to refer to a child class object.
A real-life example of polymorphism, a person at the same time can have different characteristics. Like a man at the same time is a father, a husband, an employee. so the same person posses different behaviour in different situations. This is called polymorphism.

We added a new function work to our employee class.

Calling the method of base class employee on the objects of different child classes “Developer and Teacher” second figure shows the output we get.

Here added the same method in both of the derived class but with different task in different child classes as compared to parent class.

After doing the changes shown above we got this output.

In the above figure we made some changes instead of directly accessing the work we made the base class to point on the objects of derived class using reference and used pointers to access the method of base class.

By doing above changes you can see that our result changed because the pointers are pointing on the method of base class so when we execute our code that method will be called.

In order to make them work perfectly we need to add “virtual” before the return type and the name of our method this virtual will tell the compiler (when it is called) that can you check that is there any other implementation of this method in our derived class if yes implement that else use this implementation as a default value.

Git & Github...

hrb11182 — Sat, 02 Apr 2022 02:54:17 +0000

What is Git?

Free and open source version control system.

What is version control?

The management of changes to documents, computer programs, large websites, and other collection of the information.

Some of the useful commands -

Some of the important terms to remember -

Github Introduction.

Creating a new repository in Github.

We can create our new repo in github using the buttons highlighted in red and yellow.

Once you click any one of the above mentioned buttons it will open a new window as shown below.

Name of repository.
Its description.
You can make your repo Public ( Anyone can access it) or Private (Only you can access).
Create repo button.

Repo will look like this.
Click on highlighted text to create the new file inside a repo.

New file window will look like this.
Highlighted portion shows file name.

After writing the code you will be asked to enter other details like 1- Commit Message (Is given during every commit ) 2- Description message.

Once committed the file or any change in file then it will look like this.

Git - Cloning the repository-

Visit any existing repository in github and follow the steps to clone the repo.

Since we cloned the repo in the demorepo so move in that repo.

CLI will look some thing like this {Master will be mentioned in this or any other style which shows you are in master branch}.

Listing the hidden files.

Both of this command is used to list all the files and folders (including hidden).

Checking status of files.

To check the status of file - Red means un tracked Green means staged.
Gives the info about all the files ever created , deleted, untracked or committed.

Stages of file.

Un Tracked files –

Initial stage of file.
This files can’t be tracked by the git.

Staged –

Those files are put in this stage which are going to be committed.

Unmodified –

After staging area once the files are committed they come to this section.
From here they can go in two direction:
If the file is removed then it goes back to untracked.
If some changes are don then it goes too modified area.

Modified:

From here files are send to the staged area.

Git commit-

SSH Key -

First generate SSH key to your own machine using the command shown below.

You can rename your file / key name.
And can put a password on that.

This is how key looks like.

Go to profile and then settings.

Go to SSH and GPG Keys.

Paste the key in box like mine pasted.
When you will click on new SSH key this dialog box will open.

Git Push -

If you remember in git commit section we committed index.html.
Now we will push it to git hub.

In above figure-: Location of our git repo set as default to origin.
This was the command to push index.html to git hub.

If we run this command then we never need to give origin and master(Means branch name Master in this case only it will change accordingly) we can only use git push to push it to git hub.

Index .html to git hub.

Git Init -

Demo-repo2 is not a git repo.
In order to make it a git repo we need to enter that folder. By following command.

And run this command.
Now it is a git repo and u are in master branch.
In order to push it to git hub you need to make an empty repo on git hub.

This dialog box will open.

After creating the new repo copy the SSH key.

And run this command.

This command shows that this local repo is connected to which remote repo.

Work Flow of Git & Git hub -

Git Branching -

Three types-:
Master Branch-Master branch is the main branch having main code of the project which is the best in present time.
Feature Branch-This branches are made to build and test some new features, Once we are confident with that feature we merge it to the main branch.
Hot Fix Branch-This branch is made to fix some bugs in the main program.
Command to check the number of branches of the git repository -

It has only master branch now.
Star denotes that we are currently on this branch. Need to hit "q" in order to come out of this window.

Command to create a new branch.
Feature denotes the name we can use according to our requirements.

This command is used to differentiate between master and the branch name specified.
You need to run it from master branch and u can go there by checkout command.

The UI of the same has been discussed above.

Command to merge any branch to the main branch of the repo.

Pull Request-

In this fig the branch is just pushed to git hub not merged with the Main branch.

Just below merge pull request button is given to merge after fixing the bug.

This changes are done in git hub we need to bring this changes to our local machine we can do it by this command.

Since we merged the features to the master branch so we need to delete that feature branch.

We can do it by this command.

Merge Conflicts-

A merge conflict is an event that takes place when Git is unable to automatically resolve differences in code between two commits. Git can merge the changes automatically only if the commits are on different lines or branches.

When we modified the file then instead of moving it to stage area we can directly commit it using this command. {only for modified files which were committed previously}.
After solving the merge conflicts you need to commit the file again it doesn’t matter that u changed something in file or not .

Un Doing in git-

This command reset the previously done staging on file name specified.

This will also do the same thing.

This is to reset last commit.
Here HEAD is a pointer which tells that we need to reset 1 commit or go 1 commit back.
So in order to un do lots of commits we need to use the commit code.

To get the log of every commit made on that branch.

This will show up all the previous commits copy the code of the commit.
In order to scroll down use space bar and q to quit.

This will undo all the commits done after this specified commit but this commit remain untouched.
This commands unstage the commit.

This will not unstage the commit it will remove them completely.

This command can be used to un stage the file.

Forking -

Forking is a git clone operation executed on a server copy of a projects repo. ... You create a new feature branch in your local repo. Work is done to complete the new feature and git commit is executed to save the changes. You then push the new feature branch to your remote forked repo.
This is done to bring the whole repo to your own account not the branch.
After making the desired changes we can create the pull request to accept the changes you made in the project.