How to build a Recursive React Component

Learn how recursion works in React by building a simple filesystem viewer.

Timestamps:

0:00 - Intro
2:51 - Adding subfolders
4:53 - Extracting a Folder component
5:37 - Adding Recursion
9:43 - How to type recursive components
11:30 - Adding files
13:52 - Making the folders collapsible
18:24 - Refactoring and polish
19:45 - Final demo
20:23 - New course!

[srymisclick]

To understand recursion, first you have to understand recursion.

[nagasrinivasvinodkumarpand]

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!!

[azkaarkhatib]

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.

[extremus]

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!

[Szchmausser]

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!

[BeeBeeEight]

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.

[parkerrex]

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!

[MrBumbo]

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.

[mikeom]

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.

[danieladionisio]

I loved how he explained this topic. Thanks for your approach! Now it seems more easy.

[thabosiphiwemngoma]

I am yet to see a cooler react tutorial. Its so cool and useful

[privateaccount]

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.

[WahiduzzamanHridoy]

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.

[shoebuddin]

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👍👍💖

[tomershechner]

You're insanely talented, your teaching skills are top-notch.

[ilirbajrami]

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.

[olawumisegun]

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

[amanjha]

Just straight to the topic no intro no fancy drama..this is lit 🔥 awesome

[tritc]

This tutorial video is amazing, and I am grateful for your help! Keep the good work bro!

[nourigadjanibrahim]

Great!!! We are waiting for a sequel to this file management tutorial