I am totally blown.. became an instant fan of this guy.. Love the teaching.. simplicity.. elegance.. ticked all the things.. don't remember when I was so impressed with just one tutorial video.. hats-off!!
Loved how you made your way to the solution step by step by writing the duplicate code first and then separating that into its component, then fixing the data structure, then the types, then the naming. This not only shows me how to implement the topic but also how I should be thinking if I run into duplicate code.
Glad to hear the approach landed! I always like to motivate every step because in the real world you should only use a new approach or tool if you have a specific pain point it addresses 👍
Crazy that I was building something similar at the moment, got somewhat stuck trying to think of a solution to do recursion, and this videos drops. Thank you so much!
Wow! what a talent you have for explaining! I managed to make it work, and because I understood the whole process I was able to adapt it to my system, where I needed to show some data with a hierarchical structure. Thank you very much!
Great tutorial. It is not just presenting the final code, Sam demonstates how a programmer can move forward building and cleaning the code. Thank you Sam, for sharing the video. I will be waiting forward for more mindblowing contents.
What an amazing explanation of data structure usage with react components. It is literally the best explanation I've seen since i started learning react👍👍💖
I am so glad I stumbled upon this channel, that was so interesting to learn about! That was also so incredibly smooth and well edited. If you did this in one take, that's unbelievable.
Thanks for the kind words! I made a Radix UI course earlier this year but it was more focused on microinteractions - can you give some more examples of which primitives from Radix you'd like to see more of?
@@samselikoff I would like to know your opinion about the need for something like Shadcn/UI and alikes. Does it really provide value over plain Radix? Or anybody could just style Radix with ease? BTW, great video, pretty clear and to the point without missing anything.
Very nice tutorial, I subbed immediately. Just like to point out that outside of react, recursion can also be used to calculate factorials, permutations, summation series, etc due to the repetitive nature of these calculations. It helps to understand recursion in a general sense so we know when to apply recursive patterns.
@@nourigadjanibrahim Cool idea! Would you want to see the folder/file creation actually happen on the filesystem, or in a database with virtual files/folders?
Fantastic explanation. Also lots of little workflow tricks in here. I didn't realize there were 3 ways to use double cursors. Also never used emmet->remove tag!
absolutely amazing. i love your style and your videos always amaze me. keep it coming! i recommend creating some shorter videos which shows some tips and tricks
Great example of recursive components. The next task you might want to consider is to have recursive components that effect state, where the page/top level state is changed, and also the specific child component state is changed (effecting it's child component) - which will cause too many re-renders if not handled correctly. Not to give away the answer, but imagine a top level state that is an object, where the child components have a button that can add new levels to this state onto themselves. The state must be pushed upwards in this case, and passing keys won't work in a multi level nested object (in an onChange for example). The task therefore is to have the state reflected correctly without causing too many re-renders. Happy to walk through in more detail, might be nice for another video for you.
Yeah that sounds like a fun one! In general I don't like to think about re-renders in React until they cause a problem (and I think others should do the same). There's plenty of examples where the approach here will work just fine for. Also I'm hopeful the React Compiler will make that sort of perf optimization unnecessary.
Thank you for sharing! The feature is great. Could you also consider adding drag-and-drop functionality for folders and files? That would be fantastic!
damn i never thought rendering a Component in itself was possible. On the other hand why wouldnt it work? its just a function. :D learned a new thing today. Thank you!
Yeah I thought about this as well - I think I'd reach for a useLocalStorage hook for each node and use a single Set with the node's `id` as a key to pull this off
Awesome tutorial man! One way the code could be improved is to make a component for a Folder and other for a File (kinda like a strategy). And since the collapsible state matters only for folders you could avoid creating unnecessary state for files
Thanks! I actually think it's cleaner with one component - my general rule is to not extract until it's painful. I really appreciate how easy React makes it to incrementally add complexity & I fully embrace it in my work! If it started to get crazy you could definitely abstract but in my experience it's best to hold off abstracting as long as possible.
Built something like this a few times and you gota be careful on very deep tree's when using state, lots of re-rendering! hopefully react compiler will solve all of that soon!
Hey Sam, loved this explanation and your way of teaching things step by step. I’ve been learning and using vim from past few months… may I know what shortcut did you use at 18:56 for renaming “Folder” to “Node” everywhere in the file? Also are you using VS code with vim enabled or the terminal with NVIM or something ?
Thanks for the kind words! The rename is a VSCode feature, you can find it as "Rename symbol" in the command palette or with the F2 shortcut (which is how I do it). It renames things semantically so it understands scope and everything. Definitely one of my fave features and I use it all the time. I use VS Code with the vim extension: marketplace.visualstudio.com/items?itemName=vscodevim.vim
To understand recursion, first you have to understand recursion.
Agreed, but both come right after understanding recursion
Very recursive.
Pretty much 😅😂
I see what you did there 😅
How to explain recursion without explaining it 😅
I am totally blown.. became an instant fan of this guy.. Love the teaching.. simplicity.. elegance.. ticked all the things.. don't remember when I was so impressed with just one tutorial video.. hats-off!!
Yes. The videos from this secret love child of Bradley Cooper and Hugh Jackman do indeed slap.
I can’t stop staring at his face; too hot to handle AND he’s smart? we need more from him
i agree, he is the best!
*insert “Phrasing” Archer gif here*
Loved how you made your way to the solution step by step by writing the duplicate code first and then separating that into its component, then fixing the data structure, then the types, then the naming.
This not only shows me how to implement the topic but also how I should be thinking if I run into duplicate code.
Glad to hear the approach landed! I always like to motivate every step because in the real world you should only use a new approach or tool if you have a specific pain point it addresses 👍
Crazy that I was building something similar at the moment, got somewhat stuck trying to think of a solution to do recursion, and this videos drops. Thank you so much!
What an amazing video! This guy just made me the fan. The way he proceeds from scratch to the last was just incredible. Hats off to you.
You're insanely talented, your teaching skills are top-notch.
Wow! what a talent you have for explaining! I managed to make it work, and because I understood the whole process I was able to adapt it to my system, where I needed to show some data with a hierarchical structure. Thank you very much!
-enjoying 100% and understanding 10%
This is sooooo good , your style of explaining is very elegant.
I loved how he explained this topic. Thanks for your approach! Now it seems more easy.
Wow he has made this look so easy, while explaining it so clearly and concisely, was struggling with Typescript, now I think I understand it.
Incredible video, simply explained. I’ve always heard about recursion but never had to apply it, this gave me the light bulb moment! Biggups.
Just straight to the topic no intro no fancy drama..this is lit 🔥 awesome
This is one of the best channels for learning react.
Welcome back Sam! The world is safer when you are around :) Thanks for this one also! Very nice way to build a documentation page navigation.
I was looking into building something like this, this video was great. You've earned yourself a lifetime subscription for buildio .
I truly appreciate the support
Great tutorial. It is not just presenting the final code, Sam demonstates how a programmer can move forward building and cleaning the code. Thank you Sam, for sharing the video. I will be waiting forward for more mindblowing contents.
What an amazing explanation of data structure usage with react components. It is literally the best explanation I've seen since i started learning react👍👍💖
I am so glad I stumbled upon this channel, that was so interesting to learn about! That was also so incredibly smooth and well edited. If you did this in one take, that's unbelievable.
Very good tutorial. I used recursion in a threejs react component a while back and this is a good use case for it. Thanks for the effort.
The Way you are using your editor is wonderful.
i never knew about the react recursive components before, but this video cleared most of my concepts, and it was so cool 🙌
I had done kind of the same thing a year ago for a project of mine. I really like the way you explained it. Thank you for sharing.
Absolute 💎 and loved the react conf presentation as well !!!
This tutorial video is amazing, and I am grateful for your help! Keep the good work bro!
It was almost magical as you progressed. Really like your teaching style. Wow I am amazed
I am yet to see a cooler react tutorial. Its so cool and useful
This guy deserves more subs man
Amazing tutorial, explanation is so clear.
Thanks.
Nice tutorial. This video's format is just perfect. Thanks a lot !
maan, great to see you back on YT!
Love your videos 🙏🙌
Thanks Sam for all you do for the community. I would love to propose a tutorial on Radix UI, hopefully a responsive landing page or more
Thanks for the kind words! I made a Radix UI course earlier this year but it was more focused on microinteractions - can you give some more examples of which primitives from Radix you'd like to see more of?
@@samselikoff Thanks alot for your response. Layout design showcasing the use of grid and flexbox would be fun to watch
@@samselikoff I would like to know your opinion about the need for something like Shadcn/UI and alikes. Does it really provide value over plain Radix? Or anybody could just style Radix with ease?
BTW, great video, pretty clear and to the point without missing anything.
This was so well delivered!
thanks for your video sam! I am looking forward to your new course.
I can't stop myself:
Really Really Amazing 👏
thats soo awesome ddude , i struggled to make one for one of my projects few days ago but not able to .. thanks .
Thank you so much sam, very helpful content, please keep posting videos
Very nice tutorial, I subbed immediately. Just like to point out that outside of react, recursion can also be used to calculate factorials, permutations, summation series, etc due to the repetitive nature of these calculations. It helps to understand recursion in a general sense so we know when to apply recursive patterns.
Beautiful stuff man. Thanks for this!
Great!!! We are waiting for a sequel to this file management tutorial
Thanks! What would you like to see?
@@samselikoff Connection to a database. (CRUD) Automation of folder creation and file saving.
@@nourigadjanibrahim Cool idea! Would you want to see the folder/file creation actually happen on the filesystem, or in a database with virtual files/folders?
The drought is over! Love your videos. Never heard of this concept before!
Thanks for sharing. This is completely about the case which I was assigned.
Thank you for sharing.
This video helps me a lot.
Fantastic explanation. Also lots of little workflow tricks in here. I didn't realize there were 3 ways to use double cursors. Also never used emmet->remove tag!
I have seen this example before. But loved your video 😊
Thanks Sam! Love learning small powerful nuggets like this:)
Simple yet very informative video! Love it.
This is amazing!! wow, i'm impressed
absolutely amazing. i love your style and your videos always amaze me. keep it coming! i recommend creating some shorter videos which shows some tips and tricks
Just looking at this gives me an idea... Thanks ❤❤
Damn. You just made it look less overwhelming!
Sheesh, that is a beautiful implementation! Thanks, Sam!
missed your videos. absolutely love your videos. You are such a good educator
Awesome stuff explaining style is preety great and clear
Very informative..turns out I could have used recursion in my project
Great video, please keep em coming. We are learning a lot 🎉
Quality content, very clean stuff!
amazing bro, thanks for sharing ❤
This is very clean and too awesome ❤❤❤
it was great, thank you, and do make more videos like this
Great stuff! Very clear!
This is amazing!! Thank you Sam.
Thanks. Its super fun to learn.
Great example of recursive components.
The next task you might want to consider is to have recursive components that effect state, where the page/top level state is changed, and also the specific child component state is changed (effecting it's child component) - which will cause too many re-renders if not handled correctly.
Not to give away the answer, but imagine a top level state that is an object, where the child components have a button that can add new levels to this state onto themselves. The state must be pushed upwards in this case, and passing keys won't work in a multi level nested object (in an onChange for example).
The task therefore is to have the state reflected correctly without causing too many re-renders.
Happy to walk through in more detail, might be nice for another video for you.
Yeah that sounds like a fun one! In general I don't like to think about re-renders in React until they cause a problem (and I think others should do the same). There's plenty of examples where the approach here will work just fine for. Also I'm hopeful the React Compiler will make that sort of perf optimization unnecessary.
It went like breeze, appreciate it we need react with SOLID principle please
Can we add check boxes beside each node and add selection in parent children selection
This is genius. Subscribed
Thanks Sam !
Thanks for the video sir.
Lessgooo, Sam's comeback!
Nice explanation
recently for drag & drop I handled it in unelegant way, am going replace this with recursion.
Thank you so much man,
Great explanation!
Dude, this is so cool!
Thank you for sharing! The feature is great. Could you also consider adding drag-and-drop functionality for folders and files? That would be fantastic!
Finally Sam is back 💖💖
That was awesome!
Great video as always!
this is super helpful, thx :D need more pls
Nice it's help change browser UI Build Idea changes soon
You've got new subscriber
keep posting bro I like your vids
Finally more vids 💪
Him: How cool is this
This is so cool 💥💥🔥🔥
You are the GOAT sir ,3
It's awesome. Thank bro.🎉
damn i never thought rendering a Component in itself was possible. On the other hand why wouldnt it work? its just a function. :D
learned a new thing today. Thank you!
Absolute 💎
Great video
Awesome video 🎉
How would you go about keeping the state of each open folder so on a page refresh the same ones stay open?
awesome, it would be cool to see nodes having memory of its own collapse state
Yeah I thought about this as well - I think I'd reach for a useLocalStorage hook for each node and use a single Set with the node's `id` as a key to pull this off
you are genius
Sweet jesus, I didn't know rendering trees was this simple, or was it made simpler by sam?? Lovely stuff
Awesome tutorial man! One way the code could be improved is to make a component for a Folder and other for a File (kinda like a strategy). And since the collapsible state matters only for folders you could avoid creating unnecessary state for files
Thanks! I actually think it's cleaner with one component - my general rule is to not extract until it's painful. I really appreciate how easy React makes it to incrementally add complexity & I fully embrace it in my work! If it started to get crazy you could definitely abstract but in my experience it's best to hold off abstracting as long as possible.
so neat!
Nice explanation, thnks
Built something like this a few times and you gota be careful on very deep tree's when using state, lots of re-rendering! hopefully react compiler will solve all of that soon!
Hey Sam, loved this explanation and your way of teaching things step by step. I’ve been learning and using vim from past few months… may I know what shortcut did you use at 18:56 for renaming “Folder” to “Node” everywhere in the file? Also are you using VS code with vim enabled or the terminal with NVIM or something ?
Thanks for the kind words! The rename is a VSCode feature, you can find it as "Rename symbol" in the command palette or with the F2 shortcut (which is how I do it). It renames things semantically so it understands scope and everything. Definitely one of my fave features and I use it all the time.
I use VS Code with the vim extension: marketplace.visualstudio.com/items?itemName=vscodevim.vim
i used this before in one of my react job interviews. pretty cool!
Cool