bhylu.com

Advertisements

React Upgrading React

Treat dependency updates as a review task with reproducible installation and checks, rather than changing one version string blindly.

How it works

React and React DOM should use a compatible matched version. Read the release and migration notes, commit a lockfile and test important user journeys before releasing. The course pins a tested React 19.3.1 baseline; it does not teach removed ReactDOM.render or Create React App as the default setup. Ref props, automatic batching and development checks can affect older code, so an upgrade deserves a focused branch and a rollback plan.

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, useState } from 'react';
import { createRoot } from 'react-dom/client';
import './style.css';

function App() {
  const [checked, setChecked] = useState(false);
  return (
    <main>
      <h1>Neighbourhood lending desk</h1>
      <label>
        <input
          type="checkbox"
          checked={checked}
          onChange={(event) => setChecked(event.target.checked)}
        />
        I reviewed the local collection flow
      </label>
      <output>{checked ? 'Review recorded locally' : 'Review still needed'}</output>
    </main>
  );
}

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

Expected result

A small behaviour check still works after installation: ticking the box changes the local review status.

This working fixture is one check, not a complete migration suite. Add tests for focus, forms, effects, routing, error recovery and hydration if your app uses them. Keep package installation separate from application data migrations. React’s documentation may describe a newer patch than the course; verify support before adopting a new API and keep review evidence tied to the version actually run.

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

Advertisements