react fundamentals

Hello, world! Learning React will always a good option as it is one of the popular JavaScript libraries, having a good foundational knowledge of it is very important. In this blog, and a series of other blogs I’ll be writing, I will focus more on explaining ReactJS in simple terms as I am learning it. Think of me as your BFF, taking you through a course I have studied ahead of time. This provides room for you to learn and also for me to understand the concept even more.

What is React?

React is a library, not a framework. It uses the single-page application (SPA) model to display the user interface on the DOM. Through client-side rendering, a request is sent once, and the HTML and JavaScript files are bundled and delivered to the browser.

That was a bit too much to take in. Let’s break it down.

Now, think of a regular website as your favorite restaurant. If you make an order for a burger, you go to the counter, they bring it to you, and you sit down to eat. Every time you want to get something else—like fries or a drink—you need to go to the counter to place a new order. This is how regular websites (called multi-page applications, or MPAs) work. For each request you make, the browser sends it to the server, retrieves the data, and it renders on the browser.

Now, what if, when you made your first request at the counter, they gave you a tray with everything they had on their menu for the day? Each time you want to eat something different, you only need to take it from the tray. Much simpler, right?

This is what React does as a single-page application. It loads everything it needs upfront, and when you interact with the site, it updates what’s displayed without reloading the entire page.

React utilizes a Virtual DOM, which is an in-memory representation of the real DOM, to efficiently update and manage changes. When a component's state or props change, the Virtual DOM calculates the minimal updates needed and applies them to the actual DOM.

DOM vs Virtual DOM

The Document Object Model (DOM) is the actual representation of your webpage in the browser while Virtual DOM, on the other hand, is an in-memory representation of the DOM used by React to efficiently manage updates to the user interface. When a user makes a change to the UI, React first updates the Virtual DOM and compares it with the previous version (a process called "diffing").

React calculates the minimal changes needed and applies them to the actual DOM, ensuring optimal performance. This approach provides a faster and smoother user experience and allows developers to focus on what the UI should look like, rather than how it is updated—one of the key benefits of declarative programming.

Components

React is made up of components. Components are the building blocks in React, it could be the littlest thing as a button:

const Button = () => {
    return (
        <button> Click Me! </button>
    )
}

or as large as a whole page. Components make the code reusable, and they can be called anywhere in the application, eliminating excessive repetition in your code. You only need to call the component wherever you want it.

const Home = () => {
    return (
        <>
            <h2> Hello world! </h2>
            <Button /> // This is how to call the custom Button component
        </>
    )
}

How is JSX syntax different from the good old HTML?

Name Convention

All component names must be capitalized. CamelCase naming syntax is used for non-single-word names, e.g., Home, SearchBar, etc.

Shared parent

In JSX, all components must be wrapped with a shared parent. The good old <div></div> tags work, and React fragments can also be used, which are represented as a pair of empty tags <> </>. Using React fragments has an advantage over <div> tags because they do not add additional nodes to the DOM.

const SearchBar = () => {
    return (
        <div>
            Every other tags goes here
        </div>
    )
}

const SearchBar = () => {
    return (
        <>
            // Every other tags goes here
        </>
    )
}

Self closing tags

There isn’t much difference between self-closing tags in HTML and JSX. However, all self-closing tags in JSX must be closed. For example, <br> will throw an error in JSX. The correct syntax is <br />

Class Attribute

The word class is reserved in React, so instead of class, JSX uses className for assigning CSS classes.

<div className="searchbar">Hello World!</div>

Inline Style

In JSX, inline styles are defined using double braces ({{}}). The outer braces indicate dynamic values, and the inner braces define the style object. Additionally, property names that use hyphens in CSS (e.g., background-color) are written in camelCase in JSX (e.g., backgroundColor).

<div style={{color: 'red', backgroundColor: 'black'}}>Hello World!</div>

Key Points:

All React components start with a capital letter.
All self-closing tags must be closed.
The className attribute is used instead of class.
The style attribute uses double curly braces.

We have come to the end of today’s blog. I really hope you learned a little about ReactJS. In the next blog, we will take a deeper look at writing components, exporting, and importing components. Let’s learn React together. See you in the next one!

Introduction to ReactJS

How is JSX syntax different from the good old HTML?