bhylu.com

Advertisements

React Installation and Setup

Use a separate Vite lab so tutorial experiments do not change the Bhylu application or its dependencies.

How it works

The downloadable project files use React and React DOM 19.3.1 with Vite 7.3.1. This is the tested course baseline, not an instruction to keep production dependencies frozen forever. Vite needs a compatible Node installation; Node 22.12 or later in the 22 series meets this baseline. Check node --version first. Create an empty folder outside the website, save the supplied files with their shown names and run npm install followed by npm run dev.

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>
      <p id="setup-note">This app runs in its own local lab.</p>
    </main>
  );
}

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

Expected result

Opening the address printed by Vite shows the lending-desk heading and a local-lab message.

package.json supplies exact dependencies and scripts. index.html contains the root and module entry. src/main.jsx contains the complete lesson, while src/style.css keeps the page readable. Keep the package lock produced by your installation. For another lesson, replace its listed files in a separate lab or reset your own experiment deliberately. No Apache or MySQL process is needed for these browser examples.

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

Advertisements