In this tutorial, we will build a personal portfolio website that will show case all of your professional skills. In this example, my website will contain software development skills, projects, previous jobs, etc. We will building a Single Page Application (SPA) in React.js and .NET Core. I recommend having some sort of programming knowledge, but it’s not required since all code will be provided. We will build each page and component step by step, then we will deploy to Microsoft Azure. I will keep this tutorial pretty straight forward so you can get this up and running. If you have any questions or feedback, please leave a comment
Click here to see what you will be building!
Click here if you would like to fork the project
Project Set up
- Download Visual Studio Community edition here.
- When you get to the Visual Studio Installer, Check ASP.NET Core Web Application and click Next. This could take awhile to install.
- Open Visual Studio and click Create a New Project. Select ASP.NET Core Web Application. Choose a Project name, and click Create.
- Choose the React.js template and click Create.
- Once your project is created, select the run button at the top. This will take a few minutes since it has build all of the npm depedencies.
- Once it builds, you should get the following page in your browser! Let’s go over each folder to get an understanding.
Folder Structure Rundown
As mentioned before, this project will use React.js and .NET Core (C#). For those who don’t know, React is a JavaScript library created by Facebook and is used for building powerful UI components. React uses a programming language called JSX which stands for JavaScript XML. JSX allows you to write HTML in React. This will make more sense as we work on each page.
Let’s take a look at the folder structure and make some sense of it.
As you can see, the public directory contains index.html and manifest.json. You may have another file in there, you can just delete it if you want. Let’s do one thing, move index.js to your public directory.
index.html – Contains the root node HTML element. This is essentially a container of the entire application. ()
index.js – Renders the React Components BrowserRouter and App inside the HTML element “root”.
The src folder contains all of the JavaScript files that we will use. These JavaScript files are individual components of our application. You will get a better understanding later once we create our own.
The Controllers folder contains our Web API Controllers that handles HTTP requests to give data back to the front end of the application. We typically would retrieve data from a Database but in this case we will just retrieve from a JSON file. That way if you want to add more data such as Education or Jobs, you just update the JSON file.
The Pages folder contains cshtml pages, we will not be creating or touching these files.
The Program.cs and Startup.cs are required to run the application.
Now that we had an high level overview of the application, let’s move on to developing our personal resume! We will start with the About component.
George's Blog 