bhylu.com

Advertisements

React Template Literals

Use template literals for readable text while keeping presentation elements in JSX.

How it works

Template literals can interpolate values and span lines. They are useful for labels and summaries, but they still produce strings. They do not validate a URL, escape a database query or render nested elements. Keep those jobs separate. A local request summary can be built from already checked values, then displayed as text. The example also uses a ternary to choose a singular or plural word without duplicating the whole message.

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 count = 2;
  const item = 'folding stools';
  const summary = `Request preview: ${count} ${item} for ${count === 1 ? 'one neighbour' : 'a small group'}.`;
  return (
    <main>
      <h1>Neighbourhood lending desk</h1>
      <p id="summary">{summary}</p>
      <p>No request has been sent.</p>
    </main>
  );
}

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

Expected result

The summary describes two folding stools for a small group and states that nothing was sent.

The literal collects text; the paragraph supplies document structure. The conditional is appropriate because its two short values are easy to read. For several branches, compute a named value before returning JSX. In real user-facing text, plural rules and dates may need localization rather than a growing collection of English-only ternaries.

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

Advertisements