bhylu.com

Advertisements

React JavaScript Variables

Use const and let to express JavaScript intent; use state only when a change must update the view.

How it works

A const binding cannot be reassigned, but it does not freeze the object it refers to. let allows reassignment within its block. Both differ from state: reassigning a local variable does not ask React to render again. Start with values that can be derived while rendering. Here a capacity and a fixed booking count produce the number of remaining places without a state hook or an effect.

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() {
  const capacity = 8;
  const booked = 3;
  let label = 'Spaces available';
  if (capacity === booked) label = 'Session full';
  return (
    <main>
      <h1>Neighbourhood lending desk</h1>
      <p>{label}</p>
      <output>Remaining: {capacity - booked}</output>
    </main>
  );
}

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

Expected result

The output shows five remaining places and the available label.

The label is a temporary calculation for this render. It is not retained between interactions. Use const for capacity and booked because those bindings do not change here. If a user can book a place in a real app, model that changing data with state and a server contract. JavaScript scope still applies inside a component; React does not change the language’s block rules.

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

Advertisements