Blazor WebAssembly is a client side framework that exists in ASP.NET Core 3 or higher. In this tutorial I am going to teach you how to start a project with Blazor in Visual Studio Code. In additional, I will show how to create a new page and get JSON data from API and show them in a table. To get started with Blazor, please install the following tools:

Also, you can search "start Blazor visual studio code" and click the Microsoft Link to find the newest tools.

1. Install the .NET Core 3.1 SDK or higher. (in PowerSell by running dotnet --version in a command shell you can find which SDK is installed in your system.
2. Install Blazor templates by this comment

dotnet new -i Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0-preview4.20210.8

3. Install Visual Studio Code.
4. Install the latest C# for Visual Studio Code extension and the JavaScript Debugger (Nightly) extension with debug.javascript.usePreview set to true.
5. For start a new Blazor WebAssembly, open the Visual Studio Code and run this commend in terminal:

dotnet new blazorwasm -o WebApplication1

in which WebApplication1 is the name of your project that you can change it

6. Install JSON and C# package:

dotnet add package Newtonsoft.Json

7. Install C# for Visual Studio Code (powered by OmniSharp).

Please wait until all packages installed successfully. Then run your project by below command in terminal:

dotnet  run

by press Ctrl+Click on link you run you project on browser or type http://localhost:5000/ in address bar as below photo:

For stop of running press Ctrl+C in the terminal of Visual Studio Code (VSC)

In this step we want to add a new Razor page and get data from a real API. So, add a new page in page folder called People. See below photo:

In people.razor page copy below codes:

@page "/People"
@inject HttpClient Http
@using Newtonsoft.Json
<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from the server.</p>

@if (peoples == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Age</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in peoples)
            {
                <tr>
                    <td>@item.id</td>
                    <td>@item.name</td>
                    <td>@item.age</td>
                    <td>@item.email</td>
                    
                </tr>
            }
            
        </tbody>
    </table>
}

@code {
    private PeopleList[] peoples;

    protected override async Task OnInitializedAsync()
    {
         using (var _client = new HttpClient())
            {
                var url="http://cutecodes.com/api/testapi";
                 var result =await _client.GetStringAsync(url);
                //dotnet add package Newtonsoft.Json
                 peoples = JsonConvert.DeserializeObject<PeopleList[]>(result);
                //cutecodes.com
            }
        
    }

    public class PeopleList
    {
        public int id { get; set; }
        public string name { get; set; }
        public int age { get; set; }
        public string email { get; set; }
    }
}

In NavMenu.razor file is shared folder add li tag:

 <li class="nav-item px-3">
    <NavLink class="nav-link" href="People">
        <span class="oi oi-list-rich" aria-hidden="true"></span> People List
    </NavLink>
</li>