Notes APP using Vite + React + TS

Libraries/Tools used:

1. React.ts using Vite
2. react-router-dom
3. bootstrap, react-bootstrap for styling

Module Alias in Vite

• Apart from setting up the alias in tsconfig.json, we need to add a property resolve.alias to vite.config.ts.

React Router nested routes with common layout

• The nested route structure can be seen here.
• In our case, single Note Page(both show & edit page) have a common layout.
• In the common layout, we refer to actual route using Outlet component.
• To pass any data in it we use a prop called context.
• To access the context passed in parent(common) layout, we use a hook called useOutletContext.