Solving a practical intermediate react interview challenge
Вставка
- Опубліковано 26 вер 2024
- 💬 Discord / discord
🔔 Newsletter eepurl.com/hnderP
📁. GitHub github.com/cod...
My VSCode Extensions:
- theme: material community high contrast
- fonts: Menlo, Monaco, 'Courier New', monospace
- errors: Error Lens
- extra git help: Git Lens
- tailwind css intellisense
- indent rainbow
- material icon theme
- prettier & eslint
- ES7+ React Snippets
I watched this video entirely in my bed, and now I plan on practicing this for myself once I get out of bed. This was very interesting and helpful.
LMAo me too
Same here
Same 😅
We all are living the same lives 😂
11:26 A suggestion, the element might work perfectly as it has its own dropdown. You can nest the children inside without having to depend on a toggle state and semantic HTML is a plus.
Anyway, thank u so much for showing us how to tackle an intermediate react challenge. 😀
Great suggestion, and it seems supported everywhere.
You had something like that in mind ?
function Entry({name, children}: TEntry) {
return
{children ?
{name}
{children && {children?.map(value => )}}
: {name}}
}
I tested it and it does the job, no need for a button and such, great thinking !
5:58 I think it doesnt really need to keep track of depth, just use margin instead of padding, so it renders the indentation in relation to the parent element
This is actually great
IMO you don't need depth. Your child list could be a containing and that could be styled with a margin. The is also good for screen readers, where would be a list and the would be a role listItem. Also, if you are using expanding content, accessibility needs aria-expanded set.
This is so informative and real-world use cases like recursion, rendering, etc. Thanks alot for sharing.
You're very welcome!
I love watching you code man. I interned at a place last year using React and I was really bad at that. Watching you is making me want to try again with front end.
Give it another try!
WDJ this is awesome! Please more of this kind of content, more challenges (intermediate to advanced)!
The Essence!
I had to do a similar code challenge, but also I had to add an input next to every element in the tree after pressing the enter key the child should be added to the right tree level. I haven't received any feedback but looking at this video makes me feel like I did a good job! Thank you! :)
Thanks so much! I was about to give up leetcode because I didn’t understand the need for data structures beyond maps and arrays like trees, stacks, heaps as a frontend dev. But you just showed an elegant solution with recursion. Gives me good motivation to study more!
You don't need depth prop, with ol > li and padding does works
Nice, I like the way you handled the depth. This could also be done in CSS with a clever use of a sibling selector but I like the way you've done it here with js a little better.
Nice video. This gives me a lot of confidence if this is intermediate / advanced. Im only about a year into my first dev job but I could pretty easily come up with a solution for this.
Dude, love your videos. I always watch them before I go to bed to wake up first thing in the morning and practice on them 🤙
That’s a true fan!
You made this look super easy!
Button was not needed I think, could do the trick
Never was a person to comment on a youtube video, like or share it. But these types of coding for intermediate react js interview qsn made me do all those things.
tks dude, u help a lot with this code challenges series, i've never had think to use recursive code to render a component.
im a mid full stack dev and still great to see someone eleses thinking process. Grat content!
Thanks for the great content, as always, Cody!
These are the best! Please keep these coming!
Thanks 🙏🙏... This is exactly what i was gonna work on and your way is so much simpler
Loving this series and get learn something new before going to bed. 👍🏽
for the styling of the button you can use something like ->
button {
all: unset;
cursor: pointer;
}
then it will remove all the default stylings
This is some kind of content that is not available and really fun to watch
Appreciate this video! Just been given a project at work to design a section based hierarchy like this (ex. 1.0, 1.1, 1.1.2, …). Now just need to think about how to create subsections under the parent that line up with backend
Hey cody nice video! Next time for future code challenges can you maybe just give a bigger in depth explanation of the problem, with more examples, I didnt understand the problem at first or what it should look like(maybe im stupid😀), Thanks!
Awesome :D really enjoyed this!
Little late lol, but you don't need to add 10 padding * depth for esch node, since every node has already the cumulative padding of the previous levels. Otherwise your children will have always increasing padding compared to the previous ones
Many things to learn here
This was super helpful!
Amazing explanation
very good exercice
thanks a lot
more of these kind of videos please!
Instead of mapping over files in App component, just have a root Entry and when you nest it in App no need to reimplement mapping there.
Can bypass much of the react complexity by using and HTML tags
Beautiful
this is interesting.
Just recently i coded a Dynamically increasing tree. - to allow fetching additional folder data from subfolders and not loading everything at once.
Used a "Path" Variable, splitted it by "/" and used a recursive function to recursivly call itself until the splitted path is empty, returning the data.
It looks super weird in code. But i think i got a quite good solution.
Thanks 🤝💪
thank you
Awesome video
What if files was just an array of objects instead of files being an object with the children key ?
I have a year 2months of experience as full stack developer and I just applied for a job that required 3 years of experience as frontend developer
the phone screen was ok and they move me to the next role
how do I prepare it in one week ?
I will appreciate any advice here
Idk that’s a hard one. Fake it till you make it
How can we adapt this solution to keep track of which sub-folder has been opened, and keep that state persistently, even though the parent folder has been closed and then reopened?
I don't even know where to start with kind of problem. Thanks for enlightening me. Though I know recursion and why you used it here, is it required to know DSA at this point?
Hi Cody, I tried to build a tree using recursion and I was successful, however when I implemented a search algorithm to filter in the tree. I faced this invariant violation- rendered fewer hooks than expected. and now I am not able to move forward
very interested in this
how to setup auto complete optional chaining?
4:40
thanks really helpful. for this video do you practice it beforehand or straight live coding? thats awesome if it is live coding
I just start with the idea and start coding
Don't forget to add some maximum depth to prevent infinite recursion
It would be more easier if you used the details tag of html, don't you think?
good one
how to do you switch to the browser behind the vs code and the mouse stays on the same position?
do you mean the built in virtual monitors mac os provides?
13 min video to make that, probs a good hour for me😂 (I'm a beginner btw)
Where do you get these react challenges? Or do you just randomly think about it or came across it
I just make them up
How does the isExpanded && () work?
If isExpanded is truthy it’ll render the next part out to the screen
I aspire to someday be a Frontend Developer (never applyed to jobs cause i didn't study cs and feel like I'm not enough).. and when I saw that this is Intermediate I feel like I'm already a "Senior" cause this looks pretty easy to me.. So my question is, how much should I ask for when I get an offer? :)
The intermediate is all relative. Your starting rate would probably be the average for your country and area for a junior dev if you never had a coding job. Again, these challenges are just to verify you can at least code and problem solve, there would still be a lot of questions and discussions that might happen before or after any coding challenge.
There's an html tag called details that would've been better suited for this
This is what i was asked yesterday, and i solved it after the interviewer was gone
From.where do u find these questions is there any website for daily react js challanges
I usually make them up
@@WebDevCody will u make more like 30 days challenge from biggner to advance please it will help a lot for interview for a Fresher like me
Is this consider intermediate/advanced? I believe there must be harder questions than this that are for begginers
Yeah, this definitely is an very, very easy one. We would only use such an example if the candidate is super nervous to hand them a free win and move on to an actual coding interview. Even with that being the case, the shown solution definitely would be docked some points
Is vite better than yarn? or whats the diference between them?
They are different tools. Vite is similar to webpack and it’s used for bundling your code. Yarn is similar to npm and is used for managing project dependencies
Can someone tell me where he used the recursion?
The function entery has
a component entry that references the entry function. You can see that entry references itself. This is recursive as it will continue to call entry on the stack until there is no more children, which is our base case, and then we exit returning entry.
Hi where do you get your practice questions from?
Other people and I make some up
i think there is a tiny bug in your isExpanded logic.If u click the button all other files expanding ,in my opinion expanding state must be unique for all parent files and toggle it individually.
I don’t see the bug, joi isn’t expanded when node_modules is expanded
@@kris24_lawson yes you are right there is no bug at all cause of the every time new component render and it has a prop individually
@@gorkemeldeniz9579 would you please go into more detail? I initially thought the same thing as your first comment.
@@alexluu3615 if the parent component share expand state as a prop to children it effects all other child components but he make the statement in the children component therefore it does not effect each other all states are individual
@@gorkemeldeniz9579 thank you for your response and helping clear the confusion. best of luck to you and your coding journey!
nice
Nested drop-down list?
Amazing!
Just speak a bit slowly and up please.
Not only native english speakers watch you!
Typescript does seem a lot of extra boilerplate and work
In small project sure it might seem so, but as it gets bigger advantages are far more visible
It’s useful, I promise
The problem is that I see a lot of videos where there is all this extends, typeof, generic, , and it all looks confusing.
A good example would be the youtuber Matt Pocock, he is supposed to be a typescript wizard and he does all this stuff with it and it is a little daunting to us beginners
@@SahraClayton Most of the 'generic sorcery' makes the code really hard to read for TS beginners but it shouldn't discourage you from utilizing structural typing in your codebase.
@@SahraClayton Well ts typesystem is basically a new language on top of a javascript so you simply have to learn it to understand more complex stuff with generics
hello bro, my question is out of the topic but does RTK still makes sense with NextJS 13 app directory? or any state management you suggest to be use?
I like jotai right now. Super simple to setup and share state between components.
123
Get well soon, Web Dev Junkie 🙏🤗.
Thanks for the video 🍉😉👍!
Bro can you make better title?
what's wrong with the title lol?
I think he's distrete with his titles to prevent people from easily searching for the solution when prepping for coding interviews.
What would you recommend the title being?
@@mjohnson510 actually i didn’t think of that, but that’s a good reason. I figured having “intermediate interview challenge” would bring more views than “building a file tree viewer in react”. People like prepping for interviews, they don’t care about building a tree browser 😂
@@WebDevCody I actually got the File Structures problem from Atlassian lol.
But, I like your titles. I actually search React Intermediate/Advanced interview problems then the actual specifics
I just wanted a simple mockup tree from an acual folder and came up with this in PowerShell, you do however need to pipe it to "Convertto-Json -depth 100" after to format it correctly.
function Get-HTMLFileTree($dir) {
$folder = Get-Item $dir
$html = [System.Collections.ArrayList]@()
$obj = [PSCustomObject]@{
name = $folder.name
}
if ($folder.Mode[0] -ne 'd') { $html.Add($obj) | Out-Null; return $html }
$obj | Add-Member -MemberType NoteProperty -Name children -Value ([System.Collections.ArrayList]@())
$children = $folder | Get-ChildItem
foreach ($child in $children) {
$obj.children.Add((Get-HTMLFileTree -dir $child.FullName)) | Out-Null
}
$html.Add($obj) | Out-Null
return $html
}
(ex. Get-HTMLFileTree -dir . | Convertto-Json -depth 100 | Set-Clipboard)
That's called accordion and it is an easy one
I think one optimization... it's possible without the nested mapping. Remove the initial mapping and pass 'entry.children' directly into then mapping there, while checking 'entry.children && ' to trigger the recursive.
any who, thank you for this challenge! watched the video and jumped on the computer like "YOU CAN RECURSIVELY RENDER?!"
This was actually pretty straightforward, I expected it to be harder for an intermediate challenge. I feel like my imposter syndrome often acts up but most of these challenges end up being a breeze. Time to start applying for more senior roles I guess.