Start Here!

Welcome to Blazor by example.

JavaScript may have dominated the frontend landscape for the past decade or two, but Blazor has real potential as a JS alternative.

For me, Blazor really shines in two key areas.

1. The component model
2. The ability to use Shared Models between frontend and backend

The idea of building a user interface as a series of small components isn't new (React, Angular and Vue all have similar models) but being able to build the entire thing in C# is potentially a game changer, especially if you're already confident and familiar with C#.

Secondly, you can share models between your Blazor app and any Backend you choose to use (e.g. Web API).

One of the big problems with JavaScript comes when APIs change and suddenly the frontend code is broken (because something changed name, or was deleted entirely!).

But if you share the same C# model between your Blazor frontend code and your Web API backend code, when you change the model and recompile your app, both halves of the equation change together.

If there's a discrepancy between them, your app won't compile (better to catch this at compile time, before you've pushed your app out, than at runtime when your users start complaining!)

In this course my aim is to get you up and running with Blazor's component model by showing you how to use the core building blocks to build several different "mini" applications.

My hope is you'll discover for yourself just how powerful Blazor's component model (and "thinking in components") can be, whilst still being able to pick up the basics in just a few hours.

How 'Blazor by Example' works

You now have complete access to this online version of Blazor by Example.

Check out the "Bonuses" module for complete versions of the examples you're about to build; handy for checking your own work and/or exploring further.

There you'll also find a few extra useful links and background information about some of the 'starter projects' we use in the examples.

Useful terms and concepts

One useful thing to watch out for... Every now and then you'll see a word highlighted in purple, and bold, like this.

If you didn't already, click it to see what it's for!

Code for two 'starter projects'

One of the challenges with learning Blazor is that you can wind up trying to learn two things at once:

1. How to build your UI using Blazor's component model
2. How to create and wire up a backend API for your UI to interact with (via HTTP calls)

Learning both simultaneously is a tall order, so I've structured these examples in a very specific way.

The first few examples (up to and including the Slack clone) are front-end only. As you build these project you'll see that you're using hardcoded data in place of any calls to an actual API.

This frees you up to focus purely on the UI-building aspects of Blazor (using its component model).

Thereafter, some of the remaining examples do interact with a backend, but rather then have you dive off on a tangent and build those from scratch, you'll find instructions to clone existing versions of those APIs from GitHub.

This frees you up to wire up your Blazor components to these APIs, but there's nothing stopping you from taking some time and exploring how these APIs are implemented if you're interested in digging a little deeper!

And with that, you're ready to go!

Hit the button below to continue to the first example...