Display Header in React Web App

A Noob Meets Wep Apps, Episode 7

In previous episode I introduced code splitting without adding any feature. Now it’s time to move on and to code an header component with logo, title and navigation commands.

Layout component

This is not the correct structure: in actual header I will display poll title, so I need to ensure that poll state will be on top of future header component. <Layout> must be moved from App level to routes:

Nothing changes in UI, but now you have poll available when you define <Layout> and, so, <Header>.

Inserting logo

Create features/layout/index.scss to reduce padding:

We need to elaborate features/header/component.tsx to include a centered logo image. Accessibility text is taken from i18n service prop.

Thanks to import logo from './logo_h34@4x.png', Webpack correctly understands to include image file inside final bundle. logo is the path to reach the image. Note that I’ve included a 4x version of my logo in order to make the logo to display well on hi-resolution displays.

Display a title

We just need to add some style and we are good.

If you refresh, you will notice that, at first, header is not displayed. There are two places where Layout is not used: Suspense fallback for LazyFirebase deferred load; authentication inside API component.

Display a back navigation button

Firstly, I have to render an optional left item inside Header component.

Then I implement a basic borderless button, with an optional icon:

I create module in features/navigation where I define an item that describes a screenful of content. What is more, I declare a more handy BackButton component:

Navigation item is consumed by Poll.route() in order to show a left item inside Header:

Back item is passed when you invoke HighlightedPolls.route() inside App.tsx:

Back button is displayed only when user comes from highlighted polls, not directly from URL

Checking larger sizes

Image is ok but, especially at large widths, layout is quite strange. I want title to be always aligned to logo. A solution — not ideal but quite effective — is to create two columns: the former to contain back button, the latter to host logo and title, vertically aligned.

Call me Muccy. I’m a Senior iOS Developer.

Call me Muccy. I’m a Senior iOS Developer.