React project in Visual Studio 2017
I recently did this and would recommend the following:
- Create a "Blank" solution project in Visual Studio 2017.
- Add/create your .NET project as you would normally in Visual Studio.
- Now create your React project. I used the create-react-app from Facebook to actually generate my React project. This has a lot of really good built in features such as Webpack, Jest (for testing), yarn (for package management), etc. However, these details are "hidden" from you so the generated project looks much simpler. If you do need more control over the build/testing process you can run the
create-react-app eject
command. Be advised that this is a "one-way" operation as you can't put the files back in tocreate-react-app
. You will need to install node and yarn separately, if that wasn't obvious. -
Since you also want to use TypeScript you should use the react-scripts-ts script like so:
create-react-app my-app --scripts-version=react-scripts-ts
Microsoft has a good walk through here.
The tricky part is getting the generated React project into Visual Studio. I did this by installing the "Node.js development" module from the "Visual Studio Installer" that gets installed with Visual Studio. Unfortunately, Microsoft seems to have removed the blank or empty TypeScript project template (see here).
Once the Node.js tools are installed you can create a node based project in your solution. There are several to choose from under the File -> New -> Project... -> Templates -> Other Languages -> TypeScript left menu navigation. I chose "Blank Node.js Web Application".
After that you will need to copy over the React project files created by
create-react-app
into your Visual Studio project. I find it easier to create the directories in Visual Studio so they are added to the project file, then copy the files the generated folders, and finally add them to the project folder in Visual Studio.At this point you can run the scripts in the
package.json
file that were added bycreate-react-app
. I prefer to run these at the command line, but you can run them in Visual Studio as well using the "Task Runner Explorer" by Mads Kristensen.
Another possibility is to use the react extension in Visual Studio Code. That's not exactly what you asked for, but you get a look and feel similar to Visual studio and full React support.