> For the complete documentation index, see [llms.txt](https://reactjs.koida.tech/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://reactjs.koida.tech/react-fundamentals/lesson-7-jsx-and-how-react-treats-the-dom-and-jsx-compilation-by-babeljs-overview.md).

# Lesson 7 - JSX and How React Treats the DOM & JSX Compilation(by Babeljs) - Overview

## JSX -JavaScript (XML)

<figure><img src="/files/Rc5Q3Ut1M9XBkw1ubPcg" alt=""><figcaption></figcaption></figure>

**What is JSX?**

* **JSX stands for JavaScript XML.** It's a syntax extension to JavaScript that allows you to write HTML-like code within your JavaScript files.
* **Enhanced Readability:** JSX makes your component structure more visually intuitive and easier to read, particularly for developers familiar with HTML.
* **Simplified DOM Manipulation:** JSX abstracts away the complexities of directly manipulating the DOM (Document Object Model), making it easier to build and update UI elements.

**JSX vs. Compiled JavaScript**

The image illustrates the transformation process:

1. **JSX Code (Human-Readable):**
   * You write JSX code using HTML-like syntax within your JavaScript files.
   * For example: `const element = <h1 className="greeting">Hello, world!</h1>;`
2. **JSX Compiler (Babel):**
   * Before the browser can understand and execute your code, the JSX code needs to be converted into plain JavaScript.
   * Babel is a popular JavaScript compiler that handles this transformation.
3. **Compiled JavaScript (Browser-Understood):**
   * Babel converts the JSX code into calls to `React.createElement()`.
   * This function creates a JavaScript object representing the HTML element.

## How React Treats the DOM

<figure><img src="/files/vYxUxu0Swn5Dei6itRUB" alt=""><figcaption></figcaption></figure>

**React's Approach to the DOM**

The image illustrates the difference between traditional DOM manipulation and how React handles it.

**Traditional DOM Manipulation:**

* **Direct Manipulation:** Developers directly interact with the DOM using JavaScript methods like `getElementById()`, `setAttribute()`, `createElement()`, `appendChild()`, etc.
* **Performance Overhead:** Each change to the DOM triggers a costly process of re-rendering and updating the entire page or the affected parts. This can lead to performance issues, especially in complex applications.

**React's Virtual DOM:**

* **Virtual Representation:** React creates a virtual representation of the actual DOM in memory. This virtual DOM is an efficient JavaScript object that mirrors the structure of the actual DOM.
* **Efficient Updates:** When data changes in a React component, React updates the virtual DOM. Then, React compares the virtual DOM with the actual DOM and identifies only the specific changes that need to be made.
* **Minimal DOM Manipulation:** React only updates the actual DOM with the minimal set of changes required, which significantly improves performance.

**In essence, React's virtual DOM acts as an intermediary between your component code and the actual DOM.** This approach allows React to optimize the rendering process and make updates efficiently, resulting in a faster and more responsive user experience.

**Key Points Illustrated in the Image:**

* The image highlights the traditional DOM manipulation methods with comments explaining their purpose.
* It contrasts this with the React approach, emphasizing the use of a virtual DOM for efficient updates.

<figure><img src="/files/RGE5xSEnIqAQKTm6GOPs" alt=""><figcaption></figcaption></figure>

### Babeljs - JSX Compiled to JavaScript

### 1.  JSX Compiler Overview

Babaljs site : <https://babeljs.io/>&#x20;

Click "Try it out" menu&#x20;

<figure><img src="/files/2GAWBRloangiSt8Ruowb" alt=""><figcaption></figcaption></figure>

Example

```jsx
// Put in next-gen JavaScript (JSX)
function UserProfile({ name, email, bio }) {
  return (
    <div className="user-profile">
      <h1>{name}</h1>
      <p>Email: {email}</p>
      <p>Bio: {bio}</p>
    </div>
  );
}
```

```javascript
// Get browser-compatible JavaScript out (Chrome)
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function UserProfile({
  name,
  email,
  bio
}) {
  return /*#__PURE__*/_jsxs("div", {
    className: "user-profile",
    children: [/*#__PURE__*/_jsx("h1", {
      children: name
    }), /*#__PURE__*/_jsxs("p", {
      children: ["Email: ", email]
    }), /*#__PURE__*/_jsxs("p", {
      children: ["Bio: ", bio]
    })]
  });
}
```

###