Tutorial: ReactJS multi-level navigation menu with MaterialUI & TypeScript

Building a ReactJS multi-level navigation menu with MaterialUI & TypeScript

Author Hints

If the single stage hase same file multiple variations, which should be embedded Create filed variations

{FileName}.tsx -> Final result {FileName}-v{versionNumber}-version-description.tsx ...etc

This Allow to embed same file multiple versions into the article

Medium Code Embeds:

Stage 1

https://codesandbox.io/s/github/modularcoder/tutorial-react-tree-menu/tree/master/stage1-main-setup

https://codesandbox.io/s/github/modularcoder/tutorial-react-tree-menu/tree/master/stage1-main-setup?fontsize=14&hidenavigation=1&module=%2Fsrc%2FApp.tsx&view=editor

https://codesandbox.io/s/github/modularcoder/tutorial-react-tree-menu/tree/master/stage1-main-setup?fontsize=14&hidenavigation=1&module=%2Fsrc%2FApp.tsx

https://codesandbox.io/s/github/modularcoder/tutorial-react-tree-menu/tree/master/stage1-main-setup?fontsize=14&hidenavigation=1&module=%2Fsrc%2FApp.tsx&view=preview

Stage 2

https://codesandbox.io/s/github/modularcoder/tutorial-react-tree-menu/tree/master/stage2-menu-layout

https://codesandbox.io/s/github/modularcoder/tutorial-react-tree-menu/tree/master/stage2-menu-layout?fontsize=14&hidenavigation=1&module=%2Fsrc%2FAppMenu.tsx&view=editor

https://codesandbox.io/s/github/modularcoder/tutorial-react-tree-menu/tree/master/stage2-menu-layout?fontsize=14&hidenavigation=1&module=%2Fsrc%2FAppMenu.tsx&view=preview

Stage 3

https://codesandbox.io/s/github/modularcoder/tutorial-react-tree-menu/tree/master/stage3-recursive-menu-item

https://codesandbox.io/s/github/modularcoder/tutorial-react-tree-menu/tree/master/stage3-recursive-menu-item?fontsize=14&hidenavigation=1&module=%2Fsrc%2FAppMenuItem-v1-proptypes.tsx&view=editor

https://codesandbox.io/s/github/modularcoder/tutorial-react-tree-menu/tree/master/stage3-recursive-menu-item?fontsize=14&hidenavigation=1&module=%2Fsrc%2FAppMenuItem-v2-implementation.tsx&view=editor

https://codesandbox.io/s/github/modularcoder/tutorial-react-tree-menu/tree/master/stage3-recursive-menu-item?fontsize=14&hidenavigation=1&module=%2Fsrc%2FAppMenu.tsx

Stage 4

https://codesandbox.io/s/github/modularcoder/tutorial-react-tree-menu/tree/master/stage4-react-router

https://codesandbox.io/s/github/modularcoder/tutorial-react-tree-menu/tree/master/stage4-react-router?fontsize=14&hidenavigation=1&module=%2Fsrc%2FAppMenuItemComponent.tsx&view=editor

https://codesandbox.io/s/github/modularcoder/tutorial-react-tree-menu/tree/master/stage4-react-router?fontsize=14&hidenavigation=1&module=%2Fsrc%2FApp.tsx