This is an ultra simple tutorial on how to create a .NET Core + ReactJS project using Visual Studio Community 2017. It is for beginner-beginners (unlike my just plain beginner self 😆). It should help anyone who is unfamiliar with Visual Studio or with web applications in general. If this is far too simple for you, don't worry! There is more to come; as I learn, I'll help you learn too!
Before beginning, install:
Visual Studio Community 2017 available here.
.NET Core 2.2 available here (using .NET Core Installer: x64)
NodeJS available here (using the Recommended for Most Users option)
Creating a project:
1) Install the above programs/packages starting with Visual Studio Community (the order installed after finishing Visual Studio doesn't really matter). Downloading Visual Studio Community might take a bit of time; this is normal. After the initial installer finishes loading, a pop-up will be displayed that will need you to select what type of projects you want to use Visual Studio for. I happened to select a bunch, but all you will need for web applications, specifically, is ASP.NET and Web Development under Web & Cloud. You can install as many workloads as you want, but keep in mind that the more you select, the longer the download/installation will take (if you ever want to change these, just look for the Visual Studio Installer in your programs and click Modify under Visual Studio Community 2017):
2) After everything is completely installed, open up Visual Studio (Visual Studio will probably prompt you to sign in with a Microsoft account, feel free to follow the prompts) and create a new project by going to File >> New Project in the top left corner. A pop-up with more selections should then appear. In the left column, select Visual C# (by clicking the small arrow) >> .NET Core. In the right column, then select ASP.NET Core Web Application. Fill out the small form on the bottom containing Name, Location, and Solution Name (I set my Visual Studio theme to dark, so if you are entirely new to it, then yours will most likely appear white):
3) Press Ok when you feel that your information is correct. The next screen will prompt you to define what kind of .NET Core project you want to create; this is where we will choose React and specify what version of .NET Core we want to use. At the top, next to .NET Core, make sure the dropdown to the right of it shows ASP.NET Core 2.2 (the most recent version) in the box. Then in the area full of options below it, select React.js. Make sure to leave the Configure for HTTPS box below that checked:
4) Press Ok and your project will be created for you (after a bit of loading) including a sample controller and a few example components.
If you click IIS Express (with a green triangle next to it) at the top of Visual Studio, you can run your project and view it in the browser. You should get a starter page with a top Navbar/menu bar that looks like this:
A bit about your new project:
1) Components are your web page builders or pieces. They are like legos and can be used to build almost any web page. A component can hold many other components or can stand alone; it is your choice!
2) Controllers have many different uses across ASP.NET, but with core and ReactJS, they are mainly used to control incoming and outgoing information. So if you have a database or are using an API (which, if you are unfamiliar, is kind of like a pre-made online database with special features; there is definitely more to it, but let's keep it as simple as we can for now) you can use a controller to pull out, manage, and create the information contained in it.
And that's it:
Make sure to explore your new project! Look at the given controller and experiment with components of your own to get a better feel of a ReactJS project. There is a lot going on with React, but this will at least help you get started. 😁
