Day 1 of MERN-Stack Journey: Unveiling React.js Basics for Beginners

After completing vanilla JavaScript with Node.js, we are now moving into exploring other parts of the MERN stack from a beginner’s level. In this phase, we started with React.js. This session will span over 90+ days. On day 1, I explored the simple basics of React.js and understood its abilities, features, and advantages.

What is React?

React is a highly popular JavaScript UI library, primarily used for building single-page web applications (not websites). It has some unique abilities which make it extremely popular for web application development. This library was designed by Facebook’s meta team in 2012 and is maintained by Facebook as well as a community of individual developers and companies. React has various features that contribute to its popularity as a library for web application development and a loving library for developers. These features include declarative programming, a component-based architecture, JSX support, the ability to create Virtual DOM, efficient management of virtual DOM, and many more.

What is Declarative Programming?

React promotes a declarative programming style. Declarative programming is a programming model where developers focus on describing the desired outcome or end result, rather than explicitly detailing the steps needed to achieve that outcome. In essence, instead of instructing the computer on how to perform a task step by step, developers declare what they want to accomplish, and the underlying framework or language takes care of the implementation details.

In the context of React.js, React components are written using a declarative syntax, where developers describe what the UI should look like based on the current state of the application. React then takes these component descriptions and efficiently updates the actual UI to reflect the desired state.

What is Component-Based Approach?

React follow component-based architecture or approach for web application development, the Component-Based Approach is a software development paradigm where larger systems are built by combining and reusing smaller, self-contained modules known as components. Each component encapsulates a specific piece of functionality, such as user interface elements, behavior, or data manipulation, and can be independently developed, tested, and maintained.

In the context of React.js, React utilizes components as the building blocks for constructing user interfaces. React allows us to create reusable components, which are like standalone Lego pieces that use to design web apps. These components are individual pieces of a final interface that, when assembled, form the entire user interface of the application.

What is JSX?

React uses JSX to define the layout and appearance of components. JSX, which stands for JavaScript XML, is a syntax extension for JavaScript that allows developers to write HTML-like code within JavaScript. It provides a way to describe the structure of UI components in a more familiar and expressive manner. JSX provides a more expressive syntax for defining UI components compared to traditional JavaScript or string concatenation. With JSX, developers can write HTML-like code directly within their JavaScript files, making it easier to visualize and understand the structure of the UI. JSX allows developers to embed JavaScript expressions within curly braces {} directly within the HTML-like markup. After that JSX can be statically analyzed by tools like Babel which is open-source JavaScript transcompiler that converts ECMAScript 2015+ (ES6+) code into backwards-compatible JavaScript code. And babel convert JSX into browser friendly language for web application.

What is the Virtual DOM?

React.js uses virtual DOM for manipulate or create changes on the document, The Virtual DOM is a concept to improve the efficiency of updating the user interface in web applications. It serves as an abstraction layer that sits between the actual Document Object Model (DOM) and the React components. Before virtual DOM, whenever a component’s state or props changed in an application, the entire document or application had to be reloaded to reflect that change visually. This way of doing things was difficult and made the overall experience worse for users. To address this issue, React.js employs the virtual DOM.

In the concept of the virtual DOM, React.js creates a replica of the DOM once a document is loaded. Subsequently, when a node or component within that document undergoes a change, the alteration is first applied to the virtual DOM. Only afterward is the actual DOM updated. This approach ensures that React-based web applications can effect changes without requiring a full reload of the application, resulting in a smoother user experience. This concept represents a powerful feature of React, contributing significantly to its popularity since 2015.

What’s a single page app (SPA), and why aren’t React Apps SEO-friendly?

A Single Page Application (SPA) is a type of web application where each interaction with the application typically involves loading a new page from the server, SPAs dynamically update the current page as users interact with it, without the need for full page reloads. However, one of the challenges of SPAs, particularly those built with client-side rendering frameworks like React, is that they may not be inherently SEO-friendly. This is because search engine crawlers, such as those used by Google, Bing, and others, typically rely on parsing HTML content to index web pages and understand their content. Since SPAs often generate content dynamically using JavaScript, the initial HTML response sent from the server may contain minimal content or placeholder data, making it difficult for search engine crawlers to index and rank the page’s content accurately.