React For .NET Developers Part 1 - Dev Environment Setup And Debugging

Introduction

For the past 5 years, most of my work has been in C#, but recently I’ve also started working with React + TS. Coming from an OOP backend, working with a functional frontend framework has challenged my way of looking at code.

These articles are an extension of my personal notes on the road to learning React + TS.

I will follow the same structure for these articles: first exemplify how the problem is solved in a .NET environment, followed by how I found out it works in React + TS.

Now, I know these two environments are totally different and are used for different reasons, but the way I learn is by connecting new knowledge to past knowledge so it is easier for me to compare React to .NET. Blazor exists, but it is irrelevant since the main objective of these articles is to learn React and compare it to the overall .NET environment.

As always, let’s start from the beginning: Dev Environment Setup and Debugging.

Dev Environment Setup

.NET Environment Setup

Long gone are the days when .NET was just a Microsoft technology. You can now install the SDK on Windows, MacOS, and Linux. Visual Studio is not even needed; a text editor and the .NET CLI are sufficient.

Yes, you can use VSCode to work with dotnet, but to be honest, it still doesn't beat full-featured IDEs like Visual Studio or Rider. Since I mainly work on Windows, my preference is Visual Studio.

So for people like me, the easiest way to install the SDK is to download Visual Studio and select .NET development in the options of the installer.

React Environment Setup

"React is a JavaScript library for building user interfaces.", which means that it runs on Node.js.

Instead of downloading an installer from their website, I strongly recommend you install Node Version Manager using Chocolatey if you use Windows. It will help you in the long run to manage any Node version you might need.

VSCode is the text editor preferred by most for React, but if you have $70 USD per year to spare, you can always opt for WebStorm, a full-fledged IDE. For these articles, I will use VSCode.

You will need either a build tool or a framework. For simplicity's sake, let's use a build tool for now. Reading the React docs, several are recommended such as Vite, Parcel, or Rsbuild. I will use Vite because I've been reading wonders about its Hot Module Replacement feature.

Creating A New Project

New .NET Project

Open Visual Studio. Click on "Create a new project". Select the type of project you want to create (C# Console App for this article), the name, and .NET version to use (always use the latest LTS version).

You can also use the .NET CLI if you wish. From now on, I will assume you and I are using Visual Studio, but just keep in mind that the .NET CLI exists, and you can create, run, debug, publish, test, and do other cool things with it.

New React Project Using Vite

Open a Terminal and run:

npm create vite@latest        

This will prompt you for the project name, package name, framework (React), and variant. For the variant, I chose "TypeScript + SWC" since I also want to learn Typescript.

So what is "TypeScript + SWC"? The Speedy Web Compiler is a Rust-based TypeScript compiler known for its speed and efficiency. Compared to Babel, which is the default, SWC compiles faster and uses fewer resources. While it might still have compatibility issues, it is recommended for new projects.

Finally, open the folder from VSCode.

Running

Running A .NET App

Press Ctrl+F5 to start without debugging. The console application will build and run.

Running A React App

Open the VSCode terminal and install all needed dependencies with:

npm install        

Next, to run do:

npm run dev        

This will start a Node server using Vite on a localhost port that you can navigate to in your browser.

Debugging

Debugging A .NET App

First, add a breakpoint somewhere in the code and then press F5 to start the app in debug mode. Visual Studio will change its layout to debug mode and will stop execution at the breakpoint.

Debugging A React App

1. Add a breakpoint somewhere in the code.
2. Run npm run dev.
3. Copy the app URL.
4. Open the VSCode command palette (Ctrl + Shift + P).
5. Write "Open Link" and select "Debug: Open Link".
6. Paste the app URL and press Enter.
7. This will open a new browser session with your application. Trigger whatever behavior you added your breakpoint to, and it should be hit.

React will also ask you if you want to create a configuration in a launch.json to avoid needing to do steps 4 to 6 again.

You can even do a compound configuration in launch.json, so you can have run and debug with a single press. Just remember to select "Dev + Edge" in the "Run & Debug" panel.

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Start Dev Server",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "dev"],
      "console": "integratedTerminal"
    },
    {
      "type": "msedge",
      "name": "Open Edge",
      "request": "launch",
      "url": "http://localhost:5173/"
    }
  ],
  "compounds": [
    {
      "name": "Dev + Edge",
      "configurations": ["Start Dev Server", "Open Edge"]
    }
  ]
}        

Closing Thoughts

So far, my impression of the React setup has been positive. While it certainly uses a lot more Terminal compared to using Visual Studio, setting up the environment (VSCode + Node.js) and debugging the app didn't take as long as it took Visual Studio to install.

The debugging process is very similar to attaching the Visual Studio debugger to an existing process, so I wouldn't say it is more complex. And if you set up the launch.json correctly, there is nothing to complain about.