Getting started on ASP.NET Core & React - episode 01

Getting started on ASP.NET Core & React - episode 01


  1. Episode 1 – Introduction (you are here)
  2. Episode 2 – Backend / Infrastructure
  3. Episode 3 – Frontend Setup
  4. Episode 4 – Data flow
  5. Episode 5 – Tests / Security
  6. Episode 6 – It’s your turn
  7. Episode 7 – migrate from ASP.NET Core 1.1 to 2.0

The Most Important Thing (Seriously)

Introduction will be quite unusual, but don’t worry – at the end of this post everything will be clear.

We’d like to show you how to create a modern web application based on well-known, widely used technologies, but at the same time we’d like to ask you if you can forget for a moment about technologies.

From our perspective, the path you will follow during incoming posts will be the biggest value for you. You will see how projects are initiated and created from scratch. We will start with a blank page, and (hopefully) we will end with fully working application. Technologies? Yup, there will be ultra fast .NET Core and super fancy React, but in the future you might work with something else – that should not be a problem for you to jump from one technology to another.

Instead of focusing on technologies, you should be focused on patterns and practices.

We will teach you how to create basic environment set up, how to prepare and connect back-end with front-end, and how to pass data through all layers in our application. And of course we will build some core features for every single web application!

That’s why we won’t argue if React is better than Angular or if ASP.NET Core was the best possible option to choose – we will use technologies as a tools, which will help us reach our goal – nothing more, nothing less.


We’re sure that some of you, programmers, always wanted to start your own software house company or thought about being an entrepreneur focused on IT.

That’s often a hard nut to crack for the beginners. You need to figure our how the business plan will look like, how to organize your workday, how to get funds, how to manage projects, and so on… To run a successful company you need to handle many things, and what’s even harder – some of them don’t exactly depend on you.

Yes, I’m talking about the customers.

With only one or two small customers it’s quite easy to manage all the projects you’re working on, give them an insight about the situation in the project and to communicate with them. But when the scale goes up, things are getting more complicated. There are more projects, more questions and more issues. At the same you still have only 24h for all these things. So… what can be done to make our life easier?

We live in a 21st century – there’s an app for that! Or… there will be. Our own.


That’s right – we are going to build an application to manage our own software house (of course first of kind, we’ll be like Facebook 😉 ).

After brainstorming session we had a long list of features which this type of application requires. Then we removed 75% them. Why? To stay focused on the most important things from the developer’s perspective. First, you will see how to build MVP, later you can build and add any features you want.

You won’t regret joining us!


Now I’d like to show you what the future will look like.

Roadmap for this course can be divided into at least four parts. First part, so called ‘Introduction’, is currently in front of your eyes. The goal of this post is to help you understand what we are going to build, based on what tools, what language and – in general – idea behind it.

Later we’d like to focus on building a foundation – two posts will be dedicated to environment preparation (both back-end and front-end). At this point you will be able to see a working application represented by blank page served from a server.

Then there will be a series of posts about building features. At the beginning of each post we will define acceptance criteria to deliver so called ‘business increment’ – finite set of functionalities which should work correctly and which i.e. could be presented to our imaginary investors. Based on our experience, we’ve picked some core features which can be found in nearly every single web application. To be able to deliver them, we need to work in a ‘full-stack mode’ – our posts will contain mix of a back-end and front-end tips.

At the end there will be – as you can guess – a summary of our journey. It will be something similar to ‘tl;dr’, but we hope you will stay with us starting from now 😉

What’s super important – our project will be fully available on GitHub (you can check it out here). You’ll be able to fork it, modify, suggest pull requests and cooperate with us in your own repository. You should definitely try to break something, modify or add new features – it’s the best way to learn as much as possible.


There will be two main building blocks of our application – back-end based on ASP.NET Core, and front-end based on React.


We’ve been working with .NET from the beginning of our developer’s careers. We spent thousands of hours building web applications based on ASP.NET MVC and hundreds of hours creating solutions based .NET – mobile and desktop applications, plugins and extensions.

That’s why it was a natural step for us to use ASP.NET Core as a main part of our back-end.

The newest member of ASP.NET family is being described as a “lean and composable framework for building web and cloud applications”. Great performance, modularity, tools and a lot of other cool features convinced us to make this choice.


React is well-known front-end library for building user interfaces. When we were thinking about our future UI we defined some specific set of requirements which needs to be fulfilled by our candidate to own the interface:

  • it has to be considered as one of the industry leaders
  • it has to be flexible enough to fit into server-side routing
  • it has to be ultra-fast, lightweight and developer-friendly

That’s why we believe React will be the best choice for our project.

There might be some questions why we’ve decided to go into this kind of “monolithic” architecture but for us it was clear – any kind of SPAs, microservices and other stuff used in much bigger project would be nothing else than overengineering. We’ll try to stick with simple and lean work environment as long as possible. Let’s not forget that this course is about building a working product in a reasonable amount of time, instead of building something using everything you can find on the Internet.

Please keep in mind that we’ve created this tutorial on the latest version of React “Stack”, before React “Fiber” happened. So in this tutorial you may either follow our path based on React 15.x, our you can install React 16.x but we can’t guarantee that everything will work as described here. From our perspective, React 15.x is definitely good enough to jump into React’s ecosystem and to learn more about i.e. component architecture of your app. Enjoy!


It definitely wasn’t the easiest choice for us. We had a long debate whether we should use English or Polish language. As you can see here, we bet on English. Why?

Because we all live in a global community.

English is considered now – and probably still be in the future – as the universal language of software development. It’s something that connects programmers from many different countries and companies – by using English all barriers related to communicating, learning and sharing knowledge are gone.

In the vast majority of projects you will find English variable names, English method names, English class names and so on. There’s a chance that your managers will speak English, and there’s also a chance that English will be a primary language in your next project! You should definitely be ready to work under conditions like that (but at the same time you shouldn’t be worried – you don’t have to be a native speaker!).

It’s high time for all of us to level up! Let’s make this step together – we will do as much as needed to clear up any kind of confusion related to our posts, and of course we will be waiting for your feedback!

Are you ready?

Now we are waiting for your thoughts on this – leave us a comment below, or on our Facebook fanpage. We’d like to know if learning in this way is good for you, or you were thinking about something completely different. We will consider every single suggestion!

Next episodes are coming so stay tuned!