JSX

JavaScript Syntax Extension (JSX) is a React extension to JavaScript which provides a way to structure UI in a declarative way using familiar syntax to HTML. Its goal is to allow developers to describe what the UI should look like, rather than how it should get updated.

React does not require the use of JSX, but most people find it useful to work with a familiar UI syntax inside a JavaScript code.

With JSX

import React from 'react'

function Hello() {
  return (
    <div className="hello">
      CodePath.org
    </div>
  )
}

export default Hello;

Without JSX

import React from 'react'

function Hello() {
  return React.createElement(
    'div',
    { className: 'hello' },
    'CodePath.org'
  )
}

export default Hello;

💡 With the modern JSX transform (React 17+, also backported to React 16.14), you can use JSX without importing React — the compiler inserts the necessary import automatically. You still need to import React (or named exports like useState) to use other React APIs, and the React.createElement version above still requires the import.

In general, JSX should feel very natural — it is a syntax extension for JavaScript, so all of JavaScript’s existing features remain available and you can embed JavaScript expressions directly within the markup.

That said, there are a few things to keep in mind about syntax in JSX:

Uses camelCase naming convention for HTML attributes.

E.g: tabindex becomes tabIndex
```
<div tabIndex={-1}></div>
```
Some HTML attributes have alternative names.

E.g: The HTML class attribute is className
```
<div className="Button" />
```

JavaScript expressions need to be wrapped in single curly braces { }

const isBackgroundRed = true;

<div className={isBackgroundRed ? 'background-red' : 'background-blue'} />

empty tags need to be closed with />, ie:

const element = <img src={user.avatarUrl} />;

You can not use both quotes (for string values) and curly braces (for expressions) in the same attribute.
By default React escapes values embedded in JSX before rendering. This means, everything is converted to a string before being rendered.

Try embedding HTML into a React component
```
const heading = "<h1>Heading</h1>";

const App = () => (
  <div>{heading}</div>
);
```
React treats the heading const as a string and displays

<h1>Heading</h1>
Most modern editors highlight JSX out of the box — VS Code, for example, supports JSX syntax in both .js and .jsx files with no extra setup. If your editor doesn’t, Babel maintains a list of editor plugins that add JSX-aware highlighting.

To display a list of items, every item needs a unique identifier to be passed within the JSX key attribute

const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
);

There is no single prescribed solution for CSS styling.

React doesn’t prescribe a single solution for CSS. Here are a few options:
- CSS files. You can load them in your index.html page header for common global layouts, styles & fonts.
- CSS modules. Locally scope CSS files imported directly in your JavaScript files. Vite supports this natively for .module.css files — no extra loader configuration needed.