React TypeScript HTML Application TemplateA project template for creating an application with an HTML page, a TypeScript React code file, and a CSS file. Bundled with Webpack. |
What It Is A template for new projects in Visual Studio 2017 and Visual Studio 2019 that creates an HTML application with TypeScript that can use React and other Node modules. The project contains an HTML file, a CSS file and a TypeScript file with some basic sample code. The TypeScript file can contain React code. What It Does When started with F5 a project created with this template will start a web server, IIS Express, and show a ticking time in the selected web browser. The code to show the time is in a TypeScript class which creates and renders a React component. Debugging in Visual Studio As with the HTML Application with TypeScript template and the React JavaScript HTML Application Template, this template allows debugging from Visual Studio in Chrome, Edge and Internet Explorer. Just create a project with the template, wait for the Node modules to auto-install, set a breakpoint in Visual Studio, and hit F5. There is no need to use the browser development tools. This makes the template useful as an HTML plus TypeScript playground. Relationship to JavaScript Version The project created by this template is identical to the project created by the React JavaScript HTML Application Template, except that the code is in TypeScript not JavaScript and it uses the TypeScript compiler rather than Babel to compile. Node Modules and Webpack This template is set up to use React installed as a Node module. For this it uses a module bundler, Webpack. Set-up for this kind of project in an IDE like Visual Studio can be difficult. A motivation for this template was to create something that will do it for you with a minimal configuration. You can use other third-party node modules than React if necessary. Just add them to package.json under 'dependencies', and install them (rightclick package.json in Solution Explorer/Restore Packages). Now you should be able to import them in your codefiles. Where the Template Appears In Visual Studio 2017 this template will appear under 'TypeScript' under 'Other Languages' in the New Project dialog. This needs the correct dependencies installed, see below. In Visual Studio 2019's 'Create a new project' dialog the easiest way to find it is to filter by Language = TypeScript. In both cases it appears as 'HTML Application with TypeScript and React'. Please be aware that this template is based on ASP.NET, so you will need the ASP.NET workload installed in Visual Studio 2017 or Visual Studio 2019. If the workload is not there the template will not appear. It does not need Node.js development or .Net desktop development workloads. |