React JavaScript Modules

How it works

A module controls what it exports and what another file must import. Relative paths resolve from the importing file, not from the page URL. Named exports must use matching names unless you deliberately alias them. The example puts loan-day formatting in a tiny module that has no React dependency. That lets a view reuse the function and lets a test call it without mounting a component.

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.

• package.json
• index.html
• src/main.jsx
• src/style.css
• vite.config.mjs
• src/loan.js

Example

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

import { loanLabel } from './loan.js';
function App() {
  return (
    <main>
      <h1>Neighbourhood lending desk</h1>
      <p>{loanLabel('Market basket', 3)}</p>
    </main>
  );
}

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

Expected result

The helper produces “Market basket · 3 days” and the component displays it.

Save loan.js beside main.jsx in src using the supporting file below. The helper accepts data and returns text; it does not reach into the DOM or retain mutable module state. A default export would use different import syntax, so keep the choice consistent. A separate file is useful because of its responsibility, not merely because the project has reached an arbitrary number of lines.

Supporting files for this lab

export function loanLabel(name, days) {
  return name + ' · ' + days + (days === 1 ? ' day' : ' days');
}