Building in Public: React image Layout with Flexbox and Grid ACT 1

BUILDINGINPUBLIC:
This is a series in which I will be sharing openly how I am going about putting up this basic application. I will be sharing the work progress, challenges and insights in real-time. Instead of just showing you the final product. This series will capture every step as I dive into the project with React, I hope you enjoy it. Let's get the party started.

TITLE: Building in Public: My Addiction to Building with React [THE ABRIDGED VERSION. DRAMA NOT INCLUDED]

EPISODE ONE: react-image-rendering

Word of Note: This is a Blog post that will be updated frequently. This Episode will be broken into ACTS and PARTS. So please guys, kindly check for regular updates.😁😁😁

EPISODE SYNOPSIS: In this episode, I will be showing you how to setup an image gallery using Css Flex-box and Grid, from the ground up. Take a seat, get comfy, let me show you how it goes:

ACT 1:PART ONE:
INTRO/SETUP:

This is ACT 1, the setup. Walk with me

Setting Up the Environment

Visual studio code is the text editor I will be using. I will click on the visual studio code icon in my desktop screen. When it loads up, I will go to View in the top part in between Selection and Go. Clicking on it reveals a drop down with some items. Among the items is terminal, click on terminal, this opens up the terminal below. Then in the terminal below I will type the following:

ACT 1:PART TWO:
Initializing the Project with Vite

   # Navigate to the visual_testing folder
   cd visual_testing 

   # Navigate to building-in-public folder
  cd building-in-public  

   # Check the contents in the building-in-public directory. (it's blank)
  dir 

  # To create a new folder called react-image-rendering-slack
  mkdir react-image-rendering-slack 


  # Move into the react-image-rendering-slack folder
  cd react-image-rendering-slack

In other to install vite inside the react-image-rendering-slack folder I will type:

npm create vite@latest .

The response I get is:

    Need to install the following packages:
    create-vite@5.5.5
    Ok to proceed? (y) y

{I will click y}

This takes me to the next section to select a framework

Select a framework: » - Use arrow-keys. Return to submit.
{I will click React}

Select a variant: » - Use arrow-keys. Return to submit.
{I will click TypeScript}:
{Yes, I will be using Typescript here.}

Finishing the setup

The response from clicking Typescript is:

Scaffolding project in C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\react-image-rendering-slack...
Done. Now run:
npm install
npm run dev

I then run the following to start the project locally:

 npm install 

npm install is used to install dependencies

npm run dev

npm run dev is used to start the development server.

Vite confirms that the server is running by giving this response:

   VITE v5.4.10  ready in 488 ms
  ➜  Local:   http://localhost:5173/ 
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

To view the app, I will Ctrl + Click on httx://localhost:5173/ to open it in the browser. {changed it to httx from http}

So now we have successfully started this badboy up. You can see what's on the screen when you open the browser, a vite logo, react logo and a counter. Checkout the picture below, that's what we see.

ACT 1:PART THREE:

QUICKIE:

Just a quick explanation here, I setup react by initializing a new project using vite. I also ran npm install to install the necessary dependencies. Also got some contents in our react-image-rendering-slack folder, contents like public folder, src folder, .gitignore, index.html, package.json, node_module folder among others due to the installation. Also got the vite react logo and counter showing in the browser.

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: ACT 2 follows shortly. And in there, we are going to be explaining what Javascript and Reactjs is. Will also be introducing you to the react-router. Stay tuned.

Link to ACT 2 Here:

Drama version ACT 1 click here