Exploring the basics of React

Single-Page Applications on the Web

Traditional websites (Multi-Page Applications or MPAs) load a new HTML document for each page you visit. This takes alot of time, and is plain slow. For most use cases, this is extremely inefficient, and not desirable.

The solution to this is Single-Page Applications (SPAs), which are websites that load a single HTML document and then dynamically load new content into the page as you navigate around. This is much faster, and much more efficient. Once your website is served and loaded, JavaScript then takes over and dynamically updates the content of the page, without reloading the entire page. This brings alot of performance benefits, and is the main reason why SPAs are so popular.

What is React?

Did you ever take the 9th grade computer science course and wonder how such huugee websites were made when writing HTML is so tedious? Wonder how all these huge complex behaviours are implemented when just implementing a simple counter is so hard?

Well, this is exactly the solution to that. React is a (mainly) Single Page frontend framework that developed by Jordan Walke and Facebook in 2013, that encourages you to think about your application as a set of components that are connected to each other with state, your application Reacts to the state of your application.

React applications are also readable like a tree, every component is a node in the tree and the state of the application is the root node. You can follow the state of your application through the tree and see how the components are connected to each other.

How does React work?

React uses something called the Virtual DOM (Document Object Model) to render the UI. The Virtual DOM is a tree-like structure that represents the UI of your website. React then uses a process called reconciliation to figure out what changes need to be made to the Virtual DOM in order to match the UI you want to see.

The Virtual DOM is then used to update the actual DOM. This is a huge performance boost because it allows React to only update the parts of the DOM that have changed, instead of updating the entire DOM every time.

• - The Virtual DOM is created/modified.
• - The Virtual DOM is compared to the actual DOM.
• - The Virtual DOM is updated to match the actual DOM.
• - The actual DOM is updated to match the Virtual DOM.

This proccess gives huge performance boosts because it only updates the parts of the DOM that have changed, instead of updating the entire DOM every time. This also allows us to not worry about syncing and updating the state of our application with the actual DOM, React takes care of that for us.

React Components

Components are the building blocks of React applications. They are reusable pieces of code that encapsulate a piece of UI and its logic. Components can be as simple as a button or as complex as a full-blown application.

Components can be written in JSX or TSX (JSX with Typescript).

JSX/TSX

JSX, or JavaSscript XML, is a syntax extension for JavaScript that allows you to write HTML-like code in your JavaScript files. JSX looks similar to HTML, but it’s actually a JavaScript expression that describes what you want to render to the DOM.

TSX is a superset of JSX that adds type annotations and other features to make it easier, safer and more expressive to write React components.

Here’s an example of a simple React component written in JSX:

import { useState } from 'react';

export default function Counter() {
const [count, setCount] = useState(0);

return (
  <div>
    <h1>Count: {count}</h1>
    <button onClick={() => setCount(count + 1)}>Increment</button>
    <button onClick={() => setCount(count - 1)}>Decrement</button>
  </div>
);
}

In this example, we import the React module and use the useState hook to create a state variable called count. We then render a div element with a h1 element inside it, which displays the current value of count. We also render two button elements, one for incrementing the count and one for decrementing the count.

Speaking of useState, that is a hook. Hooks are a special kind of function that let you “hook into” React state and lifecycle features from function components. There are other hooks as well, but we’ll get to them later.

Creating a React Application

First off, you will need a few tools installed on your computer, namely:

• - And IDE, I recommend Visual Studio Code
• - An environment to run your application, for JavaScript on the server, it’s usually best to use Node.js
• - A package manager, the best option currently would be pnpm , it saves on storage space alot, and is faster to install packages.
  

Now that you have all the tools installed, you can create a new React application by running the following command in the terminal of your choice:

pnpm create vite@latest

This should then ask you for a bunch of information about your project, such as the name, the framework, and the type of project you want to create. For this, you can choose whatever name you want for your project, and then choose React as the the framework of choice, and finally choose Typescript + SWC as the variant. Typescript will give us type safety, and SWC will allow us to have faster build times, smaller bundle sizes, and faster development reload times.

◇  Project name:
│  my-project
│
◆  Select a framework:
│  ○ Vanilla
│  ○ Vue
│  ● React
│  ○ Preact
│  ○ Lit
│  ○ Svelte
│  ○ Solid
│  ○ Qwik
│  ○ Angular
│  ○ Others
│
◆  Select a variant:
│  ○ TypeScript
│  ● TypeScript + SWC
│  ○ JavaScript
│  ○ JavaScript + SWC
│  ○ React Router v7 ↗
│  ○ TanStack Router ↗
└

After this run:

pnpm install && pnpm dev

This will automatically download all the necessary dependencies like React, and then start your development server. You will now see a success message and a link to your application in the terminal:

  VITE v6.3.3  ready in 154 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

You can now navigate to your app at http://localhost:5173/ and start working on it!.

Default Template

Now that we have this template, you can see our index.html:

1
<!DOCTYPE html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
    <title>Vite + React + TS</title>
8
  </head>
9
  <body>
10
    <div id="root"></div>
11
    <script type="module" src="/src/main.tsx"></script>
12
  </body>
13
</html>

This is the “single page” we discussed, where our React app will render. Notice the id="root" on the <div>—we’ll come back to that in a moment. The only other thing to note here is the <script> tag that points to /src/main.tsx.

Entry Point:

Open /src/main.tsx and you’ll find:

1
import { StrictMode } from "react";
2
import { createRoot } from "react-dom/client";
3
import "./index.css";
4
import App from "./App.tsx";
5

6
createRoot(document.getElementById("root")!).render(
7
  <StrictMode>
8
    <App />
9
  </StrictMode>
10
);

Line-by-Line Explanation

1. Importing StrictMode

   1
   import { StrictMode } from "react";

   When you use <StrictMode>, React applies additional checks and warnings during development (for example, mounting and unmounting components twice to surface unsafe lifecycle methods).

2. Importing createRoot

   2
   import { createRoot } from "react-dom/client";

   This tells React where to render your app—namely, into the DOM element with the root ID.

3. Importing Styles and the App Component

   3
   import "./index.css";
   4
   import App from "./App.tsx";

   • index.css contains your global styles.
   • App is your top-level React component.

4. Creating and Hydrating the Root

   6
   createRoot(document.getElementById("root")!).render(
   7
     <StrictMode>
   8
       <App />
   9
     </StrictMode>
   10
   );

   • document.getElementById('root')! fetches the <div id="root"> from index.html.
   • createRoot(...) initializes a React root in that container.
   • .render(...) tells React exactly what to render—in this case, your <App /> wrapped in <StrictMode>.

<StrictMode>

StrictMode is a development-only feature that helps you:

• - Detect unsafe lifecycle methods.
• - Warn about deprecated APIs.
• - Identify unexpected side effects.
• - Highlight potential issues in asynchronous rendering.

We’ll revisit these details later when we cover debugging and performance optimizations.

Sandbox

Now we can play around with this template and see how our changes affect the UI. Try making a few changes to the default page!

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

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <div>
        <a href="https://vite.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

export default App