Teaching at Newline Welcome

Common Issues with MDX

Introduction

Code Loading Lesson

MDX Powered Lesson

Codesandbox Embed Lesson

Replit Embed Lesson

Project Setup

This course will empower you to create exceptional Blazor applications with the new render modes in .NET 8. You can now choose from Static Server-Side Rendering (SSR), Interactive Server-Side Rendering, Interactive WebAssembly (WASM) or Interactive Auto. With the new render modes, you are no longer limited to a one-size-fits-all approach. By taking this course you will learn to tailor your application to meet your specific needs while ensuring solid performance and a seamless user experience.

For many years, web development has been dominated by JavaScript frameworks like Angular, React, and Vue. These frameworks offer powerful features and flexibility, but require developers to learn a separate language (JavaScript) and often a complex ecosystem of tooling. Blazor presents a compelling alternative, allowing developers to build interactive web UIs with C# and familiar Razor syntax. This reduces the learning curve for .NET developers and fosters code reuse across the front-end and backend.

The course is taught by Caleb Wells who is a Front-end Software Architect at ADTRAV. Caleb has been working with .NET for many years and has been a co-host on the [Adventures in .NET podcast](https://topenddevs.com/podcasts/adventures-in-net) and created several tutorials on [YouTube](https://www.youtube.com/@calebwellscodes). You can find more info on Caleb at his website, [calebwellscodes.com](https://www.calebwellscodes.com).

In this course, we will build Blazor applications empowered by the new .NET 8 render modes. Blazor's flexibility is a game-changer! Choose from SSR, Interactive Server, Interactive WebAssembly, or Interactive Auto for the perfect fit. Mastering these modes can be tricky but in this course you will learn how to navigate them to create exceptional .NET web applications.

The Ultimate Guide to Blazor Render Modes

In this course we are going to build a web app cataloging airports across the United States.

This 'travel' application will demonstrate how you can add, search and review airports using the different render modes that were added to Blazor in the .NET 8 release.

As we build out the application we will take a close look at each render mode and the benefits and drawbacks of each.

We will also look at some best practices when developing apps using Blazor. By the time you have completed the course you will have a strong foundation in Blazor and it's render modes so that you can create apps of your own.

The basics of C# and .NET for building responsive full-stack code.

An overview of Blazor – from its history to architecture, and why it’s become so popular.

How to configure, build and complete a full project in Blazor - by building a full-stack application side-by-side with the course instructor.

In-depth look at Blazor’s model classes and render modes (Server, Auto, and WebAssembly) - the secret sauce for building web-apps with fast page loads.

How and when to use each render-mode to maximise performance and usability.

A focus on what problems Blazor and its render modes solve and how to solve them.

There are 3 ways to enable mdx in your lesson files

 alias which points to the root of your course folder

import Highlight from "~/components/Highlight"; // points to /path/to/course/components/Highlight.js

---
title: Common Issues with MDX
---

### Enabling MDX

There are 3 ways to enable mdx in your lesson files

-   use `.mdx` extension when naming your lesson files e.g `module_00/lesson_01/welcome.mdx`
-   add `usemdx: true` to `course/config.js`
-   add `useMdx: true` at the top of your lesson like so:

        ---
        isPublicLesson: true
        useMdx: true
        ---

### Importing components in your lessons

To import components in `.md` files, use `~` alias which points to the root of your course folder

```js
import Highlight from "~/components/Highlight"; // points to /path/to/course/components/Highlight.js
```

### Loading images in your lesson react components