Articles in this section
Category / Section

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

4 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”.

  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”.

Opening Developer Command Prompt from Visual Studio 2019

Removing unwanted 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 an ASP.NET Core application with a React Typescript front end in JavaScript Application.

You can refer to our React Typescript 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 Typescript example to understand how to create and manipulate data in the React Typescript.

For current customers, you can check out our Document processing libraries from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our React Typescript and other React 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 forumsDirect-Trac, or feedback portal. We are always happy to assist you!

 

 

 


 



 

 

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments
Please sign in to leave a comment
Access denied
Access denied