Razor Components: Get started topic update (#10780)

* Razor Components: Get started topic update

Updates

* React to feedback

* Apply suggestions from code review

So much for colloquial style. 😄 lol (See what I have to go thru here, Dan. lol)

Co-Authored-By: guardrex <1622880+guardrex@users.noreply.github.com>

aspnetcore/razor-components/get-started.md

@@ -5,58 +5,162 @@ description: Learn how to get started with the Razor Components framework.
 monikerRange: '>= aspnetcore-3.0'
 ms.author: riande
 ms.custom: mvc
-ms.date: 01/29/2019
+ms.date: 02/03/2019
 uid: razor-components/get-started
 ---
 # Get started with Razor Components
 
+By [Daniel Roth](https://github.com/danroth27) and [Luke Latham](https://github.com/guardrex)
+
 [!INCLUDE[](~/includes/razor-components-preview-notice.md)]
 
-## Setup
+# [Visual Studio](#tab/visual-studio)
+
+Prerequisites:
+
+[!INCLUDE[](~/includes/net-core-prereqs-vs-3.0.md)]
+
+To create your first Razor Components project in Visual Studio:
+
+1. Select **File** > **New Project** > **Web** > **ASP.NET Core Web Application**.
+1. Make sure **.NET Core** and **ASP.NET Core 3.0** are selected at the top.
+1. Choose the **Razor Components** template and select **OK**.
+
+   ![New app dialog](https://msdnshared.blob.core.windows.net/media/2019/01/razor-components-template.png)
+
+1. Press **F5** to run the app.
+
+Congratulations! You just ran your first Razor Components app!
+
+<!--
+
+# [Visual Studio Code](#tab/visual-studio-code)
+
+Prerequisites:
+
+[!INCLUDE[](~/includes/net-core-prereqs-vsc-3.0.md)]
 
-Install the following:
+To create your first Razor Components project in Visual Studio Code:
 
-1. [.NET Core 2.1 SDK](https://go.microsoft.com/fwlink/?linkid=873092) (2.1.500 or later).
-1. [Visual Studio 2017](https://go.microsoft.com/fwlink/?linkid=873093) (15.9 or later) with the *ASP.NET and web development* workload selected.
-1. The latest [Blazor Language Services extension](https://go.microsoft.com/fwlink/?linkid=870389) from the Visual Studio Marketplace.
-1. The Blazor templates on the command-line:
+1. Execute the following command from a command shell:
 
    ```console
-   dotnet new -i Microsoft.AspNetCore.Blazor.Templates
+   dotnet new razorcomponents -o WebApplication1
    ```
 
-To create your first project from Visual Studio:
+1. Open the *WebApplication1* folder in Visual Studio Code.
 
-1. Select **File** > **New Project** > **Web** > **ASP.NET Core Web Application**.
-1. Make sure **.NET Core** and **ASP.NET Core 2.1** are selected at the top.
-1. Choose the Blazor template and select **OK**.
+1. Add a *.vscode* folder.
+
+1. Add a *tasks.json* file to the *.vscode* folder with the following content:
+
+   [!code-json[](get-started/samples_snapshot/3.x/tasks.json)]
+
+1. Add a *launch.json* file to the *.vscode* folder with the following content:
+
+   [!code-json[](get-started/samples_snapshot/3.x/launch.json)]
+
+1. Execute the app using the Visual Studio Code debugger.
+
+1. In a browser, navigate to `https://localhost:5001`.
+
+Congrats! You just ran your first Razor Components app!
+
+# [Visual Studio for Mac](#tab/visual-studio-mac)
+
+.NET Core 3.0 will be supported with Visual Studio for Mac version 8.0 or later. Visual Studio for Mac version 8.0 Preview isn't available at this time.
+
+Use the [.NET Core CLI version of this topic](xref:razor-components/get-started?tabs=netcore-cli) on macOS.
+
+
+[!INCLUDE[](~/includes/net-core-prereqs-mac-3.0.md)]
 
-   ![New app dialog](https://msdnshared.blob.core.windows.net/media/2018/07/new-blazor-app-dialog-0.5.0.png)
+To create your first project Razor Components project in Visual Studio for Mac:
 
-1. Press **Ctrl-F5** to run the app *without the debugger*. Running with the debugger (**F5**) isn't supported at this time.
+1. Select **File** > **New Solution** or **New Project**.
+1. In the sidebar, select **.NET Core** > **App**.
+1. Select **ASP.NET Core Razor Components** and select **Next**.
+1. The **Target Framework** defaults to **.NET Core 3.0**. Select **Next**.
+1. In the **Project Name** field, enter `WebApplication1`. Select **Create**.
+1. Select **Run** > **Run Without Debugging** to run the app *without the debugger*. Running with the debugger isn't supported at this time.
 
-To create a new Blazor app from the command-line:
+Congratulations! You just ran your first Razor Components app!
+-->
+
+# [.NET Core CLI](#tab/netcore-cli/)
+
+Prerequisites:
+
+* [.NET Core SDK 3.0 Preview](https://dotnet.microsoft.com/download/dotnet-core/3.0)
+
+To create your first Razor Components project from a command shell:
 
 ```console
-dotnet new blazor -o BlazorApp1
-cd BlazorApp1
+dotnet new razorcomponents -o WebApplication1
+cd WebApplication1
 dotnet run
 ```
 
-Congrats! You just ran your first Blazor app!
+Congratulations! You just ran your first Razor Components app!
+
+---
+
+## Razor Components project
+
+The solution created by the Razor Components template contains two projects:
+
+* *WebApplication1.Server* &ndash; The server project is an ASP.NET Core project set up to host the Razor Components app.
+* *WebApplication1.App* &ndash; The client-side web UI project that uses Razor Components.
+
+The UI logic in the *WebApplication1.App* project is separated from the rest of the app due to a technical limitation in ASP.NET Core 3.0 Preview 2. The Razor file extension (*.cshtml*) used for Razor Components is also used for Razor Pages and MVC views. Currently, Razor Components and Razor Pages/MVC have different compilation models, so the Razor Components Razor files are kept separate. In a future preview, we plan to introduce a new file extension for Razor Components (*.razor*). Components, pages, and views will be hosted *in the same project*.
+
+When the app is run, multiple pages are available from tabs in the sidebar:
+
+* Home
+* Counter
+* Fetch data
+
+On the Counter page, select the **Click me** button to increment the counter without a page refresh. Incrementing a counter in a webpage normally requires writing JavaScript, but Razor Components provides a better approach using C#.
+
+*WebApplication1.App/Pages/Counter.cshtml*:
+
+[!code-cshtml[](get-started/samples_snapshot/3.x/Counter1.cshtml)]
+
+A request for `/counter` in the browser, as specified by the `@page` directive at the top, causes the Counter component to render its content. Components render into an in-memory representation of the render tree that can then be used to update the UI in a flexible and efficient way.
+
+Each time the **Click me** button is selected:
+
+* The `onclick` event is fired.
+* The `IncrementCount` method is called.
+* The `currentCount` is incremented.
+* The component is rendered again.
+
+The runtime compares the new content to the previous content and only applies the changed content to the Document Object Model (DOM).
+
+Add a component to another component using an HTML-like syntax. Component parameters are specified using attributes or child content. For example, a Counter component can be added to the app's homepage by adding a `<Counter />` element to the Index component.
+
+*WebApplication1.App/Pages/Index.cshtml*:
+
+[!code-cshtml[](get-started/samples_snapshot/3.x/Index1.cshtml?highlight=7)]
+
+Run the app. The homepage has its own counter.
+
+To add a parameter to the Counter component, update the component's `@functions` block:
+
+* Add a property for `IncrementAmount` decorated with the `[Parameter]` attribute.
+* Change the `IncrementCount` method to use the `IncrementAmount` when increasing the value of `currentCount`.
 
-![Blazor app home page](https://msdnshared.blob.core.windows.net/media/2018/04/blazor-bootstrap-4.png)
+*WebApplication1.App/Pages/Counter.cshtml*:
 
-## Help & feedback
+[!code-cshtml[](get-started/samples_snapshot/3.x/Counter2.cshtml?highlight=4,8)]
 
-Your feedback is especially important to us during this experimental phase for Blazor. If you run into issues or have questions while trying out Blazor, please let us know!
+Specify an `IncrementAmount` parameter in the Home component's `<Counter>` element using an attribute.
 
-* [File issues on GitHub](https://github.com/aspnet/AspNetCore/issues) for any problems you run into or to make suggestions for improvements.
-* Chat with us and the Blazor community on [Gitter](https://gitter.im/aspnet/blazor) if you get stuck or to share how Blazor is working for you.
+*WebApplication1.App/Pages/Index.cshtml*:
 
-After you've tried out Blazor, please let us know what you think by taking our in-product survey. Just click the survey link shown on the app home page when running one of the Blazor project templates:
+[!code-cshtml[](get-started/samples_snapshot/3.x/Index2.cshtml)]
 
-![Blazor survey](https://msdnshared.blob.core.windows.net/media/2018/05/blazor-survey-new.png)
+Run the app. The homepage has its own counter that increments by ten each time the **Click me** button is selected.
 
 ## Next steps
 

aspnetcore/razor-components/get-started/samples_snapshot/3.x/Counter1.cshtml

@@ -0,0 +1,16 @@
+@page "/counter"
+
+<h1>Counter</h1>
+
+<p>Current count: @currentCount</p>
+
+<button class="btn btn-primary" onclick="@IncrementCount">Click me</button>
+
+@functions {
+    int currentCount = 0;
+
+    void IncrementCount()
+    {
+        currentCount++;
+    }
+}

aspnetcore/razor-components/get-started/samples_snapshot/3.x/Counter2.cshtml

@@ -0,0 +1,10 @@
+@functions {
+    int currentCount = 0;
+
+    [Parameter] int IncrementAmount { get; set; } = 1;
+
+    void IncrementCount()
+    {
+        currentCount += IncrementAmount;
+    }
+}

aspnetcore/razor-components/get-started/samples_snapshot/3.x/Index1.cshtml

@@ -0,0 +1,7 @@
+@page "/"
+
+<h1>Hello, world!</h1>
+
+Welcome to your new app.
+
+<Counter />

aspnetcore/razor-components/get-started/samples_snapshot/3.x/Index2.cshtml

@@ -0,0 +1 @@
+<Counter IncrementAmount="10" />

aspnetcore/razor-components/get-started/samples_snapshot/3.x/launch.json

@@ -0,0 +1,36 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": ".NET Core Launch (web)",
+      "type": "coreclr",
+      "request": "launch",
+      "preLaunchTask": "build",
+      "program": "${workspaceFolder}/WebApplication1.Server/bin/Debug/netcoreapp3.0/WebApplication1.Server.dll",
+      "args": [],
+      "cwd": "${workspaceFolder}/WebApplication1.Server",
+      "stopAtEntry": false,
+      "internalConsoleOptions": "openOnSessionStart",
+      "launchBrowser": {
+        "enabled": true,
+        "args": "${auto-detect-url}",
+        "windows": {
+        "command": "cmd.exe",
+          "args": "/C start ${auto-detect-url}"
+        },
+        "osx": {
+          "command": "open"
+        },
+        "linux": {
+          "command": "xdg-open"
+        }
+      },
+      "env": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      },
+      "sourceFileMap": {
+        "/Views": "${workspaceFolder}/Views"
+      }
+    }
+  ]
+}

aspnetcore/razor-components/get-started/samples_snapshot/3.x/tasks.json

@@ -0,0 +1,15 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "build",
+      "command": "dotnet",
+      "type": "process",
+      "args": [
+        "build",
+        "WebApplication1.Server/WebApplication1.Server.csproj"
+      ],
+      "problemMatcher": "$msCompile"
+    }
+  ]
+}