Building in Public: React Image Layout with Flexbox and Grid - ACT 2: React Basics,Port Setup and Hello World

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

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

What then is React-router-dom?
React-router-dom is a third party package used by the 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.

And 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 like shape on the right side of the + icon. These can be found at the bottom right of the editor. Clicking on the v like shape 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.

ACT 2:PART FOUR:
The App.tsx:

Now let's clean up the screen because what's there right now is the react and vite logo. And the counter. In order to do that, we go to the App.tsx file. It's located in the src folder. And the src folder is in the root of the project directory.

Understanding App.tsx:
Every react app basically has this file, App.tsx or js. It is a file that is extremely important. It's like the face of your enter application. A hub that houses all components of your react application, directly or indirectly. The components and contents in App.tsx are ultimately what you see rendered in the web browser.

The rendering starts from the main.tsx file, where the App.tsx is referenced and rendered with the help of ReactDOM. The index.html file, which is the first file to be executed when the app loads, setsup a structure that points to main.tsx file with the use of an id.
If you go to the index.html file which looks like this:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React + TS</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

You would see that it has a div with an id of root. That div is what is being selected or referenced in the main.tsx file.

And here is the content of the main.tsx file:

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

In main.tsx, this root div is selected and referenced so that App.tsx can be displayed within it. This setup is central to how single-page applications (SPAs) work in React: only one HTML file (index.html) is initially loaded in the browser, and the app dynamically renders its content on this single page.

TypeScript (.tsx) File format:
You see fellas! while we work in coding environments, we have to attach an extention to our files so as to tell the editor, in ourcase, visual studio code editor what kind of code the file contains. Using the extention helps our editor to understand how to process the file correctly. So here we are using .tsx, we are telling the editor that the main codes that are going to be in this file are typescript codes. Had it been I setup this project to use Javascript, instead of .tsx, we would be using either .js or jsx to inform the editor that the file contains Javascript.

ACT 2:PART FIVE:
Screen Cleanup and HELLO WORLD!:

Alright, let's now cleanup our App.tsx. We will remove these:

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

they gotta go.
Then this:

const [count, setCount] = useState(0)

Then everything in the return. Now I gotta chip this in, the structure you all are seeing in the return is called jsx or in full; Javascript XML, it's similar to HTML. Remove everything except the fragment you see atop. Fragments lets us group multiple elements. More on that later. You should now see something like this:

function App() {

  return (
    <>

    </>
  )
}

export default App

This will render a blank screen in the web browser. Now let's type some stuff there, and see what happens in the browser. In the fragment, type this:

Hello world!

. like this:

<>
      <p>Hello world!</p>
</>

Then hit ctrl S. Then check the browser, if we check the browser, we can see that what we typed is showing in the browser. However, it aint showing where we want it to show. We want it showing at the top. So we go to our main.tsx file.

The problem is that this import './index.css' in our main.tsx file is interfering with our App. So we remove it or comment it out. I will do the latter for now by typing forward slash twice{//} before it. See:

// import './index.css'

That's how you comment or mute out Javascript or Typescript related codes.
Then hit ctrl S, and check the browser, you will see that the Hello world is now at the top.

Wheeeeew!!! Let's stop here for now, we will continue in Act 3, where we gonna be setting up our first react component. Stick around, it's gonna be BIG like B.I.G. See you in ACT 3

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 3 follows shortly.