Part 6.3Routing, styling and accessibility

Routing

A client-side router maps URLs to interface trees and changes pages without a full document request. Choose routing as part of the application's architecture: many React frameworks include it, while a client-only Vite app can add a routing library. Give every meaningful screen a useful URL and keep navigation in links rather than click handlers on generic elements.

Styling

React does not require one CSS approach. Plain stylesheets, CSS Modules and component libraries can all work. Prefer semantic class names and keep design tokens such as colours and spacing in CSS custom properties. Use inline style objects mainly for values that genuinely come from data.

.task { display: flex; gap: var(--space-small); }
.task--complete .task__title { text-decoration: line-through; }

Accessibility

JSX still produces HTML, so the platform's rules still matter. Use real buttons, links, labels, headings and landmarks before adding ARIA. Preserve keyboard focus during dynamic updates, announce important asynchronous status changes where necessary and test the interface with a keyboard. Component reuse is a chance to make the accessible behaviour correct once.

Building class names

Static classes use an ordinary string. When a modifier depends on data, calculate the complete string before the JSX so the markup remains readable.

function TaskItem({ task }) {
  const className = task.complete
    ? "task task--complete"
    : "task";

  return (
    <li className={className}>
      <span className="task__title">
        {task.title}
      </span>
    </li>
  );
}