React basics

1. JSX (JavaScript XML)

JSX is a syntax extension for JavaScript that allows you to write HTML-like code inside JavaScript. It makes it easier to structure UI components.

Example:

const element = <h1>Hello, World!</h1>;

Why JSX?

• It simplifies creating React elements and components.
• JSX gets converted to regular JavaScript using tools like Babel.

2. Babel

Babel is a JavaScript compiler that transforms modern JavaScript (including JSX) into browser-compatible code.

What Babel Does:

• Converts JSX into JavaScript.
• Transforms ES6+ syntax to ES5 for older browser support.

Example:

const element = <h1>Hello</h1>;

Gets converted to:

const element = React.createElement("h1", null, "Hello");

3. Virtual DOM

The Virtual DOM is a lightweight copy of the real DOM. React uses this to optimize updates to the UI.

How it Works:

• React keeps a Virtual DOM in memory.
• When the state changes, React compares the Virtual DOM with the real DOM (using a process called “reconciliation”).
• It updates only the parts of the real DOM that changed.

4. React DOM

React DOM is the library that connects React components to the actual DOM. It renders React elements into the browser.

import ReactDOM from "react-dom";

ReactDOM.render(<App />, document.getElementById("root"));

The render method inserts the React component (<App />) into the specified DOM element (e.g., #root).