diff --git a/aspnetcore/toc.yml b/aspnetcore/toc.yml
index 350a0625bdaa..cb14730c1dbc 100644
--- a/aspnetcore/toc.yml
+++ b/aspnetcore/toc.yml
@@ -444,7 +444,7 @@
         - name: Get started
           uid: razor-components/get-started
         - name: Build your first app
-          uid: tutorials/first-blazor-app
+          uid: tutorials/first-razor-components-app
         - name: Components
           uid: razor-components/components
         - name: Component libraries
diff --git a/aspnetcore/tutorials/build-your-first-blazor-app.md b/aspnetcore/tutorials/build-your-first-blazor-app.md
deleted file mode 100644
index f164b10359bc..000000000000
--- a/aspnetcore/tutorials/build-your-first-blazor-app.md
+++ /dev/null
@@ -1,479 +0,0 @@
----
-title: Build your first Blazor app
-author: guardrex
-description: Build a Blazor app step-by-step and quickly learn the basic features of the Razor Components framework.
-monikerRange: '>= aspnetcore-3.0'
-ms.author: riande
-ms.custom: mvc
-ms.date: 01/29/2019
-uid: tutorials/first-blazor-app
----
-# Build your first Blazor app
-
-[!INCLUDE[](~/includes/razor-components-preview-notice.md)]
-
-In this tutorial, you build a Blazor app step-by-step and quickly learn the basic features of the Razor Components framework.
-
-[View or download sample code](https://github.com/aspnet/Docs/tree/master/aspnetcore/tutorials/build-your-first-blazor-app/samples/) ([how to download](xref:index#how-to-download-a-sample)). See the [Get started](xref:razor-components/get-started) topic for prerequisites.
-
-To create the project in Visual Studio:
-
-1. Select **File** > **New** > **Project**. Select **Web** > **ASP.NET Core Web Application**. Name the project "BlazorApp1" in the **Name** field. Select **OK**.
-
-    ![New ASP.NET Core project](build-your-first-blazor-app/_static/new-aspnet-core-project.png)
-
-1. The **New ASP.NET Core Web Application** dialog appears. Make sure **.NET Core** is selected at the top. Select **ASP.NET Core 2.1**. Choose the **Blazor** template and select **OK**.
-
-    ![New Blazor app dialog](build-your-first-blazor-app/_static/new-blazor-app-dialog.png)
-
-1. Once the project is created, press **Ctrl-F5** to run the app *without the debugger*. Running with the debugger (**F5**) isn't supported at this time.
-
-> [!NOTE]
-> If not using Visual Studio, create the Blazor app at a command prompt on Windows, macOS, or Linux:
->
-> ```console
-> dotnet new --install "Microsoft.AspNetCore.Blazor.Templates"
-> dotnet new blazor -o BlazorApp1
-> cd BlazorApp1
-> dotnet run
-> ```
->
-> Navigate to the app using the localhost address and port provided in the console window output after `dotnet run` is executed. Use **Ctrl-C** in the console window to shutdown the app.
-
-The Blazor app runs in the browser:
-
-![Blazor app Home page](https://user-images.githubusercontent.com/1874516/39509497-5515c3ea-4d9b-11e8-887f-019ea4fdb3ee.png)
-
-## Build components
-
-1. Browse to each of the app's three pages: Home, Counter, and Fetch data.
-
-    These three pages are implemented by the three Razor files in the *Pages* folder: *Index.cshtml*, *Counter.cshtml*, and *FetchData.cshtml*. Each of these files implements a component that's compiled and executed client-side in the browser.
-
-1. Select the button on the Counter page.
-
-    ![Blazor app Home page](https://user-images.githubusercontent.com/1874516/39509525-6e367c66-4d9b-11e8-9978-e52a9750c34b.png)
-
-    Each time the button is selected, the counter is incremented without a page refresh. Normally, this kind of client-side behavior is handled in JavaScript; but here, it's implemented in C# and .NET by the `Counter` component.
-
-1. Take a look at the implementation of the `Counter` component in the *Counter.cshtml* file:
-
-    ```cshtml
-    @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++;
-        }
-    }
-    ```
-
-    The UI for the `Counter` component is defined using normal HTML. Dynamic rendering logic (for example, loops, conditionals, expressions) is added using an embedded C# syntax called [Razor](https://docs.microsoft.com/aspnet/core/mvc/views/razor). The HTML markup and C# rendering logic are converted into a component class at build time. The name of the generated .NET class matches the name of the file.
-
-    Members of the component class are defined in a `@functions` block. In the `@functions` block, component state (properties, fields) and methods can be specified for event handling or for defining other component logic. These members can then be used as part of the component's rendering logic and for handling events.
-
-    When the button is selected, the `Counter` component's registered `onclick` handler is called (the `IncrementCount` method) and the `Counter` component regenerates its render tree. Blazor compares the new render tree against the previous one and applies any modifications to the browser Document Object Model (DOM). The displayed count is updated.
-
-1. Update the markup for the `Counter` component to make the top-level header more *exciting*.
-
-    ```cshtml
-    @page "/counter"
-    <h1><em>Counter!!</em></h1>
-    ```
-
-1. Also modify the C# logic of the `Counter` component to make the count increment by two instead of one.
-
-    ```cshtml
-    @functions {
-        int currentCount = 0;
-
-        void IncrementCount()
-        {
-            currentCount += 2;
-        }
-    }
-    ```
-
-1. Refresh the counter page in the browser to see the changes.
-
-    ![Exciting counter](https://user-images.githubusercontent.com/1874516/39509668-e8949a92-4d9b-11e8-91e9-b6a494695d92.png)
-
-## Use components
-
-After a component is defined, the component can be used to implement other components. The markup for using a component looks like an HTML tag where the name of the tag is the component type.
-
-1. Add a `Counter` component to the Home page of the app (*Index.cshtml*).
-
-    ```cshtml
-    @page "/"
-
-    <h1>Hello, world!</h1>
-
-    Welcome to your new app.
-
-    <SurveyPrompt Title="How is Blazor working for you?" />
-
-    <Counter />
-    ```
-
-1. Refresh the home page in the browser. Note the separate instance of the `Counter` component on the Home page.
-
-    ![Blazor Home page with counter](https://user-images.githubusercontent.com/1874516/39509718-224483f6-4d9c-11e8-9030-b4c7228d669d.png)
-
-## Component parameters
-
-Components can also have parameters, which are defined using private properties on the component class decorated with `[Parameter]`. Use attributes to specify arguments for a component in markup. 
-
-1. Update the `Counter` component to have an `IncrementAmount` parameter that defaults to 1.
-
-    ```cshtml
-    @functions {
-        int currentCount = 0;
-
-        [Parameter]
-        private int IncrementAmount { get; set; } = 1;
-
-        void IncrementCount()
-        {
-            currentCount += IncrementAmount;
-        }
-    }
-    ```
-
-    > [!NOTE]
-    > From Visual Studio, you can quickly add a component parameter by using the `para` snippet. Type `para` and then press the `Tab` key twice.
-
-1. On the Home page (*Index.cshtml*), change the increment amount for the `Counter` to 10 by setting an attribute that matches the name of the component's property for `IncrementCount`.
-
-    ```cshtml
-    <Counter IncrementAmount="10" />
-    ```
-
-1. Reload the page.
-
-    The counter on the Home page now increments by 10, while the counter on the Counter page still increments by 1.
-
-    ![Blazor count by ten](https://user-images.githubusercontent.com/1874516/39509798-618f0720-4d9c-11e8-9125-3d4c634dff46.png)
-
-## Route to components
-
-The `@page` directive at the top of the *Counter.cshtml* file specifies that this component is a page to which requests can be routed. Specifically, the `Counter` component handles requests sent to `/Counter`. Without the `@page` directive, the component wouldn't handle routed requests, but the component could still be used by other components.
-
-## Dependency injection
-
-Services registered with the app's service provider are available to components via [dependency injection (DI)](https://docs.microsoft.com/aspnet/core/fundamentals/dependency-injection). Services can be injected into a component using the `@inject` directive.
-
-Take a look at the implementation of the `FetchData` component in *FetchData.cshtml*. The `@inject` directive is used to inject an [HttpClient](https://docs.microsoft.com/dotnet/api/system.net.http.httpclient) instance into the component.
-
-```cshtml
-@page "/fetchdata"
-@inject HttpClient Http
-```
-
-The `FetchData` component uses the injected `HttpClient` to retrieve JSON data from the server when the component is initialized. Under the covers, the `HttpClient` provided by the Blazor runtime is implemented using JavaScript interop to call the underlying browser's Fetch API to send the request (from C#, it's possible to call any JavaScript library or browser API). The retrieved data is deserialized into the `forecasts` C# variable as an array of `WeatherForecast` objects.
-
-```cshtml
-@functions {
-    WeatherForecast[] forecasts;
-
-    protected override async Task OnInitAsync()
-    {
-        forecasts = await Http.GetJsonAsync<WeatherForecast[]>("/sample-data/weather.json");
-    }
-
-    class WeatherForecast
-    {
-        public DateTime Date { get; set; }
-        public int TemperatureC { get; set; }
-        public int TemperatureF { get; set; }
-        public string Summary { get; set; }
-    }
-}
-```
-
-A `@foreach` loop is used to render each forecast instance as a row in the weather table.
-
-```cshtml
-<table class="table">
-    <thead>
-        <tr>
-            <th>Date</th>
-            <th>Temp. (C)</th>
-            <th>Temp. (F)</th>
-            <th>Summary</th>
-        </tr>
-    </thead>
-    <tbody>
-        @foreach (var forecast in forecasts)
-        {
-            <tr>
-                <td>@forecast.Date.ToShortDateString()</td>
-                <td>@forecast.TemperatureC</td>
-                <td>@forecast.TemperatureF</td>
-                <td>@forecast.Summary</td>
-            </tr>
-        }
-    </tbody>
-</table>
-```
-
-## Build a todo list
-
-Add a new page to the app that implements a simple todo list.
-
-1. Add an empty text file to the *Pages* folder named *Todo.cshtml*.
-
-1. Provide the initial markup for the page.
-
-    ```cshtml
-    @page "/todo"
-
-    <h1>Todo</h1>
-    ```
-
-1. Add the Todo page to the navigation bar by updating *Shared/NavMenu.cshtml*. Add a `NavLink` for the Todo page by adding the following list item markup below the existing list items.
-
-    ```cshtml
-    <li class="nav-item px-3">
-        <NavLink class="nav-link" href="todo">
-            <span class="oi oi-list-rich" aria-hidden="true"></span> Todo
-        </NavLink>
-    </li>
-    ```
-
-1. Refresh the app in the browser. See the new Todo page.
-
-    ![Blazor todo start](https://user-images.githubusercontent.com/1874516/39509907-bb27e77a-4d9c-11e8-91e7-ea1e7c01729e.png)
-
-1. Add a *TodoItem.cs* file to the root of the project to hold a class to represent the todo items.
-
-1. Use the following C# code for the `TodoItem` class.
-
-    ```csharp
-    public class TodoItem
-    {
-        public string Title { get; set; }
-        public bool IsDone { get; set; }
-    }
-    ```
-
-1. Go back to the `Todo` component in *Todo.cshtml* and add a field for the todos in a `@functions` block. The `Todo` component uses this field to maintain the state of the todo list.
-
-    ```cshtml
-    @functions {
-        IList<TodoItem> todos = new List<TodoItem>();
-    }
-    ```
-
-1. Add unordered list markup and a `foreach` loop to render each todo item as a list item.
-
-    ```cshtml
-    @page "/todo"
-
-    <h1>Todo</h1>
-
-    <ul>
-        @foreach (var todo in todos)
-        {
-            <li>@todo.Title</li>
-        }
-    </ul>
-    ```
-
-1. The app requires UI elements for adding todos to the list. Add a text input and a button below the list.
-
-    ```cshtml
-    @page "/todo"
-
-    <h1>Todo</h1>
-
-    <ul>
-        @foreach (var todo in todos)
-        {
-            <li>@todo.Title</li>
-        }
-    </ul>
-
-    <input placeholder="Something todo" />
-    <button>Add todo</button>
-
-    @functions {
-        IList<TodoItem> todos = new List<TodoItem>();
-    }
-    ```
-
-1. Refresh the browser.
-
-    ![Add todo button](https://user-images.githubusercontent.com/1874516/39512402-bc88ab46-4da5-11e8-9e3f-87b875b56383.png)
-
-    Nothing happens when the **Add todo** button is selected because no event handler is wired up to the button.
-
-1. Add an `AddTodo` method to the `Todo` component and register it for button clicks using the `onclick` attribute.
-
-    ```cshtml
-    <input placeholder="Something todo" />
-    <button onclick="@AddTodo">Add todo</button>
-
-    @functions {
-        IList<TodoItem> todos = new List<TodoItem>();
-
-        void AddTodo()
-        {
-            // Todo: Add the todo
-        }
-    }
-    ```
-
-    The `AddTodo` C# method is called every time the button is selected.
-
-1. To get the title of the new todo item, add a `newTodo` string field and bind it to the value of the text input using the `bind` attribute.
-
-    ```csharp
-    IList<TodoItem> todos = new List<TodoItem>();
-    string newTodo;
-    ```
-
-    ```cshtml
-    <input placeholder="Something todo" bind="@newTodo" />
-    ```
-
-1. Update the `AddTodo` method to add the `TodoItem` with the specified title to the list. Don't forget to clear the value of the text input by setting `newTodo` to an empty string.
-
-    ```cshtml
-    @page "/todo"
-
-    <h1>Todo</h1>
-
-    <ul>
-        @foreach (var todo in todos)
-        {
-            <li>@todo.Title</li>
-        }
-    </ul>
-
-    <input placeholder="Something todo" bind="@newTodo" />
-    <button onclick="@AddTodo">Add todo</button>
-
-    @functions {
-        IList<TodoItem> todos = new List<TodoItem>();
-        string newTodo;
-
-        void AddTodo()
-        {
-            if (!string.IsNullOrWhiteSpace(newTodo))
-            {
-                todos.Add(new TodoItem { Title = newTodo });
-                newTodo = string.Empty;
-            }
-        }
-    }
-    ```
-
-1. Refresh the browser. Add some todos to the todo list.
-
-    ![Add todos](https://user-images.githubusercontent.com/1874516/39512531-2d2ff62e-4da6-11e8-8b83-291b0efc821b.png)
-
-1. Lastly, what's a todo list without check boxes? The title text for each todo item can be made editable as well. Add a check box input and text input for each todo item and bind their values to the `Title` and `IsDone` properties, respectively.
-
-    ```cshtml
-    <ul>
-        @foreach (var todo in todos)
-        {
-            <li>
-                <input type="checkbox" bind="@todo.IsDone" />
-                <input bind="@todo.Title" />
-            </li>
-        }
-    </ul>
-    ```
-
-1. To verify that these values are bound, update the `h1` header to show a count of the number of todo items that are not yet done (`IsDone` is `false`).
-
-    ```cshtml
-    <h1>Todo (@todos.Count(todo => !todo.IsDone))</h1>
-    ```
-
-1. The completed `Todo` component should look like this:
-
-    ```cshtml
-    @page "/todo"
-
-    <h1>Todo (@todos.Count(todo => !todo.IsDone))</h1>
-
-    <ul>
-        @foreach (var todo in todos)
-        {
-            <li>
-                <input type="checkbox" bind="@todo.IsDone" />
-                <input bind="@todo.Title" />
-            </li>
-        }
-    </ul>
-
-    <input placeholder="Something todo" bind="@newTodo" />
-    <button onclick="@AddTodo">Add todo</button>
-
-    @functions {
-        IList<TodoItem> todos = new List<TodoItem>();
-        string newTodo;
-
-        void AddTodo()
-        {
-            if (!string.IsNullOrWhiteSpace(newTodo))
-            {
-                todos.Add(new TodoItem { Title = newTodo });
-                newTodo = string.Empty;
-            }
-        }
-    }
-    ```
-
-Refresh the app in the browser. Try adding some todo items.
-
-![Finished Blazor todo list](https://user-images.githubusercontent.com/1874516/39512621-83406508-4da6-11e8-8244-5bae2ac6b22d.png)
-
-## Publish and deploy
-
-When using Visual Studio, perform the following steps to publish the Todo Blazor app to Azure:
-
-1. Right-click on the project in **Solution Explorer** and select **Publish**.
-
-1. In the **Pick a publish target** dialog, select **App Service** and **Create New**. Select **Publish**.
-
-    ![Pick a publish target](build-your-first-blazor-app/_static/blazor-publish-pick-target.png)
-
-1. In the **Create App Service** dialog, choose a name for the app and select the subscription, resource group, and hosting plan. Select **Create** to create the app service and publish the app.
-
-    ![Create app service](build-your-first-blazor-app/_static/blazor-publish-create-appservice2.png)
-
-Wait a minute or so for the app to be deployed.
-
-The app should now be running in Azure. Mark the todo item to build your first Blazor app as *done*. Nice job!
-
-![Blazor on Azure](https://user-images.githubusercontent.com/1874516/39512621-83406508-4da6-11e8-8244-5bae2ac6b22d.png)
-
-> [!NOTE]
-> If not using Visual Studio, publish the Blazor app at a command prompt on Windows, macOS, or Linux:
->
-> ```console
-> dotnet publish -c Release
-> ```
->
-> The deployment is created in the */bin/Release/\<target-framework>/publish* folder. Move the contents of the *publish* folder to the server or hosting service.
->
-> For more information, see the [Host and deploy](xref:host-and-deploy/razor-components/index#publish-the-app) topic.
-
-## Additional resources
-
-For a more involved Blazor sample app, check out the [Flight Finder sample](https://github.com/aspnet/samples/tree/master/samples/aspnetcore/blazor) on GitHub.
-
-![Blazor Flight Finder](https://msdnshared.blob.core.windows.net/media/2018/03/blazor-flight-finder.png)
diff --git a/aspnetcore/tutorials/build-your-first-blazor-app/_static/blazor-publish-create-appservice2.png b/aspnetcore/tutorials/build-your-first-blazor-app/_static/blazor-publish-create-appservice2.png
deleted file mode 100644
index 9eacf3920aeb..000000000000
Binary files a/aspnetcore/tutorials/build-your-first-blazor-app/_static/blazor-publish-create-appservice2.png and /dev/null differ
diff --git a/aspnetcore/tutorials/build-your-first-blazor-app/_static/blazor-publish-pick-target.png b/aspnetcore/tutorials/build-your-first-blazor-app/_static/blazor-publish-pick-target.png
deleted file mode 100644
index 7b59c3bb0734..000000000000
Binary files a/aspnetcore/tutorials/build-your-first-blazor-app/_static/blazor-publish-pick-target.png and /dev/null differ
diff --git a/aspnetcore/tutorials/build-your-first-blazor-app/_static/new-aspnet-core-project.png b/aspnetcore/tutorials/build-your-first-blazor-app/_static/new-aspnet-core-project.png
deleted file mode 100644
index bcc5ceb05db6..000000000000
Binary files a/aspnetcore/tutorials/build-your-first-blazor-app/_static/new-aspnet-core-project.png and /dev/null differ
diff --git a/aspnetcore/tutorials/build-your-first-blazor-app/_static/new-blazor-app-dialog.png b/aspnetcore/tutorials/build-your-first-blazor-app/_static/new-blazor-app-dialog.png
deleted file mode 100644
index a3af5627366e..000000000000
Binary files a/aspnetcore/tutorials/build-your-first-blazor-app/_static/new-blazor-app-dialog.png and /dev/null differ
diff --git a/aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/App.cshtml b/aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/App.cshtml
deleted file mode 100644
index 59be8326e130..000000000000
--- a/aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/App.cshtml
+++ /dev/null
@@ -1,5 +0,0 @@
-<!--
-    Configuring this here is temporary. Later we'll move the app config
-    into Program.cs, and it won't be necessary to specify AppAssembly.
--->
-<Router AppAssembly=typeof(Program).Assembly />
diff --git a/aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/BlazorApp1.csproj b/aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/BlazorApp1.csproj
deleted file mode 100644
index 0ea04e852c73..000000000000
--- a/aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/BlazorApp1.csproj
+++ /dev/null
@@ -1,16 +0,0 @@
-<Project Sdk="Microsoft.NET.Sdk.Web">
-
-  <PropertyGroup>
-    <TargetFramework>netstandard2.0</TargetFramework>
-    <RunCommand>dotnet</RunCommand>
-    <RunArguments>blazor serve</RunArguments>
-    <LangVersion>7.3</LangVersion>
-  </PropertyGroup>
-
-  <ItemGroup>
-    <PackageReference Include="Microsoft.AspNetCore.Blazor.Browser" Version="0.7.0" />
-    <PackageReference Include="Microsoft.AspNetCore.Blazor.Build" Version="0.7.0" />
-    <DotNetCliToolReference Include="Microsoft.AspNetCore.Blazor.Cli" Version="0.7.0" />
-  </ItemGroup>
-
-</Project>
diff --git a/aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/Program.cs b/aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/Program.cs
deleted file mode 100644
index 83d1632be74e..000000000000
--- a/aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/Program.cs
+++ /dev/null
@@ -1,16 +0,0 @@
-using Microsoft.AspNetCore.Blazor.Hosting;
-
-namespace BlazorApp1
-{
-    public class Program
-    {
-        public static void Main(string[] args)
-        {
-            CreateHostBuilder(args).Build().Run();
-        }
-
-        public static IWebAssemblyHostBuilder CreateHostBuilder(string[] args) =>
-            BlazorWebAssemblyHost.CreateDefaultBuilder()
-                .UseBlazorStartup<Startup>();
-    }
-}
diff --git a/aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/README.md b/aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/README.md
deleted file mode 100644
index 96223bd47226..000000000000
--- a/aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/README.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Build Your First Blazor App Sample (BlazorApp1)
-
-This sample illustrates the basic features of the Blazor app development framework.
diff --git a/aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/Shared/SurveyPrompt.cshtml b/aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/Shared/SurveyPrompt.cshtml
deleted file mode 100644
index 3bb6f5dbbb11..000000000000
--- a/aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/Shared/SurveyPrompt.cshtml
+++ /dev/null
@@ -1,17 +0,0 @@
-<div class="alert alert-secondary mt-4" role="alert">
-    <span class="oi oi-pencil mr-2" aria-hidden="true"></span> 
-    <strong>@Title</strong>
-
-    <span class="text-nowrap">
-        Please take our
-        <a target="_blank" class="font-weight-bold" href="https://go.microsoft.com/fwlink/?linkid=873042">
-            brief survey
-        </a>
-    </span>
-    and tell us what you think.
-</div>
-
-@functions {
-    [Parameter]
-    string Title { get; set; } // Demonstrates how a parent component can supply parameters
-}
diff --git a/aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/Startup.cs b/aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/Startup.cs
deleted file mode 100644
index 2950a463c031..000000000000
--- a/aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/Startup.cs
+++ /dev/null
@@ -1,17 +0,0 @@
-using Microsoft.AspNetCore.Blazor.Builder;
-using Microsoft.Extensions.DependencyInjection;
-
-namespace BlazorApp1
-{
-    public class Startup
-    {
-        public void ConfigureServices(IServiceCollection services)
-        {
-        }
-
-        public void Configure(IBlazorApplicationBuilder app)
-        {
-            app.AddComponent<App>("app");
-        }
-    }
-}
diff --git a/aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/_ViewImports.cshtml b/aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/_ViewImports.cshtml
deleted file mode 100644
index b9ed0711135e..000000000000
--- a/aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/_ViewImports.cshtml
+++ /dev/null
@@ -1,6 +0,0 @@
-@using System.Net.Http
-@using Microsoft.AspNetCore.Blazor.Layouts
-@using Microsoft.AspNetCore.Blazor.Routing
-@using Microsoft.JSInterop
-@using BlazorApp1
-@using BlazorApp1.Shared
diff --git a/aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/wwwroot/sample-data/weather.json b/aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/wwwroot/sample-data/weather.json
deleted file mode 100644
index ab28bc13ac18..000000000000
--- a/aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/wwwroot/sample-data/weather.json
+++ /dev/null
@@ -1,32 +0,0 @@
-[
-  {
-    "date": "2018-05-06",
-    "temperatureC": 1,
-    "summary": "Freezing",
-    "temperatureF": 33
-  },
-  {
-    "date": "2018-05-07",
-    "temperatureC": 14,
-    "summary": "Bracing",
-    "temperatureF": 57
-  },
-  {
-    "date": "2018-05-08",
-    "temperatureC": -13,
-    "summary": "Freezing",
-    "temperatureF": 9
-  },
-  {
-    "date": "2018-05-09",
-    "temperatureC": -16,
-    "summary": "Balmy",
-    "temperatureF": 4
-  },
-  {
-    "date": "2018-05-10",
-    "temperatureC": -2,
-    "summary": "Chilly",
-    "temperatureF": 29
-  }
-]
diff --git a/aspnetcore/tutorials/build-your-first-razor-components-app.md b/aspnetcore/tutorials/build-your-first-razor-components-app.md
new file mode 100644
index 000000000000..767471b0d2b8
--- /dev/null
+++ b/aspnetcore/tutorials/build-your-first-razor-components-app.md
@@ -0,0 +1,199 @@
+---
+title: Build your first Razor Components app
+author: guardrex
+description: Build a Razor Components app step-by-step and learn basic Razor Components framework concepts.
+monikerRange: '>= aspnetcore-3.0'
+ms.author: riande
+ms.custom: mvc
+ms.date: 02/04/2019
+uid: tutorials/first-razor-components-app
+---
+# Build your first Razor Components app
+
+By [Daniel Roth](https://github.com/danroth27) and [Luke Latham](https://github.com/guardrex)
+
+[!INCLUDE[](~/includes/razor-components-preview-notice.md)]
+
+This tutorial shows you how to build a Razor Components app and demonstrates basic Razor Components framework concepts.
+
+[View or download sample code](https://github.com/aspnet/Docs/tree/master/aspnetcore/tutorials/build-your-first-razor-components-app/samples/) ([how to download](xref:index#how-to-download-a-sample)). See the [Get started](xref:razor-components/get-started) topic for prerequisites.
+
+## Create an app from the Razor Components template
+
+Follow the guidance in the [Get started](xref:razor-components/get-started) topic to create a Razor Components project from the Razor Components template. Name the solution *WebApplication1*. You can use Visual Studio or a command shell with .NET Core CLI commands.
+
+## Build components
+
+1. Browse to each of the app's three pages: Home, Counter, and Fetch data. These pages are implemented by Razor files in the *WebApplication1.App/Pages* folder: *Index.cshtml*, *Counter.cshtml*, and *FetchData.cshtml*.
+
+1. 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#.
+
+1. Examine the implementation of the Counter component in the *Counter.cshtml* file.
+
+   *WebApplication1.App/Pages/Counter.cshtml*:
+
+   [!code-cshtml[](build-your-first-razor-components-app/samples_snapshot/3.x/Counter1.cshtml)]
+
+   The UI of the Counter component is defined using HTML. Dynamic rendering logic (for example, loops, conditionals, expressions) is added using an embedded C# syntax called [Razor](xref:mvc/views/razor). The HTML markup and C# rendering logic are converted into a component class at build time. The name of the generated .NET class matches the file name.
+
+   Members of the component class are defined in a `@functions` block. In the `@functions` block, component state (properties, fields) and methods are specified for event handling or for defining other component logic. These members are then used as part of the component's rendering logic and for handling events.
+
+   When the **Click me** button is selected:
+
+   * The Counter component's registered `onclick` handler is called (the `IncrementCount` method).
+   * The Counter component regenerates its render tree.
+   * The new render tree is compared to the previous one.
+   * Only modifications to the Document Object Model (DOM) are applied. The displayed count is updated.
+
+1. Modify the C# logic of the Counter component to make the count increment by two instead of one.
+
+   [!code-cshtml[](build-your-first-razor-components-app/samples_snapshot/3.x/Counter2.cshtml?highlight=14)]
+
+1. Rebuild and run the app to see the changes. Select the **Click me** button, and the counter increments by two.
+
+## Use components
+
+Include a component into another component using an HTML-like syntax.
+
+1. Add the Counter component to the app's Index (home page) component by adding a `<Counter />` element to the Index component.
+
+   *WebApplication1.App/Pages/Index.cshtml*:
+
+   [!code-cshtml[](build-your-first-razor-components-app/samples_snapshot/3.x/Index.cshtml?highlight=7)]
+
+1. Rebuild and run the app. The home page has its own counter.
+
+## Component parameters
+
+Components can also have parameters. Component parameters are defined using non-public properties on the component class decorated with `[Parameter]`. Use attributes to specify arguments for a component in markup.
+
+1. Update the component's `@functions` C# code:
+
+   * Add a `IncrementAmount` property decorated with the `[Parameter]` attribute.
+   * Change the `IncrementCount` method to use the `IncrementAmount` when increasing the value of `currentCount`.
+
+   *WebApplication1.App/Pages/Counter.cshtml*:
+
+   [!code-cshtml[](build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.App/Pages/Counter.cshtml?highlight=12,16)]
+
+<!-- Add back when supported.
+   > [!NOTE]
+   > From Visual Studio, you can quickly add a component parameter by using the `para` snippet. Type `para` and press the `Tab` key twice.
+-->
+
+1. Specify an `IncrementAmount` parameter in the Home component's `<Counter>` element using an attribute. Set the value to increment the counter by ten.
+
+   *WebApplication1.App/Pages/Index.cshtml*:
+
+   [!code-cshtml[](build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.App/Pages/Index.cshtml?highlight=7)]
+
+1. Reload the page. The home page counter increments by ten each time the **Click me** button is selected. The counter on the *Counter* page increments by one.
+
+## Route to components
+
+The `@page` directive at the top of the *Counter.cshtml* file specifies that this component is a routing endpoint. The Counter component handles requests sent to `/Counter`. Without the `@page` directive, the component doesn't handle routed requests, but the component can still be used by other components.
+
+## Dependency injection
+
+Services registered in the app's service container are available to components via [dependency injection (DI)](xref:fundamentals/dependency-injection). Inject services into a component using the `@inject` directive.
+
+Examine the directives of the FetchData component (*WebApplication1.App/Pages/FetchData.cshtml*). The `@inject` directive is used to inject the instance of the `WeatherForecastService` service into the component:
+
+[!code-cshtml[](build-your-first-razor-components-app/samples_snapshot/3.x/FetchData1.cshtml?highlight=3)]
+
+The `WeatherForecastService` service is registered as a [singleton](xref:fundamentals/dependency-injection#service-lifetimes), so one instance of the service is available throughout the app.
+
+The FetchData component uses the injected service, as `ForecastService`, to retrieve an array of `WeatherForecast` objects:
+
+[!code-cshtml[](build-your-first-razor-components-app/samples_snapshot/3.x/FetchData2.cshtml?highlight=6)]
+
+A [@foreach](/dotnet/csharp/language-reference/keywords/foreach-in) loop is used to render each forecast instance as a row in the table of weather data:
+
+[!code-cshtml[](build-your-first-razor-components-app/samples_snapshot/3.x/FetchData3.cshtml?highlight=11-19)]
+
+## Build a todo list
+
+Add a new page to the app that implements a simple todo list.
+
+1. Add an empty file to the *WebApplication1.App/Pages* folder named *Todo.cshtml*.
+
+1. Provide the initial markup for the page:
+
+   ```cshtml
+   @page "/todo"
+
+   <h1>Todo</h1>
+   ```
+
+1. Add the Todo page to the navigation bar.
+
+   The NavMenu component (*WebApplication1/Shared/NavMenu.csthml*) is used in the app's layout. Layouts are components that allow you to avoid duplication of content in the app. For more information, see <xref:razor-components/layouts>.
+
+   Add a `<NavLink>` for the Todo page by adding the following list item markup below the existing list items in the *WebApplication1/Shared/NavMenu.csthml* file:
+
+   ```cshtml
+   <li class="nav-item px-3">
+       <NavLink class="nav-link" href="todo">
+           <span class="oi oi-list-rich" aria-hidden="true"></span> Todo
+       </NavLink>
+   </li>
+   ```
+
+1. Rebuild and run the app. Visit the new Todo page to confirm that the link to the Todo page works.
+
+1. Add a *TodoItem.cs* file to the root of the project to hold a class that represents a todo item. Use the following C# code for the `TodoItem` class:
+
+   [!code-cshtml[](build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.App/TodoItem.cs)]
+
+1. Return to the Todo component (*Todo.cshtml*):
+
+   * Add a field for the todos in an `@functions` block. The Todo component uses this field to maintain the state of the todo list.
+   * Add unordered list markup and a `foreach` loop to render each todo item as a list item.
+
+   [!code-cshtml[](build-your-first-razor-components-app/samples_snapshot/3.x/FetchData4.cshtml?highlight=5-10,12-14)]
+
+1. The app requires UI elements for adding todos to the list. Add a text input and a button below the list:
+
+   [!code-cshtml[](build-your-first-razor-components-app/samples_snapshot/3.x/FetchData5.cshtml?highlight=12-13)]
+
+1. Rebuild and run the app. When the **Add todo** button is selected, nothing happens because an event handler isn't wired up to the button.
+
+1. Add an `AddTodo` method to the Todo component and register it for button clicks using the `onclick` attribute:
+
+   [!code-cshtml[](build-your-first-razor-components-app/samples_snapshot/3.x/FetchData6.cshtml?highlight=2,7-10)]
+
+   The `AddTodo` C# method is called when the button is selected.
+
+1. To get the title of the new todo item, add a `newTodo` string field and bind it to the value of the text input using the `bind` attribute:
+
+   [!code-cshtml[](build-your-first-razor-components-app/samples_snapshot/3.x/FetchData7.cshtml?highlight=2)]
+
+   ```cshtml
+   <input placeholder="Something todo" bind="@newTodo" />
+   ```
+
+1. Update the `AddTodo` method to add the `TodoItem` with the specified title to the list. Clear the value of the text input by setting `newTodo` to an empty string:
+
+   [!code-cshtml[](build-your-first-razor-components-app/samples_snapshot/3.x/FetchData8.cshtml?highlight=19-26)]
+
+1. Rebuild and run the app. Add some todos to the todo list to test the new code.
+
+1. The title text for each todo item can be made editable and a check box can help the user keep track of completed items. Add a check box input for each todo item and bind its value to the `IsDone` property. Change `@todo.Title` to an `<input>` element bound to `@todo.Title`:
+
+   [!code-cshtml[](build-your-first-razor-components-app/samples_snapshot/3.x/FetchData9.cshtml?highlight=5-6)]
+
+1. To verify that these values are bound, update the `<h1>` header to show a count of the number of todo items that aren't complete (`IsDone` is `false`).
+
+   ```cshtml
+   <h1>Todo (@todos.Count(todo => !todo.IsDone))</h1>
+   ```
+
+1. The completed Todo component (*Todo.cshtml*):
+
+   [!code-cshtml[](build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.App/Pages/Todo.cshtml)]
+
+1. Rebuild and run the app. Add todo items to test the new code.
+
+## Publish and deploy the app
+
+To publish the app, see <xref:host-and-deploy/razor-components/index#publish-the-app>.
diff --git a/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/README.md b/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/README.md
new file mode 100644
index 000000000000..a11082f13b67
--- /dev/null
+++ b/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/README.md
@@ -0,0 +1,3 @@
+# Build Your First Razor Components App Sample (WebApplication1)
+
+This sample illustrates the basic scenarios of the Razor Components framework.
diff --git a/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.App/App.cshtml b/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.App/App.cshtml
new file mode 100644
index 000000000000..03eee81ceff2
--- /dev/null
+++ b/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.App/App.cshtml
@@ -0,0 +1,5 @@
+@*
+    The Router component displays whichever component has a @page
+    directive matching the current URI.
+*@
+<Router AppAssembly="typeof(Startup).Assembly" />
diff --git a/aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/Pages/Counter.cshtml b/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.App/Pages/Counter.cshtml
similarity index 61%
rename from aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/Pages/Counter.cshtml
rename to aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.App/Pages/Counter.cshtml
index 887847471b4b..add04af3265d 100644
--- a/aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/Pages/Counter.cshtml
+++ b/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.App/Pages/Counter.cshtml
@@ -1,6 +1,6 @@
 @page "/counter"
 
-<h1><em>Counter!!</em></h1>
+<h1>Counter</h1>
 
 <p>Current count: @currentCount</p>
 
@@ -9,11 +9,10 @@
 @functions {
     int currentCount = 0;
 
-    [Parameter]
-    private int IncrementAmount { get; set; } = 1;
+    [Parameter] int IncrementAmount { get; set; } = 1;
 
     void IncrementCount()
     {
-        currentCount+=IncrementAmount;
+        currentCount += IncrementAmount;
     }
 }
diff --git a/aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/Pages/FetchData.cshtml b/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.App/Pages/FetchData.cshtml
similarity index 72%
rename from aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/Pages/FetchData.cshtml
rename to aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.App/Pages/FetchData.cshtml
index 7fee4d681c14..ba380eb09273 100644
--- a/aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/Pages/FetchData.cshtml
+++ b/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.App/Pages/FetchData.cshtml
@@ -1,5 +1,6 @@
 @page "/fetchdata"
-@inject HttpClient Http
+@using WebApplication1.App.Services
+@inject WeatherForecastService ForecastService
 
 <h1>Weather forecast</h1>
 
@@ -39,14 +40,6 @@ else
 
     protected override async Task OnInitAsync()
     {
-        forecasts = await Http.GetJsonAsync<WeatherForecast[]>("sample-data/weather.json");
-    }
-
-    class WeatherForecast
-    {
-        public DateTime Date { get; set; }
-        public int TemperatureC { get; set; }
-        public int TemperatureF { get; set; }
-        public string Summary { get; set; }
+        forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
     }
 }
diff --git a/aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/Pages/Index.cshtml b/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.App/Pages/Index.cshtml
similarity index 62%
rename from aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/Pages/Index.cshtml
rename to aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.App/Pages/Index.cshtml
index e01fb4020a04..fc7fcf2da340 100644
--- a/aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/Pages/Index.cshtml
+++ b/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.App/Pages/Index.cshtml
@@ -4,6 +4,4 @@
 
 Welcome to your new app.
 
-<SurveyPrompt Title="How is Blazor working for you?" />
-
 <Counter IncrementAmount="10" />
diff --git a/aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/Pages/ToDo.cshtml b/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.App/Pages/ToDo.cshtml
similarity index 100%
rename from aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/Pages/ToDo.cshtml
rename to aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.App/Pages/ToDo.cshtml
diff --git a/aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/Pages/_ViewImports.cshtml b/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.App/Pages/_ViewImports.cshtml
similarity index 100%
rename from aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/Pages/_ViewImports.cshtml
rename to aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.App/Pages/_ViewImports.cshtml
diff --git a/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.App/Services/WeatherForecast.cs b/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.App/Services/WeatherForecast.cs
new file mode 100644
index 000000000000..b0beb9e61cee
--- /dev/null
+++ b/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.App/Services/WeatherForecast.cs
@@ -0,0 +1,15 @@
+using System;
+
+namespace WebApplication1.App.Services
+{
+    public class WeatherForecast
+    {
+        public DateTime Date { get; set; }
+
+        public int TemperatureC { get; set; }
+
+        public int TemperatureF { get; set; }
+
+        public string Summary { get; set; }
+    }
+}
diff --git a/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.App/Services/WeatherForecastService.cs b/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.App/Services/WeatherForecastService.cs
new file mode 100644
index 000000000000..2fb74d42bb4c
--- /dev/null
+++ b/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.App/Services/WeatherForecastService.cs
@@ -0,0 +1,25 @@
+using System;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace WebApplication1.App.Services
+{
+    public class WeatherForecastService
+    {
+        private static string[] Summaries = new[]
+        {
+            "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
+        };
+
+        public Task<WeatherForecast[]> GetForecastAsync(DateTime startDate)
+        {
+            var rng = new Random();
+            return Task.FromResult(Enumerable.Range(1, 5).Select(index => new WeatherForecast
+            {
+                Date = startDate.AddDays(index),
+                TemperatureC = rng.Next(-20, 55),
+                Summary = Summaries[rng.Next(Summaries.Length)]
+            }).ToArray());
+        }
+    }
+}
diff --git a/aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/Shared/MainLayout.cshtml b/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.App/Shared/MainLayout.cshtml
similarity index 56%
rename from aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/Shared/MainLayout.cshtml
rename to aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.App/Shared/MainLayout.cshtml
index 8b8a5d6226ae..d456063d05b7 100644
--- a/aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/Shared/MainLayout.cshtml
+++ b/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.App/Shared/MainLayout.cshtml
@@ -1,4 +1,4 @@
-@inherits BlazorLayoutComponent
+@inherits LayoutComponentBase
 
 <div class="sidebar">
     <NavMenu />
@@ -6,7 +6,7 @@
 
 <div class="main">
     <div class="top-row px-4">
-        <a href="http://blazor.net" target="_blank" class="ml-md-auto">About</a>
+        <a href="https://docs.microsoft.com/aspnet/" target="_blank" class="ml-md-auto">About</a>
     </div>
 
     <div class="content px-4">
diff --git a/aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/Shared/NavMenu.cshtml b/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.App/Shared/NavMenu.cshtml
similarity index 65%
rename from aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/Shared/NavMenu.cshtml
rename to aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.App/Shared/NavMenu.cshtml
index f61cb3273e87..b15e8d5213fa 100644
--- a/aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/Shared/NavMenu.cshtml
+++ b/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.App/Shared/NavMenu.cshtml
@@ -1,14 +1,14 @@
 <div class="top-row pl-4 navbar navbar-dark">
-    <a class="navbar-brand" href="">BlazorApp1</a>
-    <button class="navbar-toggler" onclick=@ToggleNavMenu>
+    <a class="navbar-brand" href="">WebApplication1</a>
+    <button class="navbar-toggler" onclick="@ToggleNavMenu">
         <span class="navbar-toggler-icon"></span>
     </button>
 </div>
 
-<div class=@(collapseNavMenu ? "collapse" : null) onclick=@ToggleNavMenu>
+<div class="@NavMenuCssClass" onclick="@ToggleNavMenu">
     <ul class="nav flex-column">
         <li class="nav-item px-3">
-            <NavLink class="nav-link" href="" Match=NavLinkMatch.All>
+            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                 <span class="oi oi-home" aria-hidden="true"></span> Home
             </NavLink>
         </li>
@@ -22,17 +22,14 @@
                 <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
             </NavLink>
         </li>
-        <li class="nav-item px-3">
-            <NavLink class="nav-link" href="todo">
-                <span class="oi oi-list-rich" aria-hidden="true"></span> Todo   
-            </NavLink>
-        </li>
     </ul>
 </div>
 
 @functions {
     bool collapseNavMenu = true;
 
+    string NavMenuCssClass => collapseNavMenu ? "collapse" : null;
+
     void ToggleNavMenu()
     {
         collapseNavMenu = !collapseNavMenu;
diff --git a/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.App/Startup.cs b/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.App/Startup.cs
new file mode 100644
index 000000000000..1577095fab1f
--- /dev/null
+++ b/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.App/Startup.cs
@@ -0,0 +1,20 @@
+using Microsoft.AspNetCore.Components.Builder;
+using Microsoft.Extensions.DependencyInjection;
+using WebApplication1.App.Services;
+
+namespace WebApplication1.App
+{
+    public class Startup
+    {
+        public void ConfigureServices(IServiceCollection services)
+        {
+            // Example of a data service
+            services.AddSingleton<WeatherForecastService>();
+        }
+
+        public void Configure(IComponentsApplicationBuilder app)
+        {
+            app.AddComponent<App>("app");
+        }
+    }
+}
diff --git a/aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/TodoItem.cs b/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.App/TodoItem.cs
similarity index 100%
rename from aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/TodoItem.cs
rename to aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.App/TodoItem.cs
diff --git a/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.App/WebApplication1.App.csproj b/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.App/WebApplication1.App.csproj
new file mode 100644
index 000000000000..4643bfcfa470
--- /dev/null
+++ b/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.App/WebApplication1.App.csproj
@@ -0,0 +1,13 @@
+<Project Sdk="Microsoft.NET.Sdk.Razor">
+
+  <PropertyGroup>
+    <TargetFramework>netstandard2.0</TargetFramework>
+    <LangVersion>7.3</LangVersion>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Microsoft.AspNetCore.Components.Browser" Version="3.0.0-preview-19075-0444" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.Build" Version="3.0.0-preview-19075-0444" PrivateAssets="all" />
+  </ItemGroup>
+
+</Project>
diff --git a/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.App/_ViewImports.cshtml b/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.App/_ViewImports.cshtml
new file mode 100644
index 000000000000..06ce50c42796
--- /dev/null
+++ b/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.App/_ViewImports.cshtml
@@ -0,0 +1,6 @@
+@using System.Net.Http
+@using Microsoft.AspNetCore.Components.Layouts
+@using Microsoft.AspNetCore.Components.Routing
+@using Microsoft.JSInterop
+@using WebApplication1.App
+@using WebApplication1.App.Shared
diff --git a/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.Server/Program.cs b/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.Server/Program.cs
new file mode 100644
index 000000000000..4a711d65018e
--- /dev/null
+++ b/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.Server/Program.cs
@@ -0,0 +1,28 @@
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore;
+using Microsoft.AspNetCore.Hosting;
+using Microsoft.Extensions.Configuration;
+using Microsoft.Extensions.Hosting;
+using Microsoft.Extensions.Logging;
+
+namespace WebApplication1.Server
+{
+    public class Program
+    {
+        public static void Main(string[] args)
+        {
+            CreateHostBuilder(args).Build().Run();
+        }
+
+        public static IHostBuilder CreateHostBuilder(string[] args) =>
+            Host.CreateDefaultBuilder(args)
+                .ConfigureWebHostDefaults(webBuilder =>
+                {
+                    webBuilder.UseStartup<Startup>();
+                });
+    }
+}
diff --git a/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.Server/Startup.cs b/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.Server/Startup.cs
new file mode 100644
index 000000000000..285de1b92b84
--- /dev/null
+++ b/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.Server/Startup.cs
@@ -0,0 +1,33 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Builder;
+using Microsoft.AspNetCore.Hosting;
+using Microsoft.AspNetCore.Http;
+using Microsoft.Extensions.DependencyInjection;
+
+namespace WebApplication1.Server
+{
+    public class Startup
+    {
+        // This method gets called by the runtime. Use this method to add services to the container.
+        // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
+        public void ConfigureServices(IServiceCollection services)
+        {
+            services.AddRazorComponents<App.Startup>();
+        }
+
+        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
+        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
+        {
+            if (env.IsDevelopment())
+            {
+                app.UseDeveloperExceptionPage();
+            }
+
+            app.UseStaticFiles();
+            app.UseRazorComponents<App.Startup>();
+        }
+    }
+}
diff --git a/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.Server/WebApplication1.Server.csproj b/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.Server/WebApplication1.Server.csproj
new file mode 100644
index 000000000000..65dc290d3893
--- /dev/null
+++ b/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.Server/WebApplication1.Server.csproj
@@ -0,0 +1,15 @@
+<Project Sdk="Microsoft.NET.Sdk.Web">
+
+  <PropertyGroup>
+    <TargetFramework>netcoreapp3.0</TargetFramework>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <ProjectReference Include="..\WebApplication1.App\WebApplication1.App.csproj" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Microsoft.AspNetCore.Components.Server" Version="3.0.0-preview-19075-0444" />
+  </ItemGroup>
+
+</Project>
diff --git a/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.Server/appsettings.Development.json b/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.Server/appsettings.Development.json
new file mode 100644
index 000000000000..e203e9407e74
--- /dev/null
+++ b/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.Server/appsettings.Development.json
@@ -0,0 +1,9 @@
+{
+  "Logging": {
+    "LogLevel": {
+      "Default": "Debug",
+      "System": "Information",
+      "Microsoft": "Information"
+    }
+  }
+}
diff --git a/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.Server/appsettings.json b/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.Server/appsettings.json
new file mode 100644
index 000000000000..7cb5ac81931a
--- /dev/null
+++ b/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.Server/appsettings.json
@@ -0,0 +1,9 @@
+{
+  "Logging": {
+    "LogLevel": {
+      "Default": "Warning",
+      "Microsoft.Hosting.Lifetime": "Information"
+    }
+  },
+  "AllowedHosts": "*"
+}
diff --git a/aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/wwwroot/css/open-iconic/FONT-LICENSE b/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.Server/wwwroot/css/open-iconic/FONT-LICENSE
similarity index 100%
rename from aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/wwwroot/css/open-iconic/FONT-LICENSE
rename to aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.Server/wwwroot/css/open-iconic/FONT-LICENSE
diff --git a/aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/wwwroot/css/open-iconic/ICON-LICENSE b/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.Server/wwwroot/css/open-iconic/ICON-LICENSE
similarity index 100%
rename from aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/wwwroot/css/open-iconic/ICON-LICENSE
rename to aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.Server/wwwroot/css/open-iconic/ICON-LICENSE
diff --git a/aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/wwwroot/css/open-iconic/README.md b/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.Server/wwwroot/css/open-iconic/README.md
similarity index 100%
rename from aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/wwwroot/css/open-iconic/README.md
rename to aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.Server/wwwroot/css/open-iconic/README.md
diff --git a/aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/wwwroot/css/open-iconic/font/fonts/open-iconic.eot b/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.Server/wwwroot/css/open-iconic/font/fonts/open-iconic.eot
similarity index 100%
rename from aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/wwwroot/css/open-iconic/font/fonts/open-iconic.eot
rename to aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.Server/wwwroot/css/open-iconic/font/fonts/open-iconic.eot
diff --git a/aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/wwwroot/css/open-iconic/font/fonts/open-iconic.otf b/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.Server/wwwroot/css/open-iconic/font/fonts/open-iconic.otf
similarity index 100%
rename from aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/wwwroot/css/open-iconic/font/fonts/open-iconic.otf
rename to aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.Server/wwwroot/css/open-iconic/font/fonts/open-iconic.otf
diff --git a/aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/wwwroot/css/open-iconic/font/fonts/open-iconic.svg b/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.Server/wwwroot/css/open-iconic/font/fonts/open-iconic.svg
similarity index 100%
rename from aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/wwwroot/css/open-iconic/font/fonts/open-iconic.svg
rename to aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.Server/wwwroot/css/open-iconic/font/fonts/open-iconic.svg
diff --git a/aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/wwwroot/css/open-iconic/font/fonts/open-iconic.ttf b/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.Server/wwwroot/css/open-iconic/font/fonts/open-iconic.ttf
similarity index 100%
rename from aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/wwwroot/css/open-iconic/font/fonts/open-iconic.ttf
rename to aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.Server/wwwroot/css/open-iconic/font/fonts/open-iconic.ttf
diff --git a/aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/wwwroot/css/open-iconic/font/fonts/open-iconic.woff b/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.Server/wwwroot/css/open-iconic/font/fonts/open-iconic.woff
similarity index 100%
rename from aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/wwwroot/css/open-iconic/font/fonts/open-iconic.woff
rename to aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.Server/wwwroot/css/open-iconic/font/fonts/open-iconic.woff
diff --git a/aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/wwwroot/css/site.css b/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.Server/wwwroot/css/site.css
similarity index 100%
rename from aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/wwwroot/css/site.css
rename to aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.Server/wwwroot/css/site.css
diff --git a/aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/wwwroot/index.html b/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.Server/wwwroot/index.html
similarity index 62%
rename from aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/wwwroot/index.html
rename to aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.Server/wwwroot/index.html
index b2a6add35348..d7fd1742303a 100644
--- a/aspnetcore/tutorials/build-your-first-blazor-app/samples/3.x/BlazorApp1/wwwroot/index.html
+++ b/aspnetcore/tutorials/build-your-first-razor-components-app/samples/3.x/WebApplication1/WebApplication1.Server/wwwroot/index.html
@@ -2,8 +2,8 @@
 <html>
 <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width">
-    <title>BlazorApp1</title>
+    <meta name="viewport" content="width=device-width" />
+    <title>WebApplication1</title>
     <base href="/" />
     <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
     <link href="css/site.css" rel="stylesheet" />
@@ -11,6 +11,6 @@
 <body>
     <app>Loading...</app>
 
-    <script src="_framework/blazor.webassembly.js"></script>
+    <script src="_framework/components.server.js"></script>
 </body>
 </html>
diff --git a/aspnetcore/tutorials/build-your-first-razor-components-app/samples_snapshot/3.x/Counter1.cshtml b/aspnetcore/tutorials/build-your-first-razor-components-app/samples_snapshot/3.x/Counter1.cshtml
new file mode 100644
index 000000000000..973af92354b3
--- /dev/null
+++ b/aspnetcore/tutorials/build-your-first-razor-components-app/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++;
+    }
+}
diff --git a/aspnetcore/tutorials/build-your-first-razor-components-app/samples_snapshot/3.x/Counter2.cshtml b/aspnetcore/tutorials/build-your-first-razor-components-app/samples_snapshot/3.x/Counter2.cshtml
new file mode 100644
index 000000000000..c1ed060c4682
--- /dev/null
+++ b/aspnetcore/tutorials/build-your-first-razor-components-app/samples_snapshot/3.x/Counter2.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 += 2;
+    }
+}
diff --git a/aspnetcore/tutorials/build-your-first-razor-components-app/samples_snapshot/3.x/FetchData1.cshtml b/aspnetcore/tutorials/build-your-first-razor-components-app/samples_snapshot/3.x/FetchData1.cshtml
new file mode 100644
index 000000000000..c23945db6e03
--- /dev/null
+++ b/aspnetcore/tutorials/build-your-first-razor-components-app/samples_snapshot/3.x/FetchData1.cshtml
@@ -0,0 +1,3 @@
+@page "/fetchdata"
+@using WebApplication1.App.Services
+@inject WeatherForecastService ForecastService
diff --git a/aspnetcore/tutorials/build-your-first-razor-components-app/samples_snapshot/3.x/FetchData2.cshtml b/aspnetcore/tutorials/build-your-first-razor-components-app/samples_snapshot/3.x/FetchData2.cshtml
new file mode 100644
index 000000000000..b2d5476232aa
--- /dev/null
+++ b/aspnetcore/tutorials/build-your-first-razor-components-app/samples_snapshot/3.x/FetchData2.cshtml
@@ -0,0 +1,8 @@
+@functions {
+    WeatherForecast[] forecasts;
+
+    protected override async Task OnInitAsync()
+    {
+        forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
+    }
+}
diff --git a/aspnetcore/tutorials/build-your-first-razor-components-app/samples_snapshot/3.x/FetchData3.cshtml b/aspnetcore/tutorials/build-your-first-razor-components-app/samples_snapshot/3.x/FetchData3.cshtml
new file mode 100644
index 000000000000..0612d1f4f5ed
--- /dev/null
+++ b/aspnetcore/tutorials/build-your-first-razor-components-app/samples_snapshot/3.x/FetchData3.cshtml
@@ -0,0 +1,21 @@
+<table class="table">
+    <thead>
+        <tr>
+            <th>Date</th>
+            <th>Temp. (C)</th>
+            <th>Temp. (F)</th>
+            <th>Summary</th>
+        </tr>
+    </thead>
+    <tbody>
+        @foreach (var forecast in forecasts)
+        {
+            <tr>
+                <td>@forecast.Date.ToShortDateString()</td>
+                <td>@forecast.TemperatureC</td>
+                <td>@forecast.TemperatureF</td>
+                <td>@forecast.Summary</td>
+            </tr>
+        }
+    </tbody>
+</table>
diff --git a/aspnetcore/tutorials/build-your-first-razor-components-app/samples_snapshot/3.x/FetchData4.cshtml b/aspnetcore/tutorials/build-your-first-razor-components-app/samples_snapshot/3.x/FetchData4.cshtml
new file mode 100644
index 000000000000..45c82a03feb7
--- /dev/null
+++ b/aspnetcore/tutorials/build-your-first-razor-components-app/samples_snapshot/3.x/FetchData4.cshtml
@@ -0,0 +1,14 @@
+@page "/todo"
+
+<h1>Todo</h1>
+
+<ul>
+    @foreach (var todo in todos)
+    {
+        <li>@todo.Title</li>
+    }
+</ul>
+
+@functions {
+    IList<TodoItem> todos = new List<TodoItem>();
+}
diff --git a/aspnetcore/tutorials/build-your-first-razor-components-app/samples_snapshot/3.x/FetchData5.cshtml b/aspnetcore/tutorials/build-your-first-razor-components-app/samples_snapshot/3.x/FetchData5.cshtml
new file mode 100644
index 000000000000..1ebd0fd32166
--- /dev/null
+++ b/aspnetcore/tutorials/build-your-first-razor-components-app/samples_snapshot/3.x/FetchData5.cshtml
@@ -0,0 +1,17 @@
+@page "/todo"
+
+<h1>Todo</h1>
+
+<ul>
+    @foreach (var todo in todos)
+    {
+        <li>@todo.Title</li>
+    }
+</ul>
+
+<input placeholder="Something todo" />
+<button>Add todo</button>
+
+@functions {
+    IList<TodoItem> todos = new List<TodoItem>();
+}
diff --git a/aspnetcore/tutorials/build-your-first-razor-components-app/samples_snapshot/3.x/FetchData6.cshtml b/aspnetcore/tutorials/build-your-first-razor-components-app/samples_snapshot/3.x/FetchData6.cshtml
new file mode 100644
index 000000000000..150826c44a3e
--- /dev/null
+++ b/aspnetcore/tutorials/build-your-first-razor-components-app/samples_snapshot/3.x/FetchData6.cshtml
@@ -0,0 +1,11 @@
+<input placeholder="Something todo" />
+<button onclick="@AddTodo">Add todo</button>
+
+@functions {
+    IList<TodoItem> todos = new List<TodoItem>();
+
+    void AddTodo()
+    {
+        // Todo: Add the todo
+    }
+}
diff --git a/aspnetcore/tutorials/build-your-first-razor-components-app/samples_snapshot/3.x/FetchData7.cshtml b/aspnetcore/tutorials/build-your-first-razor-components-app/samples_snapshot/3.x/FetchData7.cshtml
new file mode 100644
index 000000000000..a115eda17624
--- /dev/null
+++ b/aspnetcore/tutorials/build-your-first-razor-components-app/samples_snapshot/3.x/FetchData7.cshtml
@@ -0,0 +1,2 @@
+IList<TodoItem> todos = new List<TodoItem>();
+string newTodo;
diff --git a/aspnetcore/tutorials/build-your-first-razor-components-app/samples_snapshot/3.x/FetchData8.cshtml b/aspnetcore/tutorials/build-your-first-razor-components-app/samples_snapshot/3.x/FetchData8.cshtml
new file mode 100644
index 000000000000..c1a316c3a702
--- /dev/null
+++ b/aspnetcore/tutorials/build-your-first-razor-components-app/samples_snapshot/3.x/FetchData8.cshtml
@@ -0,0 +1,27 @@
+@page "/todo"
+
+<h1>Todo</h1>
+
+<ul>
+    @foreach (var todo in todos)
+    {
+        <li>@todo.Title</li>
+    }
+</ul>
+
+<input placeholder="Something todo" bind="@newTodo" />
+<button onclick="@AddTodo">Add todo</button>
+
+@functions {
+    IList<TodoItem> todos = new List<TodoItem>();
+    string newTodo;
+
+    void AddTodo()
+    {
+        if (!string.IsNullOrWhiteSpace(newTodo))
+        {
+            todos.Add(new TodoItem { Title = newTodo });
+            newTodo = string.Empty;
+        }
+    }
+}
diff --git a/aspnetcore/tutorials/build-your-first-razor-components-app/samples_snapshot/3.x/FetchData9.cshtml b/aspnetcore/tutorials/build-your-first-razor-components-app/samples_snapshot/3.x/FetchData9.cshtml
new file mode 100644
index 000000000000..959d7dbc5fe8
--- /dev/null
+++ b/aspnetcore/tutorials/build-your-first-razor-components-app/samples_snapshot/3.x/FetchData9.cshtml
@@ -0,0 +1,9 @@
+<ul>
+    @foreach (var todo in todos)
+    {
+        <li>
+            <input type="checkbox" bind="@todo.IsDone" />
+            <input bind="@todo.Title" />
+        </li>
+    }
+</ul>
diff --git a/aspnetcore/tutorials/build-your-first-razor-components-app/samples_snapshot/3.x/Index.cshtml b/aspnetcore/tutorials/build-your-first-razor-components-app/samples_snapshot/3.x/Index.cshtml
new file mode 100644
index 000000000000..97f262d9a724
--- /dev/null
+++ b/aspnetcore/tutorials/build-your-first-razor-components-app/samples_snapshot/3.x/Index.cshtml
@@ -0,0 +1,7 @@
+@page "/"
+
+<h1>Hello, world!</h1>
+
+Welcome to your new app.
+
+<Counter />