Building in Public: React Image Layout with Flexbox and Grid - ACT 3:Crafting and Styling the Navigation with SCSS

EPISODE ONE: react-image-rendering
ACT 3:
ACT 3:PART ONE:

INTRO/RECAP:
{In the last ACT, we cleaned up the App.tsx component and wrote out our very first line of code, hello world. Prior to that, we also switched our server from Local: localhost:5173/ to localhost:3000/. This allows our app run on port 3000. We also installed more packages; react-router-dom and the Css on steriods, Scss}.

Link to ACT2 Here

The following events take place in ACT 3:

ACT 3:PART TWO:
INTRODUCTION TO React Components and MainNavigation:

Ok then, welcome back. Let's keep the train moving. So the first thing we gonna do here is go to the src folder, in it we gonna create a folder called components.
After creating the component folder, we gonna create another folder inside of it, and call it layout. In the layout folder, create a file called Layout.tsx. We gonna leave it blank for now. Then still inside the layout folder, we gonna create another file and call it MainNavigation.tsx. We gonna write this block of code there:

import classes from "./MainNavigation.module.scss";

const MainNavigation = () => {
  return (
    <div className={classes["main-nav-container"]}>

      <h2>React Image</h2>

      <ul>
        <nav>
          <li>images-flex</li>
          <li>images-grid</li>
        </nav>
      </ul>
    </div>
  );
};

export default MainNavigation;

What then is a component?
Beautiful question. A react component is just a Javascript function. Infact one could argue that react is all about components.
Yes. And according to Maximillian Schwarzmuller, components are resusable building blocks in a user interface. They are just a combination of Html code, Css code and possibly Javascript. The code you are seeing above, is a reusable piece of code. By reusable, I mean it can be used anywhere in our app. And this MainNavigation is our header. The header to our web app. The header is what we see at the top of a web page, the part that carries the logo and login words.

Now guys, remember what I told you guys earlier on about the Netflix analogy? I said that "And by components, I am talking about the nav bar, search bar, movie card, even the fl*pping buttons"? So, this MainNavigation is a component just like the rest. And mind you, this is just a Javascript function that is returning a jsx. Or lets just say html.

ACT 3:PART THREE:
Adding Styles With Scss:

Now for us to be able to work with the block of code in the MainNavigation.tsx, first, we gotta make it presentable, by adding styles to it before we pass it along. Yep! we gonna pass it along to another component for it to get rendered in our App. Or we could just pass it directly to our App.tsx, but naaa! I wouldn't like to do it that way.
And We gonna make it presentable by adding styles to it which will be done with Scss which would be used in the place of Css.

Applying Scss in MainNavigation:

Create a file another file in the layout folder and call it MainNavigation.module.scss if you haven't already. Then write these codes in the MainNavigation.module.scss:

.main-nav-container{
    width: 100%;
    height: 5%;
    background-color: purple;
    padding: 0 10%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    h2{
        color: white;
    }

    ul nav{
        display: flex;
        align-items: center;
        padding: 0;
        list-style: none;
        margin: 0;

        li{
            color: white;
        }
    }
}

Lol!😁😁😁 Looks weird right? dont worry, let me explain.

Notice that at the top of the MainNavigation we got this code:

import classes from "./MainNavigation.module.scss";

Now that code is used to bring into the picture the codes for our Scss. Without that line of code, the styles wont work on the jsx codes. So we connect the Scss file to the react component with that line of code.

On the next line we got:

 const MainNavigation = () => {}

Right there, we are defining our function, or component. And it is called MainNavigation.

Then the div here is the parent container, because it houses other
elements.

Then it has this: className={classes["main-nav-container"]}

The main-nav-container is the name of our Css or Scss class.
And it has codes like:

width: 100%; Which means this container should occupy the total width of its parent.

height: 5%; It should only be 5% high.

background-color: purple; The color of its background should be purple.

padding: 0 10%; This has to do with spacing. The first value:0, is for top and bottom. Meaning we don't want space at the top and bottom. And the second value, 10% is for the sides. Left and right. Meaning we want 10% space on both sides

display: flex; This is gonna put the elements on the same level horizontally. It arranges the elements next to each other horizontally.

align-items: center; This code helps balance the elements. It centers items vertically within the container.

justify-content: space-between; This pushes the elements apart to opposite ends. So the first is on the left, the last is on the right, with space in between.

Then what about the h2? We are applying a color of white to the h2 which is also going to reflect on the page.

nav ul: We are targetting the ul which is a child of the nav and running codes on it. We are using the display flex again to arrange the children of the nav side by side. Just as we did earlier for the MainNavigation. Because if we don't apply display flex, the elements are going to be stacked on each other vertically, so we use the display flex to arrange them horizontally.

li: And here, as we did in the h2, we are applying white to it.

ACT 3:PART FOUR:
Constructing the Layout Component:

So we gonna save our work by typing/running: ctrl + S. And then this MainNavigation component, we are going to move it into our layout file. We do that by first of all creating a Layout component in the layout file. And we do that by creating a function, as we did with MainNavigation earlier.
So the entire Layout component will look like this:

import React, { ReactNode } from "react";
import MainNavigation from "./MainNavigation";

const Layout: React.FC<{ children: ReactNode }> = (props) => {
  return (
    <div>
      <MainNavigation />
      <main style={{ width: "90rem", maxWidth: "60rem", margin: "6rem auto" }}>
        {props.children}
      </main>
    </div>
  );
};

export default Layout;

Crazy right?
Relax homies,Let me go in like needles.

Breaking down the Layout:

Now let me break down what's happening here especially with the React.FC.
Now, in the MainNavigation component, we exported the function at the base of the file, that will enable us to use the component anywhere we like. And we like to use the component here, in the layout. So we import it at the top, The MainNavigation component. Also, we import React, ReactNode from "react". When we use this Layout component, it will create a structure with a navigation bar at the top and a main section for other content.

const Layout creates the Layout component.
React.FC<{ children: ReactNode }> , this is Typescript in action,This is telling Typescript that Layout is a functional component, hence the FC and It expects a children prop of type ReactNode. This allows us to pass any valid React content between the component’s opening and closing tags.

According to Maximillian Schwarzmuller: "Children is a special props built into react which every component receives, even if we are not setting it explicitly. Children is a reserved name. And the value of this special children prop will always be the content between the opening and closing tags of the custom component". So in this case, props.children is representing all the contents that will be available in the main tag. The logic here is that, MainNavigation is the header of the web app, what will be at the top and every other content that appears under it, will be props.children, which will be inside the main tag.

And we will be wrapping every component with the Layout. We will do this in our App.tsx. This will ensure that the MainNavigation will appear on every page we visit. And every page we visit will be regarded as props.children.

Now look here at this code:

<main style={{ width: "90rem", maxWidth: "60rem", margin: "6rem auto" }}>
        {props.children}
</main>

This code is meant for the children. Did I hear somebody say children of the corn? I guess not.

What this code means is: in the main tag, we are using style, when you see stuff like that, just know it's inline Css. And we are saying that we want the width of the children container to be 90rem, and rem is a unit of measurement, like inches. maxWidth: "60rem", this limits the container width, it shouldn't get wider than 60rem. So, if the screen is too wide, this keeps the container at a maximum of 60rem. Then margin: "6rem auto". 6rem allows for space at the top and bottom, while auto allows the browser to center the container in the middle of the screen.

ACT 3:PART FIVE:
Implementing the App Component:

So let's save our work and head back to the App.tsx file.
in The App.tsx file, we import The Layout component, like this:

import Layout from "./components/layout/Layout"

Then surround it around the p tag. It should look like this:

function App() {


  return (
    <Layout>
      <p>Hello world!</p>
    </Layout>
  )
}

export default App

Then lets save, ctrl+S. And check our broswer to see what we have.

I am not pleased with the result, there are some adjustments I have to make. There's a scroll bar at the bottom. For us to see the ul content, we have to scroll horizontally, this isn't proper. Remember we put padding: 0 10% in the main-nav-container selector. To solve this, go to the index.css in the src folder and comment or remove every line of code there and then type in this code:

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

Now we will go to the main.tsx file and uncomment the import './index.css' line of code which we commented out earlier.
then save our work, ctrl+S.

Now lets check our browser to see what we got:

As you can see, we still need to add some adjustments to our style to get it looking good.

Let's stop here for now, we will continue in Act 4, where we will add the Scss styles to make the ul's li content have space around them. And add some padding to the container. We will also be setting up our router. Stick around, you don't wouldn't want to miss it, believe me. See you in ACT 4

Outro:
About the writer: Voke Bernard is a passionate {obsessive} and ambitious M.E.R.N developer. Building of Reactjs && Expressjs applications is all he does. He is currently open to work, Feel free to reach out.

Call to Action: If you enjoyed this act, stay tuned. ACT 4 follows shortly.

Link to ACT4 here