React - JSX vs HTML

Differences between JSX and HTML

JSX and HTML share similar syntax, but there are key differences between them. Understanding these differences is essential for working effectively with React. This tutorial highlights the main distinctions between JSX and HTML.

Embedding Expressions

One of the main differences between JSX and HTML is that JSX allows you to embed JavaScript expressions within curly braces {}.

// JSX example
const name = 'John';
const element = <h1>Hello, {name}!</h1>;
ReactDOM.render(element, document.getElementById('root'));

In HTML, you cannot embed JavaScript expressions in this manner.

Attribute Naming

In JSX, attribute names are written in camelCase, whereas HTML uses lowercase attribute names.

// JSX example
const element = <div className="container">Hello</div>;
ReactDOM.render(element, document.getElementById('root'));

In HTML, the equivalent would be:

<div class="swf-lsn-container">Hello</div>;

JSX Represents Objects

JSX compiles down to React.createElement() calls, which return plain JavaScript objects called "React elements". HTML, on the other hand, directly represents elements in the DOM.

// JSX example
const element = <h1 className="greeting">Hello, world!</h1>;

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

HTML Entities

In JSX, you can use JavaScript string literals to represent HTML entities, whereas in HTML, you use named character references or numeric character references.

// JSX example
const element = <div>This is an ampersand: &amp;</div>;
ReactDOM.render(element, document.getElementById('root'));

In HTML, the equivalent would be:

<div>This is an ampersand: &</div>;

Conditionals and Loops

In JSX, you can use JavaScript conditionals and loops to dynamically create elements, whereas HTML does not support these constructs directly.

// JSX example
const items = ['Item 1', 'Item 2', 'Item 3'];
const element = (
  <ul>
    {items.map(item => <li key={item}>{item}</li>)}
  </ul>
);
ReactDOM.render(element, document.getElementById('root'));

In HTML, you would need to manually create each list item:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Self-Closing Tags

In JSX, self-closing tags must end with a slash /, whereas in HTML, it is optional for void elements.

// JSX example
const element = <img src="logo.png" alt="Logo" />;
ReactDOM.render(element, document.getElementById('root'));

In HTML, both of the following are valid:

<img src="logo.png" alt="Logo">
<img src="logo.png" alt="Logo" />

Summary

In this tutorial, you learned about the key differences between JSX and HTML. Understanding these differences is essential for working effectively with React. JSX allows embedding JavaScript expressions, uses camelCase for attribute names, represents objects, handles HTML entities as string literals, supports conditionals and loops, and requires self-closing tags to end with a slash. These features make JSX a powerful and flexible tool for building user interfaces in React.