02: Build UI

With the project in place, you'll build most of the UI in this step.

Open the project in VSCode

While you can develop React apps in any IDE, please install and use VSCode for this tutorial as we'll be recommending various extensions along the way. The point is that you get a taste of what DX is SOFA striving for even if you eventually decide to use a different IDE.

To open a project in VSCode, do:

cd my-shop
code .

You can see a few basic building blocks here:

• The pages directory contains "page components". So far, there's only one: index.js that renders the homepage.
• The pages/api directory contains "API routes" – we'll later use that for GraphQL.

Create two page components

For your e-shop, you'll create two pages for now:

1. Homepage
2. Cart

🖼 TODO – show the two resulting pages

Replace the code in pages/index.js with this:

// TODO

For the cart page, create a pages/cart.tsx file:

// TODO

Note that this file is in TypeScript – a language that is basically the same as JavaScript but adds a few types here and there. Writing SOFA projects in TypeScript has its benefits and we'll demonstrate some of them in this tutorial but it's worth noting that plain JS is also completely fine if you prefer it.

You might also be surprised to see CSS in the React components – it's an interesting topic that is discussed in the styling guide.

Start dev mode

You can now run yarn dev and browse the app at http://localhost:3000.

Try changing something in VSCode – you should see the browser updated immediately.

Explore server-side rendering (SSR)

If you do View Source or use curl to fetch the page(s), you'll see that the server returned full HTML:

<!-- TODO -->

This is an important aspect of SOFA / Next.js as Googlebot and other crawlers don't see any difference from traditional server-side languages like PHP or Ruby.

Still, as the UI is written in React and JavaScript, the browser will eventually fetch JS bundles and "hydrate" into a fully interactive client-side application, with client-side transitions etc. This is great for UX and what makes SOFA such a good choice for modern e-shops.

Build product list

Let's create a couple of React components that will display a product list:

// TODO

(Things to demonstrate here:

• components folder
• Importing components from page components
• Composing UI from React components

)

VSCode tips

Before we move on, here are a couple of useful VSCode extensions for you to install:

• TODO
• TODO