Building in Public: My Journey in React image Layout with Flexbox and Grid

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:

    [email protected]

    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.