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

3 mins read

Overview

This article explains how to configure TypeScript into 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”.

Opening Command Prompt from Visual Studio
Removing unwanted packages
Upgrading packages
Installing packages
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”.

Opening Developer Command Prompt from Visual Studio 2019

Removing eslint related packages

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

Renamed files in Client of created templated project.

Conclusion

I hope you enjoyed learning about how to create ASP.NET Core application with React Typescript web application as front-end.

You can refer to our React feature tour page to know 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, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)