Lesson 1: JSX Syntax & The Virtual DOM

1. What is React and JSX?

React is a declarative, component-based JavaScript library created by Meta for building dynamic, high-performance user interfaces.

JSX (JavaScript XML): A syntax extension that allows developers to write HTML-like markup directly inside JavaScript files.

The Virtual DOM: A lightweight in-memory snapshot of the actual DOM. When state changes, React computes the minimal diff and updates only the modified real DOM nodes.

Babel Compilation: Transpiles JSX like <h1>Hello</h1> into React.createElement('h1', null, 'Hello').

⊞HTML5 Web Code (index.html)

<!DOCTYPE html>

<head>

<title>React JSX Preview</title>

</head>

<h2>React Component Output</h2>

<h3 style="color:#04AA6D; margin:0 0 10px 0;">⚛️ Welcome to React.js</h3>

<p style="margin:0; color:#ddd;">Components encapsulate structure, style, and state into reusable building blocks.</p>

</div>

</body>

</html>

2. Core JSX Rules

Single Root Element: Every component must return a single enclosing parent element or Fragment (<> ... </>).

Close All Tags: Self-closing elements must end with a slash (<img />, <input />, <br />).

CamelCase Attributes: Use onClick, className, htmlFor, tabIndex.

Embedding JS Expressions: Wrap dynamic variables and expressions in curly braces {user.name}.

1. What is React and JSX?

2. Core JSX Rules

Interactive Knowledge Check