Using React with TypeScript on Visual Studio

A step by step guide on how to use React + TypeScript on Visual Studio

Note 1: TSD is deprecated, this article was updated to use typings.

Note 2: The JavaScript universe is always evolving, this article was originally wrote for TypeScript 1.8.x, if you are setting up a new environment or upgrading to TypeScript 2.x check “For TypeScript 2.x users”.

Visual Studio is an amazing IDE, but it lacks out of the box support to React. Even though you can write JSX and use React in Visual Studio, it doesn’t help you to bundle or give you nice IntelliSense on React code.

Many extensions and packages are available but if you like to have more control over what is going on here is a quick tutorial to get you started!

For TypeScript 2.x users

Upgrading from 1.8.x: Most of the time it is easy to update from TypeScript 1.8 but for big projects some conflicts might happen due the new definitions system. On version 2.x, TypeScript uses @types definitions instead typings and some NPM packages already install the definitions for you. If your project is using typings I highly recommend to remove the old definitions folder and including all definitions again using @types. This is as easy as running:

npm install --save @types/package_name

New installation: New installs of TypeScript will default to version 2.1.4 or any newers version, I’ll add notes on every step of the article so you can skip the unecessary step.

Getting ready

First of all, you need to install Node.js and NPM, the installation is very simple and you can download it https://nodejs.org/en/

Tip: Go with the LTS version

With Node.js and NPM installed it’s time for some command line, open your command prompt and run:

TypeScript 1.8.x:

npm install -g webpack typescript typings

TypeScript 2.x or newer:

npm install -g webpack typescript

This will install globally these packages:

1. Webpack: will be used to transpile and bundle your code, making a single file more compatible with browsers that don’t support all the required features.
2. TypeScript: a JavaScript superset, basically give strong types to JS and enable full intellisense on Visual Studio
3. typings: or TypeScript Definitions Manager will manage the “libraries” definitions for us, allowing intellisense for external libraries like React

Starting the project

Now it’s time to open Visual Studio, create a MVC project of your preference or use the one you already have.

With you project created go to the root folder (the one which web.config) on your command prompt and start NPM with this command:

npm init 

Answer all the questions and after your package.json file is created add it to your project and it is time to install the libraries. Run again on your command prompt

npm install --save react react-dom

And

npm install --save-dev ts-loader source-map-loader

And finally

npm link typescript

ts-loader and source-map-loader will be used by webpack to enable TypeScript loading and mapping, allowing your .tsx files to be correctly bundled and transpiled.

After linking typescript compiler to our project we need to install the TypeScript definitions for React, on your project root folder, run:

TypeScript 1.8.x:

typings install dt~react --global --save
typings install dt~react-dom --global --save

Those commands created a folder called typings and a file called typings.json; On your Solution Explorer, add both to the project.

TypeScript 2.x or newer:

npm install --save @types/react
npm install --save @types/react-dom

This step (for both TypeScript’s versions) installed the TypeScript definitions on your project, they will be used both by Visual Studio and TypeScript to validate the types and provide the Intellisense.

Tip: if you plan to use other libraries just check https://github.com/typings/typings for more information when using TypeScript 1.8.x or https://www.npmjs.com/~types when using TypeScript 2.x

Now, right click on Solution Explorer, right click on your project go to Add > TypeScript JSON Configuration File

This step will create a file called tsconfig.json on your project root, open the file and change its content to:

VisualStudio has a great documentation about this file, so if you have any doubts start by hovering your mouse on any of its properties.

Now using the Solution Explorer reate two folders: src and dist under Scripts folder (this is a default MVC folder and should be already there). Those are only suggestions, you can create the folders with any name or even don’t create folders but you will have to change your configurations after that.

Now, to finish the setup, create “webpack.config.js” on your project root and change its content to:

If you changed the folder names on the previous step make the same changes on this file.

Now is time to code some React. Create another folder called “components” inside “Scripts/src” and create a file called well.tsx inside it. Here is well.tsx code:

Tip: On Solution Explorer, right click > Add > TypeScript JSX File

On “Scripts/src” create index.tsx and change it to:

At this point you wrote some code and Visual Studio should be already checking for syntax error, if you try to compile it will check all your files against errors.

The last step is Transpile and Bundle all that, open again your command prompt, go to your project root and type:

webpack

If everything is correct you should see something like:

Now, inside “Scripts/dist”, bundle.js was created, simple add this to any of your views and run your project.

The full source for this project is available on my github: https://github.com/lucavgobbi/typescript-react-visualstudio

If you find this post useful please share and like!

If you have any doubts you can find me on twitter @lucavgobbi or send me an email me@lucavgobbi.com

Thank you