Resolving the Initial App Layout: Laying Down The Foundation

Our very first step in building "Skypey". In this section, we'll take care of the initial design and the structure of our main files.

We'll cover the following

From the CLI, create a new react app with create-react-app, and call it Skypey.

create-react-app Skypey

Skypey’s layout is a simple 2-column layout. A fixed width sidebar on the left and on the right, a main section that takes up the remaining viewport width.

Here’s a quick note on how this app is styled.

If you’re a more experienced Engineer, be sure to use whatever CSS-in-JS solution works for you. For simplicity, I’ll style the Skypey app with good ‘ol CSS - nothing more.

Let’s get cracking.

Create two new files, Sidebar.js and Main.js within the root directory.

As you may have guessed, by the time we build out the Sidebar and Main components, we will have it rendered within the App component like this:


Get hands-on with 1200+ tech skills courses.