Resolving the Initial App Layout: Laying Down The Foundation

Explore how to set up Skypey’s initial app layout by creating a fixed sidebar and a flexible main section using React components, Flexbox, and basic CSS. This lesson helps you understand structuring a React app's UI and styling it efficiently to prepare for further development.

We'll cover the following...

- - - App.js:
- - - index.css:
- - - App.css:

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. ...

1.Getting to know Redux (Theory)

2.Your First Redux Application

3.Understanding State Updates with Actions

Project

4.Building Skypey: A More Advanced Example

5.Building Skypey: Designing the State Object

6.Building Skypey: The User Component

7.Building Skypey: The Empty Screen

8.Building Skypey: The Chat Window

9.Building Skypey: Header and Chat Window

10.Building Skypey: Messaging

11.The Skypey App

Project

Resolving the Initial App Layout: Laying Down The Foundation