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.
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.
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:
npm install -g webpack typescript typings
TypeScript 2.x or newer:
npm install -g webpack typescript
This will install globally these packages:
- 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.
- 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:
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
npm install --save-dev ts-loader source-map-loader
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:
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.
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:
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 firstname.lastname@example.org