11 Project: Website Menu

This chapter covers

Creating the necessary scaffolding for a menu component
Rendering a static website menu
Homework adding advanced features to the menu

We have reached a milestone. With the completion of chapter 9, you now know all you need to know about React itself to actually start building some pretty complex web applications. This chapter and the next two chapters are all project chapters. These projects are much larger examples that guide you through the first steps of creating a full-featured web application and sets you up for creating more advanced variants of that same application.

The project in this chapter is a website menu. It is a top-bar menu component that you can directly use in a website. We're going to create this project in five steps. These are all outlined in figure 11.1.

Figure 11.1 We start this project with a scaffold, and over the steps in this chapter, we're going to build a fully-fledged dynamic menu with an optional link to a profile page.

The scaffold is where you start out building this application. Each additional step of the application adds more advanced features to the menu while utilizing new parts of the React API. We're going to set up step 1 first in this chapter, and then we're going to solve step 2 together. From then on, we're only going to introduce the subsequent steps to you, and then you have to solve them yourself.

11.1 Scaffolding for the menu

11.1.1 HTML output

11.1.2 Component hierarchy

11.1.3 Icons

11.1.4 CSS

11.1.5 Template

11.1.6 Source code

11.1.7 In the browser

11.2 Rendering a static menu

11.2.1 The goal of this exercise

11.2.2 Desired HTML output

11.2.3 Component tree

11.2.4 Source code

11.2.5 In the browser

11.3 Homework: A dynamic menu

11.3.1 Goal for this step

11.3.2 Hints for solving this step

11.3.3 Component hierarchy

11.3.4 What now?

11.4 Homework: Retrieving items from context

11.4.1 Goal for this step

11.4.2 Hints for solving this step