🔧 Building in Public: My Journey in React Image Layout with Flexbox and Grid - ACT 2: React Basics and Changing Default Port

BUILDINGINPUBLIC:
This is a series in which I am sharing openly how I am going about putting up a basic web application. I am sharing the my progress, challenges and insights in real-time. Instead of just showing you the final product. This series is capturing every step, as I dive into the project with React.
The story continues

Link to ACT 1 Here: https://dev.to/voke_vawkei/building-in-public-my-journey-in-react-image-layout-with-flexbox-and-grid-4j5a

EPISODE ONE: react-image-rendering

ACT 2:
ACT 2:PART ONE:

INTRO/RECAP:
In the last ACT, we setup react, by initializing a new project using vite. We went with react. We also ran npm install to install the necessary dependencies. We 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. And also got the vite react logo and counter showing in the browser.

ACT 2:PART TWO:
TOUCHING THE BASICS:

Javascript and ReactJs:
Before we delve deep, like real deep. It's best we have an idea of what Javascript and Reactjs is.
Javascript is programming language that is mainly used to create interactive effects within a web browser. It helps to make a web page dynamic. It allows developers like me to add functionality to a web page. Though I am referring to Javascript on the frontend here, it can also be used on the backend too. But that is story for another day.

React, on the other hand, which is also known as Reactjs, is a Javascript library that is used for building user interfaces for the web. It's a clientside library. And by clientside, I mean the part of the web app that a user can see and interact with.

Imagine your favourite web app; Netflix, what was used to build it was React. React is like a lego boxset that we use to build various components in Netflix. Each component is like a lego block, created with React. It also helps us to move around smoothly from one component to another. And by components, I am talking about the nav bar, search bar, movie card, even the "flipping" buttons. Same logic works with Facebook, even Instagram. So what is bringing those darling web apps of yours to life in the palm of your hands is made possible with the capabilities of Javascript.

React-router-dom:
React-router-dom is a third party package used by react library to help us move around from page to page eventhough we are in an SPA. It helps us in defining routes within our app. The react-router gives as the illusion that we are in a multipage application, but in reality, we are not.

Scss:
Scss is a preprocessor syntax for css. I will be using it here instead of css. And css stands for cascading style sheet. It's used for styling a web page, making it beautiful. Css is dope, but Scss is doper. It's best suited for larger projects and helps us write better organized code than Css. Don't worry, in another episode, I will use Css. Scss Can be described as a tool that helps us to write Css with extra features like variables. Once you write 'em the preprocessor converts the code into Css so it can be read by browsers. Scss is Css on steriods.

ACT 2:PART THREE:
Installing Dependencies and Setting the Development Environment

I will break this part into steps.

Step 1:Stopping the Dev Server:
Ok! with that being said, lets run some installations,
we got two options, we can type: ctrl + c in the terminal to close our dev server and then run the installations or we can go down and create a new terminal by clicking on the v on the right side of the + icon. These can be found at the bottom right of the editor. Clicking on the v shows command prompt, git bash, split terminal, powershell etc. But I will go with the former, by typing in the:

ctrl + C 

This stops our dev server

The response after typing ctrl + C is:

 ➜  Local:   httpx://localhost:5173/ _
 ➜  Network: use --host to expose
 ➜  press h + enter to show help
^C^CTerminate batch job (Y/N)?

{i will click Y}

Step 2:Installing react-router-dom and Scss

To install react-router-dom:

 npm install react-router-dom

To install Scss/Sass:

 npm install sass

Step 3: Making changes to the Default Port:
One more thing before I start the development server again, you see this:

Local:   http://localhost:5173/

I aint comfortable with it. That's the port our react app is going to be running on locally by default.
Traditionally,

Local:   http://localhost:3000 

is somewhat preferred, so I am going to change it. To change it, I will go into the root of this project folder and look for vite.config.ts file.

This is the content of the file:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
});

now add this to it:

server:{
    port:3000
  }

The content of the folder should now look like this:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  server:{
    port:3000
  }
})

Step 4: Starting the Dev Server:
Now let's start up the development server.

We do that by typing:

 npm run dev 

right there in the terminal.

Then we (ctrl + click) on:

http://localhost:3000/

This starts our application again in the web browser.

Up Next: ACT 2:PART FOUR: