React JS Interview Questions ( File Explorer ) - Frontend Machine Coding Interview Experience

Подписаться 109 тыс.

Просмотров 94 тыс.

50% 1

🔴 Get my Complete Frontend Interview Prep course - roadsidecoder.com/course-details
#JavascriptInterview #ReactInterview #ReactJS
React Interview Question to build an Infinite File Explorer will be created in this video along with tips and tricks to tackle your React JS and JavaScript Questions in Frontend Machine Coding Interviews.
➡️ Book an Interview Preparation call with me -
topmate.io/roadsidecoder
🟦 Follow me on Twitter and u will clear your interview 🤓 -
/ piyush_eon
➡️ Source Code -
github.com/piyush-eon/fronten...
🔗 Frontend Machine Coding Interview Series -
• Frontend Machine Codin...
🔗 Javascript Interview Series -
• Javascript Interview Q...
🔗 Cars24 Interview Experience -
• Frontend Interview Exp...
🔗 Unacademy Interview Experience -
• Frontend Interview Exp...
🔗 Tazorpay Interview Experience -
• Frontend Interview Exp...
🔗 MERN Stack Tutorial with Redux -
• MERN Stack Project Tut...
🔗 React Beginner's Project Tutorials -
• React JS Project Tutor...
-------------------------------------------------------------------------
00:00 Intro
00:31 Problem Explanation
02:10 Setup
02:21 Prepare Scalable JSON
03:32 Render the UI
11:38 Recursively Rendering UI
13:27 Insert File/Folder UI
13:38 Get Interview Preparation call with me
14:04 Insert File/Folder UI
19:51 Logic for Insert File/Folder
22:40 Creating Custom Hook
24:04 Depth First Search Algorithm
33:56 Homework
35:00 Important Task 👀
-------------------------------------------------------------------------
⭐ Support the channel and learn from me One on One -
/ @roadsidecoder
Special Thanks to our members -

Опубликовано:

3 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 199

@RoadsideCoder Год назад

🔴 Get my Complete Frontend Interview Prep course - roadsidecoder.com/course-details ➡ Book an Interview Preparation call with me ( 20% OFF for limited time ) - topmate.io/roadsidecoder 🟪 Follow me on Instagram and u will clear your interview 🤓 - instagram.com/roadsidecoder/

@arunyadav7467 Год назад

Make more such interview questions on react js this is really great sir

@nallaparajuamareshvarma8471 Год назад

Bro please make part 2 I think like target has been achieved

@anishmandal1248 2 месяца назад

hi there, i'd like to know how would you perform searching for the file and folder in nested folder structure , please add it in 2nd part of it

@priyabansal9911 Год назад

Haven't seen this kind of briliant content on RU-vid. Keep it up

@RoadsideCoder Год назад

Thanks a lot! Please do share with other!

@AvinashSingh-tr5vt Год назад

Amazing! Eagerly waiting for 2nd part

@arpitj07_ Год назад

Great Video !! Looking for the part two now !!

@Kumawatlalit912 Год назад

i was really thinking that how vs code folder works and you dropped a video, Thanks a million for this wonderful video💖💖

@abhishekpundir5941 Год назад

Keep uploading these kind of videos...very informative and helpful. Keep growing ❤️

@rakeshkharvi4145 Год назад

Wow beautiful. Recursion thing works here !

@aaryansj8016 Год назад

Tysm bro.... I wasn't able such stuff in my project.... thanks..!!!

@NomadStriver 8 месяцев назад

This is great explaination. We need part-2 video.

@ibrahimsayyad5824 Год назад

Great project. Thanks for sharing

@sunilsarode152 7 месяцев назад

Superb content , thanks a lot :)

@hritikamathur3729 Год назад

Such informative and easy to understand videos you make! Thank you 😊

@RoadsideCoder Год назад

Welcome ❤

@vergil_389 6 месяцев назад

may all the good things happen in your life.

@shouvikchoudhury9691 Год назад

1k likes already completed, plz bring the part 2 of this video

@prikshit8 Год назад

recursion wala part. mind blown

@thirunavukarasusaminathan3102 Год назад

I really love this video and the concept of this unique one.👏👏

@RoadsideCoder Год назад

Thanks ❤️

@MrColins710 8 месяцев назад

good lesson, thanks for you work

@harshitsachan154 Месяц назад

Thanks for masterpiece.

@pratikwadekar4981 2 месяца назад

Brilliant Content and Amazing Walkthrough of the code. The fact that you think of the problems and tackle it into smaller sub problems is really appreciated. Bring more such machine coding problems 🔥

@RoadsideCoder 2 месяца назад

find more such questions here - roadsidecoder.com/course-details

@developermanish Год назад

Up until now i am thinking i know a lot i mean i know all the thing taught in the video but i never actually tried to write a good code and implementing concepts like event propagation ,custom hooks. There's still a lot to learn Keep the the good work man

@RoadsideCoder Год назад

Thanks man

@amulkumar5-yeariddminingen159 4 месяца назад

this whole playlist is cool

@arunyadav7467 Год назад

Make more such interview questions on react js this is really great sir

@EktaTiwari-ts8jl Месяц назад

Thank you for these videos/tutorials. Where is part 2 of this video on dynamic programming ??

@dineshkumargiri1659 Год назад

We are waiting 😍😍

@ankitkumarjat9886 Год назад

You can wrap input inside html form element can listen for onSubmit event And browser will handle enter button click and form

@piyushgupta6290 Год назад

Want to see more such machine coding Interview videos so that I can make some good projects for interview and sharpen my web dev skills. Great great job big brother

@RoadsideCoder Год назад

Thanks 🙏

@UmeshYadav-no7vm 11 месяцев назад

Please make second part of this video. Thanks

@cworks73 Год назад

Pakka test! Tnx

@Dev-Phantom 11 месяцев назад

cool, unique concept

@guryashzone Год назад

Mind Buzzing.

@vincent3542 Год назад

it's really cool broooooo!!!🔥🔥🔥🔥🔥🔥🔥🔥🙇🙇

@dimplesingh5329 Год назад

This type of question was asked to me when I was giving interview for Value labs.

@hritickjaiswal2393 6 месяцев назад

If you are inserting on the first level then state would be mutated instead of being created new , which is advised in react docs. Please check or point out if am wrong. Apart from that amazing video.🙂

@mehulbhatia6008 2 месяца назад

I don't understand why there are so less likes on such a great video. So informative and helpful for interviews. Keep up with such content!

@RoadsideCoder 2 месяца назад

💙

@asparshraj9016 Год назад

Oh boy, I still need to learn a lot.

@abhishekvishwakarma9045 Год назад

These kind of questions are very common in tech interviews and are also very interesting, (in one of the interviews I got to build a company-team-employee relationship which looks like an infinite tree structure and at the advance section I need to add a functionality that a team can fire/add an employee and similar for company-team relationship level -> time bound is 90min 🙃) I would Like to know your DP solution 😌, thanks for sharing your experience 🔥😎

@shagunpreetsingh7105 18 дней назад

Can you please share you problem's solution.. also if you applied DP as well

@abhisheksaxena4845 Месяц назад

giving marginTop and marginLeft to both files and folders options would have done it for all, the amazing recursive solution is handling everything very crazyyy !

@somyaranjandas4599 28 дней назад

you are boss of frontend

@jitu11 Год назад

Great content and explanation.

@RoadsideCoder Год назад

Glad it was helpful!

@Hari-mr1st Год назад

12:17 was shocking for me as well😮

@shagunpreetsingh7105 16 дней назад

A few questions: 1. Why to use a custom hook over a util function to insertNode in the tree? Since according to my understanding custom hooks has to be a "utility react component" 2. Should we deepcopy the actual tree and send that copy to the insertNode function to be cautious of any updations to the actual state (although it won't but we should always copy the state into new variable right?) 3. Please share the DP solution whenever possible 🙂

@praveengopakumar5059 Год назад

great content

@souvikmitra4953 6 месяцев назад

Explaining what one learns is a high level skill altogether and you ace this skill. May you have more success than what you currently enjoy going ahead!

@RoadsideCoder 6 месяцев назад

Wow, thank you for such awesome words brother!

@dcode721 11 месяцев назад

Great 🤯

@Sandeep-zd6dq Год назад

At 12:20, same reaction 😂😂😱🔥😎 then thought ki abhi kuch nhi aata apne ko abhi bahut kuch seekhna pdega 😂

@faaizalam235 Год назад

Bro please make more machine learning videos best work, and great contributions for new devs

@RoadsideCoder Год назад

Definitely!

@user-te1ct2gy5z 10 месяцев назад

I got this question in an Interview. They asked me the same to do in vanilla javascript.

@coderRox 5 месяцев назад

Nice video, you have the explorer reference, i don't think we need the useTraverseTree hook.

@Ravi_Goyal 9 месяцев назад

in insert node function if we want to add folder to public then it will traverse rest of the folder also. we can stop if folder is added not to traverse rest of the folders. latestNode = tree.items.map((ob) => { return insertNode(ob, folderId, item, isFolder); });

@mystory5328 Год назад

Thanks your content. Can you make a big project based on typescript redux toolkit.

@fifi5765 Год назад

1sub from here XD for this video

@jagjot1697 Год назад

Great video! Can you share the codesandbox link? Also, if possible please make more videos with real world use cases of DSA. Maybe then I can finally convince myself to get on that Leetcode grind one day xD

@RoadsideCoder Год назад

Github link is in description

@thekamol Год назад

What a interesting and useful video, thanks Piyash a lot! More kinda react videos please! 🔥🔥

@dharmeshgohil9375 Год назад

awesome

@_MS98 Год назад

Thanks 😀😀

@rakaa31 Год назад

are bhai Saturday ko hi release krte, Sunday Evening is kind of relaxing!

@anuragdas1978 Месяц назад

I was think of using a priority queue so that the files and folders are in a sorted alphabetical order.

@akashdasgupta7493 5 месяцев назад

Bro the problem was same and what you experienced same I did, even I was shocked how did it recursively call the component 😂

@ankitagarwal4914 11 месяцев назад

1000 likes are already done , we are waiting for part2 of this (dynamic programming , edit and delete)

@RoadsideCoder 11 месяцев назад

Thanks for reminder, I'll plan the next video!

@ankitagarwal4914 11 месяцев назад

@@RoadsideCoder thank you

@ankitagarwal4914 4 месяца назад

Hi Piyush - It might be slip through cracks , as time permits request you to release part 2 of this Edit and Delete part

@nitigyajoshi4658 Год назад

Thanks bro

@learningjoe1823 Год назад

I am a full stack developer (Reactjs, Nodejs MySql, Mongodb) with one year of experience at a service based company. I am looking for a frontend role specific job in a product based company.

@decostarkumar2562 6 месяцев назад

Sir why to use spearate hook with dfs for addig folder or file ? Can't we juat add extra folde or file at the position where we pressed enter key in the items folder ? It is working in my code that's why ...

@aqibmalik6313 18 дней назад

You promised another video on this after 1k likes and ur video already has 2.6k likes Please uploading the continuation video

@MrinalFouzdar 6 месяцев назад

waiting for part 2

@karunasagarks5228 3 месяца назад

Part2 please

@shivankkunwar9669 7 месяцев назад

Can you also share in real interview how would you go about thinking of structure of data like the JSON data you use - wouldn't this require thinking all the possibility of data required and hence first completely thinking about the structure of the app ?

@mazenfayez5824 Год назад

as express backend developer, what topics should i cover before the interviews , auth , tokens , hashing , restful api and database , is there anything else should i study?

@rakaa31 Год назад

nyc brother make some interview questions on react

@RoadsideCoder Год назад

Surely!

@himanshujaviya6021 Год назад

Please Part 2

@varungondu7053 7 месяцев назад

I got this question in citizens bank interview

@varswe 7 месяцев назад

Yes DSA is used, but only basics, not those wiredo leetcode problems, most of the times where intense dsa is needed, those things are done by DSA specialists

@AnkitncrVlogs Год назад

how to make table Data shorting This is my Interview question With MNC ... // on first click list will sorted in assending order // on second click list will be sorted in descending order // on third click default list will be rendered // on fourth click again start form step 1

@awais_ansarii 9 месяцев назад

❤

@rishiraj2548 Год назад

Thanks

@RoadsideCoder Год назад

Welcome bro ❤

@TheMayankkhare92 Год назад

What is the interview process at Microsoft for Frontend Engineer roles?

@anandbaraik5010 Год назад

Can you build `n level comments` app for mahine coding? Kindly bring something like this.

@parmarhitendrasinh4504 Год назад

can you please give hint about applying dp on this problem

@AnuragArwalkar Год назад

We dont need to traverse the ree to add element we can use reference variable to push the children and then we can force render react component

@RoadsideCoder Год назад

But will that update the explorer object?

@resetengineering Год назад

Can See 1000 likes. Where is part2?

@rakeshkharvi4145 Год назад

Pls try to build infinite scroll using js

@anchalgupta8293 11 месяцев назад

This is easy way , try to make directory with depth of each node

@nikhilchawla6482 17 дней назад

As we already have the reference to the object and items so cant we add directly to the items the new folder of file instead of looping and find. can someone explain?

@Akash-xv5sk Год назад

It was really cool, how did you insert folder icon next to element inside JavaScript file itself, please share with us.

@RoadsideCoder Год назад

PC - Windows + ; Mac - Fn key

@jitu11 Год назад

@@RoadsideCoder for Mac, Fn key with which key ?

@RoadsideCoder Год назад

that's it

@arwahakimuddin4595 Год назад

Hi , How do u open browser tab in VS code?

@iplmaniac Год назад

Please make videos on these- Comment system Kanban Board Pagination Carousel/Slider

@RoadsideCoder Год назад

Thanks a lot for suggestions

@helix8847 Год назад

Would there be much difference doing this with TS?

@adwaithks Год назад

thank you❤

@RoadsideCoder Год назад

Welcome!

@adwaithks Год назад

@@RoadsideCoder What if we can have multiple folders and files at the root level? in that case we have to use array of objects right?

@RoadsideCoder Год назад

@@adwaithks yes

@vamshikrishna6001 2 дня назад

Waiting for Dynamic programming algorithm.

@creatorstudio5945 3 месяца назад

Sir, are such questions asked from fresher too?

@importcode6908 11 месяцев назад

Sir ,love the way you taught us but can you give some intuition and insight before directly jumping to coding part so we can think about how we should approach for the solution

@RoadsideCoder 11 месяцев назад

Ok bro, I'll keep that in mind now!

@importcode6908 11 месяцев назад

@@RoadsideCoder 😍

@samyakjain4715 Год назад

Why this tree is not getting affected by pass by reference?

@JassPlayz_ 11 месяцев назад

Bhaiya redux toolkit pe video bnao plz

@rohitrox73 Год назад

bhai what should i do to get interview from big tech company for react js developer

@chetanj5031 Год назад

Hi, In use-traverse-tree hook, isn't it wrong to mutate the state directly by doing tree.items.unshift ?

@mehulsinghteya9144 9 месяцев назад

I was also looking for the same thing. In my opinion, we can use the native window.structuredClone() function to make a deep clone the state object first then we can mutate the new duplicated state variable in the functions.

@saurabhbisht2238 Год назад

did you had a round in cars24?

@debugloop Год назад

what mic do you use bro ?

@malleswararaoganapavarapu8685 15 дней назад

Instated of Json file , i would like to upload files and display as file explorer. Please give me the code if you have

@projectsnik305 Год назад

Bro can't we just do this with Redux or Zustand instead of custom hook??

@roshan-jha Год назад

Don’t you think useTraverseTree is an extra added complexity?😅 You could’ve used folder object reference directly🙃 then and there.

@silverbullet_17 6 месяцев назад

exactly I did the same @RoadsideCoder please ans if we missing something

@anuraggharat5453 6 месяцев назад

@@silverbullet_17 what approach did you use? can you explain ?

@silverbullet_17 6 месяцев назад

@@anuraggharat5453 adding a new folder using the reference passed in every folder component

@nishantmoolya 2 месяца назад

@@silverbullet_17 can u explain in more detail and is the UI gets updated by this method?

@silverbullet_17 2 месяца назад

@@nishantmoolya yes it gets updated!! when you loop in the file just pass the reference of the current object and then update it as required. that's it