bhylu.com

Advertisements

React Study Plan

Use the course units as a dependency path and spend time on a working result rather than a page-count target.

Your brief

Begin with JSX and component inputs, then build a small interactive counter and a controlled form. Move to immutable state and shared ownership before effects. Practise cleanup and rejected requests before adding optimistic UI or server rendering. This plan is a suggested sequence, not a promise that everyone learns at one speed. The local checklist below helps organize a study session but does not record course completion or award any qualification.

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.

Worked solution

Show the worked solution
src/main.jsx

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

const goals = [
  'Explain props and JSX',
  'Update a record immutably',
  'Check a local request',
  'Clean up a subscription',
];
function App() {
  const [done, setDone] = useState([]);
  function toggle(goal) {
    setDone((current) =>
      current.includes(goal)
        ? current.filter((item) => item !== goal)
        : [...current, goal],
    );
  }
  return (
    <main>
      <h1>Neighbourhood lending desk</h1>
      <ul>
        {goals.map((goal) => (
          <li key={goal}>
            <label>
              <input
                type="checkbox"
                checked={done.includes(goal)}
                onChange={() => toggle(goal)}
              />
              {goal}
            </label>
          </li>
        ))}
      </ul>
      <output>{done.length} local study goals checked</output>
    </main>
  );
}

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

Expected result

Each tick updates the local study count; refreshing clears the temporary choices.

Explain each goal using your own example before checking it. For effects, include what happens when the component leaves. For forms, include a rejected case. For routing, test Back and a direct path. The checklist is intentionally page-memory state so it does not suggest a stored learner profile or a completed assessment. Keep important notes in your own files.

Extend and test

Choose one unit, build a variation without looking at the worked source, then write the failure case you used to review it.

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

Advertisements