Add a Quick Start page to the Learning/UI docs

docs/learning/tutorials/develop-web-viewer.md

@@ -5,6 +5,7 @@
 - [Install necessary prerequisites]($docs/getting-started/development-prerequisites).
 - From a terminal, `npx create-react-app your-app-name --template @bentley/itwin-viewer --scripts-version @bentley/react-scripts`.
   - This will generate a new application based on the iTwin Viewer React component in the `your-app-name` directory.
+- In the `your-app-name` directory, `npm install`.
 - Open the `your-app-name` directory in VS Code.
 - Add a valid contextId (i.e. Project Id) and iModelId for your user to the IMJS_CONTEXT_ID and IMJS_IMODEL_ID variables in the .env file within the application's root directory.
   - You can obtain these ids from the "GUIDs" column of your [registration dashboard](https://www.itwinjs.org/getting-started/registration-dashboard?tab=1)

docs/learning/ui/AugmentingUI.md

@@ -1,8 +1,40 @@
-# Augmenting the UI of an IModelApp
+# Augmenting the UI of an iTwin App
 
 There are two basic ways to augment the UI of a host IModelApp. The first way is for an extension or a package to provide an entire stage definition and call `ConfigurableUiManager.addFrontstageProvider` to register it. A [UiItemsProvider]($ui-abstract) may also need to be registered if the backstage is to be used to activate the frontstage. The second way is to use a `UiItemsProvider` to provide definitions for Tool buttons, Status Bar items, and Widgets to add to an existing frontstage. In this scenario, as frontstage components are constructed at runtime, calls are made to all registered UiItemsProviders to gather item definitions to insert into the host applications UI. The item definitions are sorted and arranged by their itemPriority value.
 
-## Example adding a frontstage
+## Adding ToolButtons, Status Bar items, and Widgets to existing application frontstage
+
+A [UiItemsProvider]($ui-abstract) is used to provide items to insert into the UI of an existing stage. When constructing the stage the ui-framework code will request item definitions from the UiItemsProvider. These calls will always include the current frontstage's Id and usage. An extension can use the info to decide which items to add. The stageId name's used by an application may not be useful unless the extension is just used in a single host app where the stage names are known. The stageUsage value is also provided, this string is typically set to one of the standard [StageUsage]($ui-abstract) enum values.
+
+### Adding a ToolButton
+
+Below is the UiItemsProvider function called when ui-framework is populating toolbars.  The [ToolbarUsage]($ui-abstract) will indicate if the toolbar is on the left (content manipulation) or right (view navigation) of the application window. The [ToolbarOrientation]($ui-abstract) specifies if the toolbar is horizontal or vertical.
+
+```ts
+public provideToolbarButtonItems(stageId: string, stageUsage: string,
+  toolbarUsage: ToolbarUsage, toolbarOrientation: ToolbarOrientation): CommonToolbarItem[]
+```
+
+### Status Bar Item
+
+Below is the UiItemsProvider function called when ui-framework is populating the status bar footer.
+
+```ts
+public provideStatusBarItems(stageId: string, stageUsage: string): CommonStatusBarItem[]
+```
+
+### Widget Item
+
+Below is the UiItemsProvider function called when ui-framework is populating StagePanels. The [StagePanelLocation]($ui-abstract) will be the default location for the widget. The [StagePanelSection]($ui-abstract) will specify what zone/area in the panel should contain the widget. Since widgets can be moved by the user, the locations specified are only the default locations.
+
+```ts
+public provideWidgets(stageId: string, _stageUsage: string, location: StagePanelLocation,
+  _section?: StagePanelSection | undefined): ReadonlyArray<AbstractWidgetProps>
+```
+
+To see a more complete example of adding ToolButtons, Status Bar items, and Widgets see the [UiItemsProvider example](./abstract/uiitemsprovider/#uiitemsprovider-example).
+
+## Adding a Frontstage
 
 Register [FrontstageProvider]($ui-framework)
 
@@ -34,41 +66,9 @@ export class MyUiItemProvider {
 Register the UiItemsProvider.
 
 ```ts
-UiItemsManager.register(new MyUiItemProvider(IModelApp.i18n));
+UiItemsManager.register(new MyUiItemProvider(iTwinApp.i18n));
 ```
 
-## Adding ToolButtons, Status Bar items, and Widgets to existing application frontstage
-
-A [UiItemsProvider]($ui-abstract) is used to provide items to insert into the UI of an existing stage. When constructing the stage the ui-framework code will request item definitions from the UiItemsProvider. These calls will always include the current frontstage's Id and usage. An extension can use the info to decide which items to add. The stageId name's used by an application may not be useful unless the extension is just used in a single host app where the stage names are known. The stageUsage value is also provided, this string is typically set to one of the standard [StageUsage]($ui-abstract) enum values.
-
-### Adding a ToolButton
-
-Below is the UiItemsProvider function called when ui-framework is populating toolbars.  The [ToolbarUsage]($ui-abstract) will indicate if the toolbar is on the left (content manipulation) or right (view navigation) of the application window. The [ToolbarOrientation]($ui-abstract) specifies if the toolbar is horizontal or vertical.
-
-```ts
-public provideToolbarButtonItems(stageId: string, stageUsage: string,
-  toolbarUsage: ToolbarUsage, toolbarOrientation: ToolbarOrientation): CommonToolbarItem[]
-```
-
-### Status Bar Item
-
-Below is the UiItemsProvider function called when ui-framework is populating the status bar footer.
-
-```ts
-public provideStatusBarItems(stageId: string, stageUsage: string): CommonStatusBarItem[]
-```
-
-### Widget Item
-
-Below is the UiItemsProvider function called when ui-framework is populating StagePanels. The [StagePanelLocation]($ui-abstract) will be the default location for the widget. The [StagePanelSection]($ui-abstract) will specify what zone/area in the panel should contain the widget. Since widgets can be moved by the user, the locations specified are only the default locations.
-
-```ts
-public provideWidgets(stageId: string, _stageUsage: string, location: StagePanelLocation,
-  _section?: StagePanelSection | undefined): ReadonlyArray<AbstractWidgetProps>
-```
-
-To see a more complete example of adding ToolButtons, Status Bar items, and Widgets see the [UiItemsProvider example](./abstract/uiitemsprovider/#uiitemsprovider-example).
-
 ## StateManager and ReducerRegistry
 
 The example below shows the call that adds a Reducer to the store managed by the StateManager. This registration should be made by the extension when it loads or by a package when it is initialized.

docs/learning/ui/FrontstageUi2.md

@@ -1,6 +1,6 @@
 # UI 2.0
 
-With the release of the `iModel.js 2.0`, new UI components are available that provide a new look and feel for IModelApps. The new look and feel is referred to as `UI 2.0`. The two primary goals of `UI 2.0` are to limit the amount of UI components that obscure the iModel content and to ensure that Extensions can augment the UI provided by the host IModelApp.
+With the release of the `iTwin.js 2.0`, new UI components are available that provide a new look and feel for iTwin Apps. The new look and feel is referred to as `UI 2.0`. The two primary goals of `UI 2.0` are to limit the amount of UI components that obscure the iModel content and to ensure that Extensions can augment the UI provided by the host IModelApp.
 
 ## Frontstage shown using UI 2.0 components
 

docs/learning/ui/QuickStartUi.md

@@ -0,0 +1,19 @@
+# Quick Start to an AppUI user interface
+
+## Use create-react-app to make a Web Viewer app
+
+The create-react-app utility makes a simple React app. iTwin.js provides a template that allows create-react-app to create a React app that is a simple iTwin Viewer app.
+
+Full instructions for creating a Web Viewer using create-react-app can be found here:
+
+[Developing a web viewer]($docs/learning/tutorials/develop-web-viewer.md)
+
+## Modify the basic Frontstage
+
+iTwin's App UI organizes functionality into [Frontstages](./framework/Frontstages.md). Because the iTwin Viewer template for create-react-app provides a basic Frontstage, the quickest way to get started with a new app is to add your app's UI to that Frontstage with the [UiItemsProvider](./abstract/UiItemsProvider.md). This will add you tool buttons, [StatusBar](./framework/StatusBar.md) items, [Backstage](./framework/Backstage.md) items, and [Widgets](./framework/Widgets.md) to the basic viewer when the application loads.
+
+A more detailed explanation of using the UiItemsProvider interface can be found here: [Augmenting the UI of an iTwin App](./AugmentingUi.md).
+
+## Building a new Frontstage
+
+If you find that you need to make more drastic modifications to the delivered Frontstage, you may need to create a new Frontstage. This [Frontstage](./FrontstageUi2.md) sample can be used as a template for your app's Frontstage. From there, the new Frontstage can be added to your App at startup using a [FrontstageProvider]($ui-framework). Details in [Adding a Frontstage](./AugmentingUi.md#Adding-a-Frontstage).

docs/learning/ui/UIGlossary.md

@@ -2,7 +2,7 @@
 tableRowAnchors: true
 ---
 
-# Glossary of terms in iModel.js UI
+# Glossary of terms in iTwin.js UI
 
 |Term | Definition
 |------------|------------|

docs/learning/ui/index.md

@@ -1,18 +1,14 @@
-# Learning iModel.js UI
+# Learning iTwin.js UI
 
-This section provides explanations of the concepts that are in the iModel.js UI.
+For a quick-start approach to creating an iTwin.js app with AppUI, see [Quick start for AppUI](./QuickStartUI.md).
 
-## Why React?
+## React version requirements
 
-iModel.js UI bases its controls on the [React](https://reactjs.org/) JavaScript library. For more information about why, see [Why We Chose React](./React.md).
-
-### React version requirements
-
-iModel.js UI is compatible with React 16.8 and later.
+iTwin.js UI bases its controls on the [React](https://reactjs.org/) JavaScript library and is compatible with React 16.8 and later.
 
 ## Library Organization
 
-The iModel.js UI library is divided into these NPM packages in the `@bentley` scope:
+The iTwin.js UI library is divided into these NPM packages in the `@bentley` scope:
 
 |Package Name|Description
 |-----|-----
@@ -24,10 +20,10 @@ The iModel.js UI library is divided into these NPM packages in the `@bentley` sc
 
 See also:
 
-- [UI 2.0](./FrontstageUi2.md).
 - [Creating an IModelApp that supports Extensible UI](./HostAppUI.md).
-- [Augmenting the UI of an IModelApp](./AugmentingUI.md).
-- [Glossary of terms used in iModel.js UI](./UIGlossary)
+- [Augmenting the UI of an iTwin App](./AugmentingUI.md).
+- [Glossary of terms used in iTwin.js UI](./UIGlossary)
 - [React](https://reactjs.org/)
 - [Redux](https://redux.js.org/)
 - [React and Typescript](/~https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/)
+- [Why we chose React](./React.md)