Create ASP.Net Core Application with React and TypeScript

This tutorial will walk you through the steps of developing a web application using ASP.NET Core, React, and Typescript. We will start with the initial setup in Visual Studio and then move on to implementing React and using Typescript. This tutorial is intended for beginners who are new to these technologies.

Before we start, make sure to have these installed:

1. I recommend using Visual Studio Community 2022 because it's free and the latest version (as of this writing).
2. You'll also need the .NET SDK 8.0. This provides the tools and libraries needed to build and run .NET applications.
3. Additionally, Node.js (which includes NPM and NPX) will be required for working with front-end technologies.

Create ASP.Net Core and React Projects

We will start by using ASP.NET Core and React to create a web-based application. Here are the steps to create a project using Visual Studio 2022:

1. Open Visual Studio 2022, then select Create a new project.
2. After that, search for and select React and ASP.NET Core.
3. Select Next, adjust .NET to version 8.

After creating the project, you will see two folders in your solution: client and server. The client folder contains the React application, and the server folder contains the ASP.NET Core API.
To run the project, press the Play button in Visual Studio. This will start both the client and server applications.
You should see two browsers open: one for the API and one for the user interface. The API browser will display a list of endpoints that you can use to interact with the application. The user interface browser will display the React application.

if you find an error like this:

[vite] http proxy error at /weatherforecast:
AggregateError

This happens because the process of running the client application is faster than the server so when the client requests data to the server, the server will not respond.

Once the server application running, refresh the client application.

Add TypeScript to an existing ASP.NET Core app in Visual Studio

Install TypeScript

• In the Solution Explorer, right-click on the solution name or the project name and select Manage NuGet Packages.
• Search for and select Microsoft.Typescript.MSBuild. Make sure the project is checked in the right pane and click Install.

Create a TypeScript configuration file

• Right-click on the project name. Click Add > New Item.
• Select TypeScript JSON Configuration File. Click Add. If you don't see any options, click Show All Templates and search for Typescript Json Configuration File.
• Open tsconfig.json and replace the code with the following:

{
    "compileOnSave": true,
    "compilerOptions": {
        "noImplicitAny": false,
        "noEmitOnError": true,
        "removeComments": false,
        "sourceMap": true,
        "target": "es5",
        "outDir": "wwwroot/js"
    },
    "include": [
        "scripts/**/*"
    ]
}

Create a TypeScript file

• Right-click on the project name > Add > New Folder. Name the folder scripts.
• Right-click on the scripts folder > Add > New Item > select TypeScript file. Name the file app.ts.

Add code to the TypeScript file

function TSButton() {
    let name: string = "Fred";
    document.getElementById("ts-example").innerHTML = greeter(user);
}

class Student {
    fullName: string;
    constructor(public firstName: string, public middleInitial: string, public lastName: string) {
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
}

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person: Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user = new Student("Fred", "M.", "Smith"); 

• Customize: Feel free to change the code as you like. Try modifying the greeter function or changing the values used to create the Student object.
• IntelliSense: Visual Studio provides IntelliSense for TypeScript. If you remove "lastName" in the greeter function, for example, and press Ctrl + space, you will see suggestions based on the "Person" interface.

Modify Index.cshtml

• Open Views -> Home -> Index.cshtml. Add the following at the end of the file:

<div id="ts-example">
    <br />
    <button type="button" class="btn btn-primary btn-md" onclick="TSButton()">
        Click Me
    </button>
</div>

Modify _Layout.cshtml

• Open Views -> Shared -> _Layout.cshtml. Add the following before @await RenderSectionAsync("Scripts", required: false) <script src="~/js/app.js"></script>

Build and Run

• Save all changes.
• In the toolbar, click Build > Build Solution.
• Look in the wwwroot/js folder. You should see two files: app.js and app.js.map. This indicates the build was successful.
• Press F5 to run the program.