What is the use of AppShell.xaml in MAUI?

I went through the official docs, but I still need to know the in-depth use of AppShell.xaml and the App.xaml files and how they differ from each other in the MAUI.

PS: This post is intended to act like a documentation in future for beginners struggling with MAUI.

AppShell provide the navigation for the app. The visual hierarchy of a .NET MAUI Shell app is described in the subclassed Shell class, which the project template names AppShell. A subclassed Shell class consists of three main hierarchical objects and they are all in the AppShell.xaml file:

1. FlyoutItem or TabBar. A FlyoutItem represents one or more items in the flyout, and should be used when the navigation pattern for the app requires a flyout. A TabBar represents the bottom tab bar, and should be used when the navigation pattern for the app begins with bottom tabs and doesn't require a flyout. For more information about flyout items, see .NET MAUI Shell flyout.
2. Tab, which represents grouped content, navigable by bottom tabs.For more information, see .NET MAUI Shell tabs.
3. ShellContent, which represents the ContentPage objects for each tab. For more information, see .NET MAUI Shell pages.

From MS documentation:

App.xaml and App.xaml.cs:

1. App.xaml is where you declare resources that are used across the app.
2. App.xaml.cs is the code-behind file for App.xaml. Like all code-behind pages, it contains a constructor that calls the InitializeComponent method. You don't write the InitializeComponent method. It's generated by Visual Studio, and its main purpose is to initialize the elements declared in the XAML file.
3. App.xaml.cs is the entry point for your app.