Join Kazi Nasrat Ali for an in-depth discussion in this video The dev environment issue with React and Visual Studio 2015, part of Building React and ASP.NET MVC 5 Applications.
- [Instructor] We will now move on to Front-End and to writing React code. However, to write React code in TypeScript in Visual Studio 2015 IDE, we have to fix some issues to make the IDE work for us, while we write React code. The issues are concerning IntelliSense, code highlighting, and build issues. I'll show you what the issues are, but before that, we need to install Node.js from this link.
I have already installed in my machine. I just want to show you the webpage, and you can install from here, select Windows Installer, and follow the steps. You can also see if Node is installed in your machine by going to command prompt, and typing node --version. I have command prompt open, in admin mode. I tend to open in admin mode to avoid any access issues. So lets type node --version.
If node is installed, it'll give me the version number. So, node is installed in my machine. I can also take the version of npm, by typing npm --version. So npm version is 6.4.1. Keep in mind that the version numbers that are showing on my screen, is the version that I have installed. It may be different version for you, you may have gotten the latest version, but not to worry, they will work for you too.
Now lets go to the project, and try to see what the problem is. Create a folder under Content, I have already created src folder, and now lets add a TypeScript file, TypeScript JSX file. Lets call it food.tsx. You can click Yes here. Now lets get some React TypeScript code. I have it in code-snippets folder, so lets grab it from there, and copy this code, and copy the code here.
So this is React code, lets save. Now as you can see, the red wavy lines under the word react, react-dom, and also under the html tags, div, h2, so this is the issue. That means the IntelliSense is not working. Further, if we try to Build it, we will get some errors, and here we are getting the errors. We're getting the error for build, and also IntelliSense.
Lets check the error for build only, and we can see there are some errors. Many a times, Microsoft resorts to the (mumbles) IDE, installs missing packages, and adds default configs behind the scene, to make the life of a Developer better, but that is not the case with React, and TypeScript. In Visual Studio 2017, this issue is not present, but for Visual Studio 2015, and earlier, we need to install and configure a few more things.
So lets do these rest of the things before we start coding the (mumbles) in React.
- Creating the back end
- Scaffolding a project with MVC 5
- Setting up the service API for data
- Creating the front end with React
- Handling events for React elements
- Responsive UI and mobile friendliness
- Securing the API
- Debugging the front end and back end