bhylu.com

Advertisements

React JSX Attributes

Write browser semantics deliberately instead of assuming that a visual label names an input.

How it works

JSX uses className for CSS classes and htmlFor to connect a label to an input ID. Many DOM property names use camel case, while aria-* and data-* retain hyphens. Boolean attributes such as disabled take booleans rather than the string false. A disabled control cannot be activated, so the example also explains why the action is unavailable. Keep IDs unique when a component can appear more than once; the useId lesson handles reusable fields.

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>Neighbourhood lending desk</h1>
      <label htmlFor="item">Item to borrow</label>
      <input id="item" defaultValue="Folding stool" />
      <button disabled={true} aria-describedby="reason">
        Request item
      </button>
      <p id="reason">Requests open on Saturday.</p>
    </main>
  );
}

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

Expected result

The field is named “Item to borrow”. The disabled request button has an associated explanation.

Clicking the label focuses the input because its htmlFor matches item. defaultValue sets an initial value without making this input controlled. The button cannot submit anything and the paragraph states the limitation. These small relationships matter more than a decorative wrapper. Inspect the accessibility tree as well as the visible text when reviewing your own component.

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

Advertisements