bhylu.com

Advertisements

React JSX

Use JSX to describe a tree while keeping its rules separate from ordinary HTML parsing.

How it works

JSX is transformed by the build tool before the browser runs it. It can look like HTML, but it is a JavaScript expression that produces React elements. Close every tag and return one containing tree. A fragment groups siblings without adding another DOM wrapper. JSX does not turn a string into executable markup. In this example the heading, two paragraphs and fragment make a small notice without unnecessary nested containers.

Run the code

Use a separate empty lab folder with Node 22.12+ in the 22 series. Save the files below using their displayed paths; browsers may download only the basename, so create src, public or tests folders as listed. The pinned project uses React and React DOM 19.3.1 with Vite 7.3.1. Run npm install, then npm run dev and open the local address Vite prints. React examples do not run in Bhylu’s current playground.

No Apache, MySQL or change to Bhylu’s server configuration is needed. These are local teaching projects, not a publishing package. Keep generated dependencies and lockfiles in your own lab. Review the project setup.

Example

src/main.jsx

import React, { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './style.css';

function App() {
  return (
    <main>
      <h1>Lending notice</h1>
      <>
        <p>Collect items on Saturday.</p>
        <p>Return them by Monday.</p>
      </>
    </main>
  );
}

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

Expected result

The main element has one heading and two paragraphs, with no extra fragment element in the DOM.

The short fragment syntax becomes an invisible grouping boundary. The main element still supplies the useful landmark. Parentheses around a long return can make formatting safer, particularly when the first tag moves onto another line. Inspect the DOM after running the project: JSX source is not a one-to-one copy of every object React uses internally.

For API contracts and version differences, use React’s official documentation.

Advertisements