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).
Setting up
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
Verify it works
Once you've installed your new project, let's make sure it's all working. Start your web page with IIS Express, I've underlined it here:
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.
Connecting the dots
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.
Now that we've found our ReactDOM.render function, let's hop into the "public" folder, which is still in the "ClientApp" directory. Here resides our index.html, favicon, and our manifest.json. Great, so we know that these static files are being served somewhere, and our JavaScript files are also being run, next thing to do is to find out what's bringing these together.
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!
Top comments (0)