React

How React Works: Understanding Components, React Elements and DOM.

In this blog, we'll break down React's basic building blocks, like components and JSX, in plain language. Whether you're a React adept or an aspiring developer, join us on this journey to unlock the mysteries behind one of the web's most powerful libraries.

I will discuss the inner workings of "React" and understand how React reacts to a state change inside a component instance and how it results in the DOM tree. I wrote this blog as readers are familiar with React (or) at least they can understand the syntax that are written below.

Topics I'm going to discuss in this blog:

Components
Component Instance
React Elements
Babel
Component tree

Components:

Components in React are reusable, self-contained building blocks that encapsulate UI elements and logic, making it easy to compose complex user interfaces.
It is the description of UI.
A component is a function that returns React elements(element tree), written in JSX.
It is actually a "Blueprint" or "Template" of a particular UI or Application.

Component Instances:

Component instances in React are created when a component is rendered.
When we use the component , React actually calls the component internally.
We can create as many as of components from a single component by calling it multiple times.
Each instance maintains its own state and properties, allowing for dynamic and reusable UI elements
It has a lifecycle (Mounts, Renders, Unmounts).

React Elements:

A React element is a lightweight, immutable object that represents a virtual representation of a component.
A React element is the result of these component instances function calls.
They are plain JavaScript objects with a type and props, and they form a tree-like structure that corresponds to the structure of the UI which are called as React Element Tree (or) virtual DOM.
Unlike browser DOM elements, React elements are cheap to create and don't directly manipulate the DOM
JSX is converted into React.createElement() function calls by a compiler called BABEL.

BABEL:

BABEL: Babel is a JavaScript compiler that allows developers to write code using the latest ECMAScript syntax (including features from future JavaScript versions) without worrying about browser compatibility issues.
One of the key features of Babel is its support for JSX, which is a syntax extension for JavaScript often used with React. JSX allows developers to write HTML-like code directly within JavaScript, making it easier to describe UI components in React applications.
When JSX code is encountered, Babel transforms it into standard JavaScript code. For example, JSX elements like trans-piles <div> or <h1>are transformed into React.createElement() function calls, which create React elements.

    //Lets consider an example
    const Header = () => {
      return (
        <header>
          <h1>Welcome to My React Blog</h1>
        </header>
      );
    };

    /*The above jsx code is converted into a react element by babel 
    as follows,*/
    const Header = () => {
      return React.createElement('header', null, 
        React.createElement('h1', null, 'Welcome to My React Blog')
      );
    };

DOM Elements:

Actual Visual Representation of the result of the component.
React elements are converted into DOM elements through a process called Reconciliation, which is also known as the virtual DOM diffing algorithm. This process is handled by Reacts rendering engine (will discuss more about this later).

Let's take an example code here to demonstrate how react converts the JSX syntax java script code and paints the UI in the browser.

import React, { useState } from 'react';

// Component 1: Header
const Header = () => {
  return (
    <header>
      <h1>Welcome to My React Blog</h1>
    </header>
  );
};

// Component 2: BlogPost
const BlogPost = () => {
  return (
    <article>
      <h2>Understanding React's Inner Workings</h2>
      <p>
        In this blog post, we'll explore 
        how React works behind the scenes...
      </p>
    </article>
  );
};

// Component 3: Footer
const Footer = () => {
  return (
    <footer>
      <p>
        &copy; {new Date().getFullYear()} My React Blog. 
        All rights reserved.</p>
    </footer>
  );
};

// Component 4: ToggleButton
const ToggleButton = ({ onClick, isShown }) => {
  return (
    <button onClick={onClick}>
      {isShown ? 'Hide Blog Post' : 'Show Blog Post'}
    </button>
  );
};
// Main App Component
const App = () => {
  const [showBlogPost, setShowBlogPost] = useState(true);

  const toggleBlogPost = () => {
    setShowBlogPost(!showBlogPost);
  };

  return (
    <div>
      <Header />
      {showBlogPost && <BlogPost />}
      <Footer />
      <ToggleButton onClick={toggleBlogPost} isShown={showBlogPost} />
    </div>
  );
};

export default App;

This is an initial component tree that will be rendered and inserted into the DOM. We are going to see how this component tree is converted into a React element tree (virtual DOM) and a DOM tree in the next part.

Conclusion: Getting to Know React Better

We've covered the basics of how React operates behind the scenes. In the next part, we'll zoom in on two important phases: the render phase and the commit phase. These phases are like gears in a machine, making React efficient and powerful for building modern websites. Stick around to learn more about how React brings web pages to life!

Dhana Sai Sundar's Blog