React.js Overview

In recent years, there has been a growing demand for straightforward methods to create user interfaces using JavaScript. That's where React comes into play.

React is an open-source JavaScript library developed by Facebook that is specifically designed for building user interfaces (UI) and UI components. React is widely used in web development for creating interactive and dynamic applications.

The key concept behind React is the component-based architecture. It allows developers to break down the user interface into reusable and modular components. These components encapsulate their own logic and rendering, making it easier to manage and update different parts of the application independently.

One of the significant advantages of React is its ability to handle data changes efficiently. React implements a unidirectional data flow, where data changes in the application trigger updates to the UI. This ensures a predictable and manageable state management system, making it easier to maintain and debug complex applications.

In summary, React.js is a JavaScript library used for building reusable and efficient user interfaces. Its component-based architecture, virtual DOM, and efficient data handling make it a powerful tool for creating interactive and dynamic web applications.

In order to gain a deeper understanding of React, we will delve into the following key terminologies:

JSX

JSX ( stands for JavaScript XML ) is an extension to JavaScript which embeds template HTML in JS using XML like syntax. It allows us to directly write HTML in React (within JavaScript code).

for example:

<p className="text-xl font-medium">{`My name is ${user.name}`}</p>

Components

Components serve as the fundamental building blocks of React applications. They are like JavaScript functions that accept arbitrary input (Props) and return React elements that describe the desired content to be displayed on the screen.

It's crucial to understand that in a React app, every element visible on the screen is part of a component. Essentially, a React application consists of components nested within components. Therefore, developers do not construct pages directly in React; rather, they build components.

The most straightforward method to define a component is by writing a JavaScript function:

const MyComponent = ({ name }) => {
    return <h1>Hello, my name is {name}</h1>
}

This function is a valid React component because it accepts a single prop (which stands for properties) object argument with data and returns a React element. Such components are called function components because they are literally JavaScript functions.

State

State is an object that holds some information that may change over the lifetime of the component. Meaning it is just the current snapshot of data stored in a component's Props. The data can change over time, so techniques to manage the way that data changes become necessary to ensure the component looks the way engineers want it to, at just the right time — this is called State management.

But wait ! Didn't we said That Vactory 4 is based on Next.js? Correct.

Then why we are discussing React in this context?

Everything we can do in React we can also do in Next.js with some additional features like routing, API calls, authentication, and more. We don’t have these features in React. Instead, we have to install some external libraries and dependencies – like React Router for routing in a single page React app, for example.

But in Next.js, things are different. We don’t have to rely on external libraries to get these kinds of things done. They come built into the package when we create a Next.js app.

That is the only thing, Next.js also uses something called server-side rendering ( SSR ). And in order to understand how that works, we need to talk about client-side rendering ( CSR ) as well.