We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Platform: JavaScript - EJ 2 |
Control: General |
Published Date: February 19, 2021 |
Last Revised Date: April 9, 2021

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

 

 

 

 

 



 

 

 

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile