React JS Interview Questions ( Breadcrumbs ) - Frontend Machine Coding Interview Experience

so I've opened this Indian e-commerce website and let me show you something so if I hover on this electronics and let's select Apple you can see we have a listing Page open a product listing Page open which shows all of the mobiles offered by Apple but let's see if I click on any of the product it takes us to the product detail page but did you notice something when we were on the product listing page we had this something over here which is called a breadcrumb in a website so this will help us to nav at throughout the website and Will Tell Us Where are we exactly inside of that website so if we are inside of this detail page you can see this was the path to the listing page and after that we have the path to our detail page so let's see if we we want to go back to our listing page and this page was no longer open we can simply do is we can click on over here and we can go one step backwards and we can go to some other detail page and you're going to see it shows the detail regarding that particular detail page as well and you might might have seen similar pattern followed by other e-commerce website or just normal websites as well and that is why this is one of the most asked interview question in frontend interviews and let's see how we can go on and implement it in our own website but before we do that hit that subscribe button right now if you want to see more such videos like this because you won't find content like this anywhere else on YouTube so I opened code sandbox over here and let's create a new react sandbox so we have a new reactjs Sandbox initialized over here and if you go inside of this app.js file you're going to see we have all of our code over over here so I'm going to get rid of this and instead I'm just going to write in the H1 tag I'm going to create a dummy eCommerce website with the homepage product listing page product detail page and then go on to implement our breadcrumb feature So Below this I'm going to have my bread crumbs which we'll Implement later on and below that we're going to have all of our routes so how do you implement routes inside of a react app we will need something called react router Dom so I'm going to search react Dom yep here it is and also if you're using something like vs code or if you're working on a terminal apart from a code sandbox you can type npm install react-router-dom so how do we initialize multiple routes inside of our app first of all we have to wrap whole of our app in something called browser router which comes from react router Dom so let me wrap it manually import it from [Music] react router Dom so after wrapping this uh first of all let me just uh close this I'm going to import something called routes from react rodom and inside of it we are going to create all of our routes so we're going to need three routes one is for home other is for our product listing and third one is for product detail page for detail of one single products so to create a route we import a tag called route from react rout Dom and it's going to be a self-closing tag so I'm going to import this as well from react autodom and first thing that is going to take is a path that what path is this route going to be so it's since it's our homepage so it's going to be the slash path so whenever we are on root of our website it's going to be called so and the second thing is going to be element element and inside of here we are going to provide the actual component for our page so I'm going to duplicate it couple of times and another is going to be for products the third one is going to be products slash one particular product so how can we identify one particular product by using its ID but we don't know what id is at this point right so I'm going to say colon ID so this path right here is going to be dynamic and I'll show you how it's going to be dynamic but first of all let's go on and create the pages so I'm going to create a new folder for our pages and I'll keep all of my pages inside of it first page is going to be home do JS then product listing. JS and product detail. JS now inside of the home I'm going to create a new component const home equals and this will be an arrow function and I'll simply return a div inside of which I'll have an H2 tag which will say home page that's it I'm going to repeat it a couple of times for our listing page oh I haven't exported it yet export default home okay let's do that for our listing page as well so product listing and the third one is going to be the product details okay let's go on inside of our app.js and import all of these so here it's going to be home here it's going to be product listing and the third one is going to be product details okay let's see let's test out if it's working okay product details isn't exported I mean imported yeah let's see let's refresh this okay we are on homepage right now let's go to products and what if we give it some random ID let's say 69 yeah we get product Details page so fine our uh routing is working up until now let's go on and provide it some e-commerce functionality a little bit so what I'm going to do I'm going to go to Google and search dummy Json API and inside of this first search result I'm going to go on and click on this/ products and we have this products listing API so simply I'll take it and go inside of our homepage and here inside of our use effect I'm going to call it so use effect as you already know is a hook provided by react inside of which it takes one call back function and a dependency array if we keep the dependency array empty it's going to call this call back function only once the component is rendered for the first time so this is a good place to fetch some apis so I'll fetch demy jason.com products API and then I'll take the response first of all we need to format this response to Json and then I'll say dot then we're going to assign it to some state so let's create a state over here const use State and use state is another hook provided by react for creating the states so by default I'm going to keep it as an empty array and here I'm going to say trending products this is going to be the name of our state and the other thing that it provides is a set trending products which is going to be the setter which is going to be used for changing our states so cool inside of it dot then I'll say set trending products to whatever the response we get but since this is a homepage right we don't want to display all of our products here so what I'll do I'll just uh say const slice trending and inside of it I'll say response dot products dot slice so what this slice will do is it will basically take only the first six products or whatever we write over here so I'm taking from zero to six so if we have this API you can see we have this products key inside of it right so inside of the product key I'm going to take the first six products because we have a bunch of different products here which is 30 in this case so okay so we'll just take the first 60 and just provide it to this set trending products over here now let's go on and render this trending products oops I've done this over here inside of our app page I don't want to do this here so I'm just going to take it and do it in homepage instead let's get rid of it let's go to homepage over here I'll just uh import use State and use effect cool this should do it let's go on and render these trending products So Below this homepage over here I'm just going to create a span tag write trending products oh by the way if you want to access this complete code you can find the link in the description down below to my GitHub repository below this um I'm going to have a div inside of it we are going to render all these products so let's give this div some class name of product oops product gri in surfit I'm going to have another Dev which will render one single product so but before this I'm going to render all of our products so trending products do map and here I'll take one single product inside of it I'll say return and this div over here and this div will also have a class name of product card and also we are supposed to give this a key as well right else react will start crying product do ID so if you go to this API every single product has an ID you have a title description price and bunch of different things which we are going to use for rendering this so inside of it I'm going to have a link tag now what is a link tag you ask it's just like an a tag but this is provided to us by react router Dom so yep you see what this basically helps us do is it helps us to transition from one page to another in a blink of an eye it doesn't let us feel that our app is a web app it gives the app feel as if it's a native app and it makes our app super fast right so link and we are you supposed to go with this link since we are on a homepage this won't take us to the listing page right this is the link to one single product so I'm going to say two and I'm going to use a back tick to slash products and slash whatever the ID of the product is so inside of this template string I'm going to write the ID so this is the id product. id and this will take us to that product. ID page and simply inside of it I'll render two things one is the image of the products and other of the title of the product so here I'll just simply say product do title and above this I'll say SRC and let's see first inside of our app we have a thumbnail yeah thumbnail so we're going to use this field so products do thumbnail I think it should be product not products so product. thumbnail also we should give it an um alt tag as well it's good for our search engines and let's see what magic it creates so yeah we have all of this bunch of different products yeah so we have all the images and the title rendered over here if you click on any of these products we go to product detail page you can see/ product SL1 and also let's create a link over here to go see all of our products right not just six these six products So Below this I'll have another link tag which will say two and this will take us to slash products and simply inside of it I'm going to say view all products let's see it looks more like a link let me make this a button instead so button and inside of it I'll just say view all products let's give this button somewh minimum styles of width and some padding yeah this looks much better a big button that we can easily see apart from this all of this looks very ugly let's give this some little bit of CSS styling so I'll just go to my app. CSS or styles. css in this case instead of it first of all I'm going to give this padding top bottom zero left and right 20 pixels okay yeah that looks good let's style each of these products as well so first of all for our parent uh product grid I'll say display should be grid and grid template columns should be one fraction one fraction what this means is it will allocate one fraction of space to each and every product let's say if the whole width was 60 pixels so for each product it will give 20 pixels each right so and a gap between them will be 20 pixels and some padding of top and bottom of 20 pixels and left and right of zero so for our product card for each and every product card we will have some border some padding and some text aligned to the center so that we can see it in the center you can see the Border has started to appear and after that for each and every link tag you can see this ugly blue line and blue color so we can just say text decoration to be none and color to be black and now let's give some uh width to our image so our image is going to have 100% of width and height is going to be 250 pixels so that it can fit in over here yeah let's see uh you know what I think I should just uh make it two products per line cool then we have successfully created our homepage if we go and click on this view all products we can see we are routed to our product listing page now let's uh style this listing page a little bit as well and then we'll move on to our product detail page and then we will work on our breadcrumbs but before that if you're preparing for your frontend interview and you would like me to help you in your front end interview preparation just click the link in the description down below and book a one-on-one call with me we're going to discuss tips tricks I'm going to give you a lot of resources I'm going to design a proper road map tailored to your situation which is going to help you out a lot in your frontend interview preparation so click the link in the description down below and book a one-on-one call with me so for our product listing page we will do the absolute same thing that we did in our homepage as well so what I'll just do I'll just take this copy this up paste it here instead of trending products I'll just call it products instead of set trending products I'll just say set products let's just take this products and replace this over here and this time we won't do any slicing we'll just display whole of our product so I'll just say response dot oops products and we supposed to render this as well first of all let me just import use effect and use state so simply I'll go back to my homepage page copy this whole thing up and start a product listing and and I'll render this here I'm not going to need this homepage tag not going to need this trending products tag and yeah I think this should be good now instead of trending products I'll just say products I think this should work let's see if you go to the view all products okay what's wrong link is oh we haven't imported a bunch of things so let's import the link let's add some error checking so I'll just add a question mark over here so that it will check if the product has something then only map through it and render it so yep we can see all of our 30 products have been rendered over here and you know what instead of uh title just title let's add U price as well which I believe it's going to be in dollars so let's add add a dollar sign here and yeah this looks fine yeah much better if we click on any of these products it should take us to the product detail page and let's go on and design this product detail page now we should show details of one single product here so I'll just close it and open this product details. JS and here we are going to use something called use params which is going to be coming from react router Dom now this use params basically helps us to access our URL over here and we can fetch this ID that has been used in this URL so in this case it's one right so how do we get this I'm going to say const and this will give us ID which was the variable that we defined over here we can make it anything and that will be what we will get from our use perams so okay let's test it out real quick just to be safe I'm going to say ID and go to our console let's refresh this or let's let's go back to our homepage if I click on view all products if I click on any single product over here yep you see three and this is the product with the three ID cool then what now I will do is I'll create a state over here for one single product so this is going to be nil by default because it's going to be an object right an object has a n state so const and empty array which will say product and set product let me just get rid of this now inside of it what we are supposed to do is we have to fetch the details of that one single product so for that as well we have an API call if you go to this dumy Json / products slash and let's see if we say three you're going to see it just give the details of that one single product so this is pretty cool um you know what I'll just go back to my home.js again or let's say product listing. JS I'll take this data fetching code come back to our product details let's paste it and in this case we're going to need this ID so this ID so slash this ID over here and also we're supposed to use back ticks if you want to use template string inside of it so just like that and instead of set products I'm going to say set product let's see if our product has been fetched I'm going to console log this okay use effect is not defined my bad use effect as well okay this is giving us undefined okay it shouldn't be dot products just this response there we go we are getting just that one single product right over here cool then let's go on and render it over here so below our product details I'll just say if the product is present then do something else just show A P tag with loading and let me warn you this is not the right way to add a loading inside of a product detail page or wherever loading should be done with respect to the data fetching that is you should create a state over here of loading set loading to True over here and then when it's fetched you should set the loading to false right but for accelerating things over here I'm just doing it just like this now inside of it I'm going to have a div where first of all I'm going to have an image of our product so um SRC equals product dot thumbnail alt will be product do title let's take this product. title and render it below this so I'll have H3 tag it's is going to say product. title just close this we don't need this anymore um okay we have this phone and uh yep title of our product and you know what instead of just rendering it over here I'll just render it right here in product uh. title and over here I'll just say product do price with the dollar sign in front of it and have a P tag over here product. description okay we have the title here the image the pricing and the description let's give this image some little styling hi to be 300 yeah I think this is better and you know what I'll just move it back there here I'll just add the title that will look better over there because I just realized this was outside of this and in this div I'll just provide a styling for display flex and wrap all of these details inside of another div I think this looks better some bare minimum styling but good enough for explaining what breadcrumb is all about so okay now let's go on and Implement breadcrumbs inside of our app now if you're enjoying this tutorial up until this point open your Instagram app right now and search roadside coder and hit that follow Button as hard as you can because I'm very active on Instagram and if you have any doubts any queries or just a normal message you can ping me on Instagram for this so go on do it I'm waiting what I'm I'm being serious over here open your Instagram app right now and follow me there oh you've already done it okay let's let's move on with this video so I'll close all of this up and over here I'll create a component for our bread crumbs but since this component doesn't exist I would need to create a file for it so I'll just create a new folder for our components and inside of it I'll just create a new file called breadcrumbs. JS okay now inside of this file I'm going to create a component called breadcrumbs and Export it export default breadcrumbs and I'm going to say return and have a div here which will have a class name of red crumbs and a link tag which takes us to home let's see what's going on over here first of all let's um import it just like that let me close this up okay link is not defined let me Define the link and also this will take us to the homepage so slash let's see so okay the we are in product detail page right but if you click on this homepage we go back to our homepage but this is not what we want if we let's say are on listing page we want home then it will show listing after it then if we are on detail page it should show product detail or the ID of the C current product that we are in so after homepage we have to see this uh URL over here and decide how many links are we going to render so right over here what I'll do I'll use another hook called use location which comes from react rodom so just like that and again it has imported in separate lines let's just do one line for clean code so okay and from this we are going to get a location let's try to console log this and see what do we get inside of it so location and let's go to our console and see okay we get a path name we get a search hash and bunch of different things so what we are concerned about is this path name so it has products and the name or the ID of that product right so instead of location I'll just restructure it to take out our path name and with this path name what I will do is I'll say path name do split and I'll split it from this slash over here so slash and then this will return us an array so if I say const path names and let's try to console log this path names and see what do we have okay so we have an empty path products and one so we don't want this empty path so you know what I'll just do dot filter and let's take X and return X so what this will do is if it's not a truthy value if it's a falsy value it will just get rid of it so we just get products and this one so let's render it after it now below this I'll just map through this path names over here dot map I'll take two things first is the name of that path and the index now inside of it we will take another variable over here actually so let bread crumbs or breadcrumb path to be empty by default and over here I'll say breadcrumbs equals to or plus equals to the current name so back text I'm going to say name below this I'll say return and I'll have a span tag inside of this span tag I'll say slash and then render this name you can see Home Products and one if we go back to our home and let's go to our view all products you can see we are home and products but what you want to do over here is if let's say we are on a detail page we want to make this and this as a clickable link but not the end link over here right so the current page that we are in obviously we are not going to click on over here and go back to the same page right so we not going to make this a link but this should be a link over here as well so what I'll simply do is first of all I'll add a check to detect if it's a last link or not so I'll add const is last and inside of it I'll have index is equal to path names names do length just to detect if the current index is the last index or not that is this so if it's equal to that and actually it should be minus one because it starts from zero so I'll add a check over here in return if it's last then I'll just show this but if it's not last then what I'll do I'll just take it paste it here and wrap this inside of a link tag and let's keep this slash outside of here and inside I'll keep the name and this will take us to this bread grum path this bread grum path right here so this serves us two things this will help us to provide an index as well and the path where we are supposed to go what's wrong oh my bad I was supposed to render it inside of here and this two will go to here and also this will serve us as a key bedrum path here and actually here as well let's see how this works so yep we can see we have all of these things here so if we go back to our homepage and let me just close it and also some people what they do is they prefer to not show homepage over here right so I'll just uh wrap it if path names. length is equals to zero then we don't want to show this so I'll just say if it's more than or equal to just more than zero actually so let's see when we are on homepage we can't see any breadcrumbs over here but let's see if we go to our listing page yep we see home/ products if you go to our detail page that particular details side let's style this a little bit so I'll just quickly add some stylings over here instead of a St si. CSS for our breadcrumbs I'll say margin bottom of 20 pixels some font size and some text transform of capitalize for our links I'll just remove that ugly blue lines and add some black colors and for our span tag the span tag is going to be the last one right so I'll just add a color over here so if we go back to our products you can see we can clearly see on which page we are on currently and what else I will do is I'll just say padding left off five pixels Yep this will provide better spacing great this looks amazing we can directly go to any single product from here as well so yep then we can go back to listing page from here and this is how you can go on and Implement breadcrumbs into your own website if you like this video and would like to see more such videos like this click this card above my head and access the complete react interview series

Channel: RoadsideCoder

Views: 19,026

Keywords: navbar in react js, breadcrumbs in react js, react breadcrumb tutorial, build a navbar in react, react js pagination, react interview, react interview questions and answers, react interview questions, frontend interview questions, javascript interview questions and answers, javascript interview questions, javascript interview, reactjs interview questions, reactjs interview, namaste react, namaste javascript, react interview question for experienced, react SDE2 interview

Id: yeNgh2gw104

Length: 28min 53sec (1733 seconds)

Published: Sun Jan 07 2024