🛠️ Dota SPA: Introduction

Hey ,

I'm thrilled to help you learn JavaScript. Unfortunately, you've landed on a page where you cannot access with your current purchase.

Please upgrade (use this link) access this content.

I'm super eager to help you learn more!

🛠️ Dota SPA: Introduction

Starter

In this Dota SPA series, we will connect the two types of pages — Heroes List Page and Hero Page — from the Dota heroes components we built in the asynchronous JavaScript lessons.

We will begin this SPA with the minimum viable server we built in the previous lesson. The starter template for this lesson contains this server.

To code along, you will have to navigate to the project folder and run the following command.

npm run server

Once you run this command, you must go to http://localhost:3000 to view the app. You’ll see a blank blue page if you used the starter template.

Building the SPA

For this SPA, we’re going to write the HTML in JavaScript. When we do this, we can render the correct HTML according to the URL the user requests.

So here’s what we’re going to do over the next few lessons:

  • Build the Heroes List Page
  • Make sure the filters work
  • Build the Hero Page
  • Connect the two pages together
  • Make sure the SPA works on back/forward buttons and on refresh

Feel free to try your hand at building this SPA before you look at the lessons!