If you've used React within Node or never touched React or .NET at all, this is a great place for you to start. This will be done using the most recent version of Visual Studio Community (2019).
Let's get our base project set up and ready to go. Open Visual Studio, click "File" in the top right corner, then go to "New" > "Project...", search for ASP.NET Core Web Application. If nothing shows, click in the little black box "Install more tools and features". Two options may show up for this, install the one that includes "C#" in the tags on the bottom of the description. After this installs, we can name our project and hop into it.
Before continuing, ensure you have Node downloaded
So, if you're like me and new to Visual Studio 2019 and .NET, you're probably wondering, "what is IIS Express?". To save you a google, this is an "Internet Information Server", if you've come from Visual Studio Code, it's similar to Live Server. More on IIS Express can be found here.
Your project should open in a new window, if you're on windows, you may have to give Node some permissions that will pop up before it all runs correctly.
Hopefully it's all working, and we can start exploring our new project. Let's start in some familiar territory. If you've come from node development environments, you'll recognize these. Open up the "ClientApp" directory on the solution explorer, and you'll see all of our typical React boiler plate files, along with a few extras.
Diving into the ClientApp directory, let's check out the index.js within the "src" folder. Yours should look similar to this:
In here, we can see a rootElement being defined, which is just grabbing the item from our HTML with an Id of root. This rootElement is being passed into our friendly neighborhood ReactDOM.render function, which, as you may know if you've worked with react, is simply telling React where to render our React Components passed into it. What's really cool here in this boiler plate, is that we actually already have our routing set up using react-router-dom, which can save some headache for new users.
In my next post, we'll go through and find out where and how these connections are made, to develop a deeper understanding of what's under the hood here. Look forward to that in the next week or so!
If you're already working on a project and want to keep going, feel free to familiarize yourself with the ASP.NET Core Documentation. This documentation is very in depth and get's into what I'll be going over in my next post!