Resolving the Initial App Layout: Laying Down The Foundation

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:

App.js: