What is JSX

JSX: JavaScript XML

JSX (JavaScript XML) is a syntax extension to JavaScript. It allows you to write HTML-like code within your JavaScript files. While it looks like HTML, it's ultimately transformed into regular JavaScript function calls.

Why use JSX?

• Readability: JSX makes your UI code more readable and easier to understand, especially for developers familiar with HTML. It visually represents the structure of your components.
• Maintainability: The clear structure improves maintainability. Changes to the UI are often easier to spot and implement.
• Familiarity: Leverages existing HTML knowledge.
• Type Safety (with TypeScript): JSX works very well with TypeScript, providing static type checking for your UI elements.

Key Features & Rules:

• HTML-like Syntax: You can use HTML tags, attributes, and expressions within your JavaScript code.
• Expressions: You can embed JavaScript expressions within JSX using curly braces {}. This is how you dynamically render content.
• Attributes:
  • Use camelCase for HTML attributes (e.g., className instead of class, onClick instead of onclick).
  • Boolean attributes are written as just the attribute name (e.g., disabled instead of disabled="true").
• Self-Closing Tags: Tags that don't have children must be self-closing (e.g., <img src="image.jpg" />).
• One Top-Level Element: JSX expressions must have a single top-level element. If you need to return multiple elements, wrap them in a parent element like a <div>, <section>, or a React Fragment (<>...</>).
• Comments: Use JavaScript comments (// or /* ... */) within JSX. HTML-style comments (<!-- ... -->) will be treated as text and rendered.

Example:

const element = (
  <h1>
    Hello, {name}!
  </h1>
);

In this example:

• <h1> is an HTML tag.
• {name} is a JavaScript expression that will be replaced with the value of the name variable.

JSX Compilation (Babel):

Browsers don't understand JSX directly. Tools like Babel are used to transpile JSX into standard JavaScript code.

The above JSX example might be compiled into something like this:

const element = React.createElement(
  'h1',
  null,
  'Hello, ',
  name,
  '!'
);

React.createElement() is the core function that creates React elements. JSX is simply a more convenient syntax for using React.createElement().

React Fragments:

When you need to return multiple elements without adding an extra node to the DOM, use React Fragments:

const element = (
  <>
    <h1>Title</h1>
    <p>Paragraph</p>
  </>
);

This renders the <h1> and <p> elements without wrapping them in an extra <div>. You can also use <React.Fragment> instead of <>...</>.

Rendering with JSX:

JSX is used to describe what you want to see on the screen. React takes this description and efficiently updates the DOM to match. You typically render JSX using ReactDOM.render() (or in newer versions, createRoot):

import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);

This code renders the element (defined above) into the DOM element with the ID "root".

In summary: JSX is a powerful tool that makes building React UIs more intuitive and efficient. It's not HTML, but it allows you to write code that looks like HTML, which is then transformed into JavaScript that React can understand and use to update the DOM.