Migrate React to HTMX

Explain the difference between client-rendered SPAs and hypermedia-driven applications in terms of state location, data transfer format, and rendering responsibility.

Explain, with a concrete HTML example, how HTMX extends HTML to satisfy the HATEOAS principle by letting any element issue requests and swap responses.

Contrast React's virtual DOM diffing with HTMX's HTML-over-the-wire swap model.

Identify which categories of UI features in a React CRUD app map cleanly to HTMX and which require supplementary client-side scripting.

List the trade-offs (bundle size, SEO, complexity, latency) of replacing React with HTMX for a CRUD application.

Configure an Express server for HTMX with a templating engine (e.g., EJS), static asset serving, and body-parser middleware.

Design Express routes to serve either full HTML pages or partial fragments based on the 'HX-Request' header.

Structure a Node.js project to logically separate full-page templates from reusable partials.

Use hx-get, hx-post, hx-put, hx-patch, and hx-delete to issue AJAX requests from any HTML element.

Control where the server response is inserted using hx-target with CSS selectors and the `closest`/`find` modifiers.

Choose the appropriate hx-swap strategy (innerHTML, outerHTML, beforebegin, afterend, etc.) for a given UI update.

Trigger HTMX requests on events other than the default using hx-trigger, including `delay`, `throttle`, and `changed` modifiers.

Pass additional parameters to HTMX requests using hx-vals, hx-include, and hx-params.

Render a list of items as an HTML fragment and load it into a page using hx-get triggered on page load.

Implement server-side pagination for a list, with controls that fetch and replace only the list content.

Implement an inline 'create' form that appends a new item to a list using hx-post.

Implement inline edit-in-place for an item by swapping it with an edit form fragment and saving via hx-put.

Implement delete-with-confirmation using hx-delete, hx-confirm, and an `outerHTML` swap to remove the item.

Perform server-side form validation and return the form fragment with inline error messages on failure.

Implement live search with a debounced hx-trigger that updates a partial list of results.

Update multiple disjoint page regions in a single response using out-of-band (OOB) swaps.

Use hx-push-url to update the browser's URL and history during HTMX-driven navigation.

Display loading indicators during in-flight requests using hx-indicator and the `htmx-request` class.

Listen and react to HTMX events (e.g., htmx:afterSwap) using vanilla JavaScript for custom client-side logic.

Implement real-time updates by connecting to a Server-Sent Events (SSE) stream from an HTMX element.

Identify when client-only state warrants a small reactive library, and integrate Alpine.js into an HTMX project.

Implement common UI patterns like modals, dropdowns, or tabs using Alpine.js within an HTMX-driven application.

Manage shared client-side state across different components using Alpine.js global stores as a lightweight replacement for React Context.

Use small, targeted vanilla JavaScript snippets for transient client-side interactions that do not require a server roundtrip.

Establish a decision rubric for classifying React components into one of three migration targets: server-rendered page, HTMX-driven partial, or client-only (Alpine.js/vanilla JS).

Apply the migration rubric to classify the components of a representative React CRUD feature (e.g., a data table with sorting and filtering).

Draft a component-by-component migration plan for a small React app, mapping each component to its target implementation and required server endpoints.

Replace React Router routes with Express routes that render server-side templates, preserving deep linking.

Translate a React data-fetching hook (useEffect + fetch) into an equivalent HTMX hx-get pattern backed by a fragment endpoint.

Translate a React controlled form with client-side validation into an HTMX form with progressive enhancement and server-side validation.

Replace read-only global state from React Context (e.g., user profile in a header) by rendering it from the server on each request.

Translate a cross-component state update from Redux/Context into an HTMX action that uses out-of-band swaps to refresh a separate region (e.g., a cart counter).

Run React and HTMX side by side during an incremental migration by mounting React components inside HTMX-managed fragments.

Plan the strategic decommissioning of React from the project, including sequencing of component removals and retirement of the React build pipeline.

Implement CSRF protection for HTMX requests in an Express app and configure HTMX to send the token automatically.

Sanitize server-rendered HTML fragments to prevent Cross-Site Scripting (XSS) when displaying user-generated content.

Apply a Content Security Policy (CSP) compatible with HTMX's inline attributes and event handlers.

Write integration tests for HTMX endpoints that assert on returned HTML fragments using Supertest and a DOM parser.

Configure server-side caching headers (ETag, Cache-Control) to optimize responses for HTMX fragment endpoints.

Use hx-boost to convert standard links into AJAX-driven navigation, and identify scenarios where it should be disabled.

Deploy the migrated Express + HTMX application to a production-like hosting environment.

Measure and compare key performance metrics (latency, payload size, Core Web Vitals) of the deployed HTMX app against the original React baseline.