Build a recursive file explorer tree view, similar to the sidebar in VS Code.
👉 https://www.reactchallenges.com/challenges/file-explorer
🧠What you'll practice
- Managing local state with
useState - Recursive thinking in React
- Rendering nested data structures
- Building clean, composable components
- Handling UI state at scale
📂 The challenge
You’ll implement a tree view where:
- Folders can be expanded and collapsed independently
- Each node manages its own state (no global state)
- Nested folders are fully supported
- Depth is visually represented with indentation
- Only folders are interactive (files are static)
- Accessibility is considered (
aria-expanded)
🎯 Goal
This is a focused exercise designed to help you:
- Think in component trees
- Get comfortable with recursion in UI
- Build patterns that scale to real-world applications
👉 https://www.reactchallenges.com/challenges/file-explorer
Top comments (0)