Understanding the Key Differences Between HTML and JSX

Introduction: The Illusion of HTML in JSX

When you first see JSX, it looks like HTML. But here’s the trap: JSX is not HTML.

Behind the scenes, JSX is JavaScript.

// JSX (Looks like HTML)
const element = <h1>Hello, world!</h1>;

But in reality, it’s transformed into:

// Actual JavaScript
const element = React.createElement('h1', null, 'Hello, world!');

How JSX Works Behind the Scenes

JSX is a syntax extension for JavaScript, meaning your browser doesn’t understand it directly. Tools like transpilers (e.g., Babel) and bundlers (e.g., Webpack, Vite) handle converting JSX into plain JavaScript before it runs in your browser.

The React.createElement() or JSX syntax (e.g., <div>Hello</div>) creates a virtual DOM node. This is a lightweight JavaScript object that represents the structure of the UI. React uses this virtual DOM to efficiently determine what has changed and update only the necessary parts of the actual DOM.

What is the Virtual DOM?

The virtual DOM is a lightweight JavaScript representation of the actual DOM. Instead of making changes directly to the browser's DOM, React first updates the virtual DOM. This approach makes updates faster and more efficient because JavaScript operations are typically much faster than manipulating the real DOM.

What is Reconciliation?

Reconciliation is the process React uses to determine how to efficiently update the actual DOM to match the changes made in the virtual DOM. Here's how it works:

1. Initial Render: When you render your component for the first time, React creates a virtual DOM tree that mirrors the structure of the actual DOM.

2. State/Prop Changes: When the state or props of a component change, React creates a new virtual DOM tree representing the updated UI.

3. Diffing Algorithm: React compares the new virtual DOM tree with the previous one to identify the specific changes (this process is called "diffing").

4. DOM Updates: After identifying the changes, React updates only the parts of the actual DOM that need to be changed, rather than re-rendering the entire UI.

JSX Rules: What Makes it Different from HTML?

1. Self-Closing Tags:

   • JSX requires self-closing tags for elements without children.

       <img src="logo.png" alt="Logo" /> // Correct
       <img src="logo.png" alt="Logo"></img> // Also correct but most of the time used with child elements
     

2. CamelCase Attributes:

   • JSX uses camelCase for attributes instead of HTML-style lowercase.

       <button onClick={handleClick}>Click Me</button>
     

3. Embedding JavaScript with {}:

   • Use curly braces to include JavaScript expressions.

       const name = "Saurav";
       <h1>Hello, {name}!</h1>;
     

4. Single Parent Element:

   • Wrap multiple elements in a single parent.

       <div>
           <h1>Welcome</h1>
           <p>This is JSX.</p>
       </div>
     

Functions Returning JSX Are Components

In React, any function returning JSX is considered a component. Components allow you to split the UI into reusable pieces.

function Greeting({ name }) {
    return <h1>Hello, {name}!</h1>;
}

You can reuse this component like this:

<Greeting name="Saurav" /> 
// Renders as: <h1>Hello, Saurav!</h1>

React.createElement: The Real Hero

React.createElement(
    type,       // HTML tag or component (e.g., 'div', 'h1', Greeting)
    props,      // Attributes (e.g., { className: 'title' })
    ...children // Nested elements or content
);

When you think about it in terms of HTML, props are similar to custom attributes like data-item. In React, however, props can pass any type of data (strings, numbers, arrays, objects, or even functions), not just strings.

<div data-item="123" class="box">Hello</div>

Here, the data-item is a custom attribute used to store extra data about the element (123 in this case).

Now in React, you achieve a similar effect using props:

function Box(props) {
  return (
    <div data-item={props.dataItem} className="box">
      {props.children}
    </div>
  );
}

function App() {
  return (
    <Box dataItem="123">Hello</Box>
  );
}

Anything between the opening and closing <Box> tags (Hello) becomes props.children

Props are:

1. Read-only: A child component cannot modify its props directly.

2. Unidirectional: Data flows from parent to child (one-way data binding).

Have more questions about JSX or React? Drop a comment below, or

Comment if I have committed any mistake. Let's connect on my socials. I am always open for new opportunities , if I am free :P

Linkedin| Twitter | ShowwCase