Hello Devs,

The feature we are building today is frequently asked in React interviews. But it doesn't test only your React skills, it test your overall JavaScript and basic logic building skills.

So, let's dive into building our fourth frontend feature: [Folder/File explorer UI]

What are we building?

Live preview with code: https://stackblitz.com/edit/vitejs-vite-4bqecn?file=src%2FApp.jsx​

Philosophy

The basic philosophy behind building a "Folder/File explorer UI" is as following:

• List all the folders and files in the root directory.
• Clicking on folder name should expand to show all the files inside that folder.
• Clicking on folder again should collapse to hide all the files inside that folder.
• Clicking on a file would do nothing in our case.

System Design

To mimic a VS code like folder/file structure we will create a JSON object. This object will contain all the folders and their nested folders/files.

Alright, but there is a big question here. How do we identify which entry in JSON object is a folder and which one is a file?

Well, we can keep nested folders/files in an array of object and add a flag `isFoloder`.

Here is our JSON object with all folders and files.

Now we just need to access this JSON and render the folders/files name in UI. So let's do that.

Let the coding begin.

We'll start by fetching JSON data and map over it in `App.jsx`. And at each iteration we will be check if the item is a folder or a file.

If it is a folder we will return `<Folder />` component else `<File />` component is returned.

Now, let's define our `<Folder />` and `<File />` components.

`components/Folder.jsx`

`components/File.jsx`

Awesome, this renders our folders and files on screen. But wait, ideally we should see a folder structure like the following on screen.

But what we see right now is just `index.html` and `app`, but why?

This is where this question becomes a little bit challenging. Can you figure out on you own? Try and then come back.

Ok, let's solve it.

So, basically we are iterating over top level data only in `App.jsx` that's why it only shows top level folder and file names on the screen. How do we iterate over the nested data? Like inside `app` and then inside `src`.

Well, we can manually do it for `app` and `src` but then it would fail if we change our JSON structure. Our solution should be such that it works automatically with any change in JSON structure.

Inside the `Folder.jsx` we will again map but this time over nested data and check for `isFolder` flag.

If `isFolder` is false `File.jsx` is returned, else `Folder.jsx` is returned from `Folder.jsx` itself.

Notice, the `Folder.jsx` is returned from `Folder.jsx` itself, and that is recursion. With that now all our nested data is taken care of, no matter how deeply they are nested.

There is also an `isExpanded` state added, which just tracks if a folder is in expanded or collapsed state. And based on that the nested data of that folder is shown or hidden.

Now, try changing the JSON structure and our feature will still work. And that is awesome.

P.S:

This feature is not tough to build if you understand recursion. But I also know that recursion is not an easy concept to wrap our head around.

And there are many more concepts like recursion. And That's why I am building a resource which will teach you such programming concepts with visual examples.

And don't worry it is not gonna cost you anything.

I am still working on that resource, and am very close to launch it.

So, stay tuned and join the newsletter if you haven't already.

At last, as always

Reply to this email, if you have any suggestion on which feature should I build next.