How to create ASP.NET Core application with React Typescript web application as front-end ?

Overview

This article explains how to configure TypeScript in a React web application, which is created using the project template. You can refer the installation of Syncfusion ASP.NET Core project template extension and project creation from the already published blog post as follows.

https://www.syncfusion.com/blogs/post/syncfusion-asp-net-core-project-templates-now-available-for-angular-and-react.aspx

Configuring TypeScript

Configuring TypeScript involves upgrading, installing and removing some of the packages and renaming the file extensions from “.js” to “.tsx”.

1. Opening Command Prompt from Visual Studio
2. Removing unwanted packages
3. Upgrading packages
4. Installing packages
5. Renaming the files extension from “.js” to “.tsx”

Opening Command Prompt from Visual Studio

Move to Tools tab in Visual Studio 2019 and navigate to “Command Line à Developer Command Prompt”.

Removing Unwanted Packages

Remove the ESLint-related packages from the application using the following command.

npm remove eslint eslint-config-react-app eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

Upgrading Packages

React Script packages need to be upgraded to the latest version using the following command.

npm upgrade react-scripts --latest

Installing Packages

Need to install latest version of TypeScript and related definition files with the following command.

npm install typscript@latest @types/node @types/react @types/react-dom @types/react-router @types/reactstrap @types/react-router-dom --save-dev

Renaming the file extension

Once above steps are completed, rename the script file extension from “.js” to “.tsx” under “<project_root_folder>/ClientApp/Src/”.

Conclusion

Now, build and run the application as usual using the Visual Studio IDE.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SyncfusionReactApp-329086512

Conclusion

We hope you enjoyed learning about how to create an ASP.NET Core application with a React TypeScript web application as the front-end.

You can refer to our React feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!