React JavaScript HTML Application Template

What It Is

A template for new projects in Visual Studio 2017 and Visual Studio 2019 that creates an HTML application with the latest JavaScript that can use React and other Node modules.

The project contains an HTML file, a CSS file and a JavaScript file with some basic sample code. The JavaScript file can contain React code.

What It Does

When started with F5 a project created with this template will start a web server and show a ticking time in the selected web browser, which can be Internet Explorer. The code to show the time is in a JavaScript class which creates and renders a React component.

Debugging in Visual Studio

As with the HTML Application with TypeScript template and the TypeScript with React 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 JavaScript playground.

Relationship to TypeScript Version

The project created by this template is identical to the project created by the TypeScript with React Application Template, except that the code is in JavaScript not TypeScript and it uses Babel to transpile rather than the TypeScript compiler (see below).

Node Modules, Babel and Webpack

This template is set up to use React installed as a Node module. For this it uses a module bundler, Webpack. Webpack is also configured to use Babel to compile next-generation JavaScript to a version that can run in older browsers such as Internet Explorer.

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 'JavaScript' 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 = JavaScript. In both cases it appears as 'HTML Application with 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.