bhylu.com

Advertisements

React Introduction

Build a view from data before worrying about a large application or a long list of hooks.

How it works

React is a library for describing interfaces as components. A component returns a description of what should appear for its current inputs. React turns that description into browser updates. It does not supply a database, login system or application hosting. This course builds a small neighbourhood lending desk where people find shared equipment and prepare local requests. Start with HTML, CSS and JavaScript functions; if those are unfamiliar, use the earlier Bhylu courses first.

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 available = 4;
  return (
    <main>
      <h1>Neighbourhood lending desk</h1>
      <p>Four shared items are ready.</p>
      <output>Available items: {available}</output>
    </main>
  );
}

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

Expected result

The page shows a single heading, an introduction and “Available items: 4”. Nothing is submitted or saved.

The number is ordinary JavaScript. Braces put that value into JSX, the markup-like syntax used here. App starts with a capital letter because it is a component. The local project mounts it inside the root element. You can change the number and observe the view, but a variable alone does not make an interactive control; state comes later.

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

Advertisements