Every way the two meet, one page each - the live example on top, the template, the PHP and the component under it. Purple is PAD on the server, blue is React in the browser.
The data is in the HTML before the first paint: PHP gathers it, PAD writes it into the page, React picks it up. No second request, no loading spinner.
PHP prepares the data, the ^ sigil writes a field as JSON into a data attribute, and one small runtime mounts a component on every island of the page - each with its own state.
{^field}a {loop} of islandsPadReact.islandpropsPAD renders a complete table - with JavaScript off it is all there. React then takes the same element over and adds search and sorting, and can show you what the server sent.
{people}{^people}serverHtmluseMemoA custom tag of the application reads _data/products.json and writes it into a data attribute; a product grid filters and sorts it in the browser. Bare React, no runtime.
_tags/json.php_data/datasetcreateRootFour providers in _providers/ query the database, each building on the one before it; {reactData} writes every answer as a mount point and React draws the forum topic.
{reactData}_providers/db()getAttribute('data')The component asks the server again while it runs - the same pages answer JSON, a single fragment, or take a post - and PAD stays the one that knows.
The page renders HTML for the browser and answers JSON to fetch(): the same PHP filters, sorts and pages the catalogue, and $padExpose names what may leave the server.
$padExposepadFormat=jsonuseEffectAbortControllerOne list of rules for both sides: the browser checks the form with them first, then React posts it with the session's CSRF token in a header and padValidate answers a message per field, or the new list of messages.
padValidatepadValidateClient$padCsrfpadSessioncontrolled inputsX-CSRF-TokenTwo islands, one cart kept in the PHP session: the shelf posts, the server answers the cart, and an event tells the other island - a reload shows the same cart.
padSession$padExposeCustomEventuseEffectReact holds the controls; PAD renders the {chart} as SVG and answers just that {fragment}. The first chart is in the HTML before any script ran.
{chart}{fragment}padFragmentdangerouslySetInnerHTMLA status board asks its page for fresh JSON every few seconds and stops while the tab is hidden; padCache counts the asks of every visitor.
$padExposepadCacheGetsetIntervalvisibilitychangeState, events, forms and composition - plain React, mounted in a PAD page.
The start value comes from PHP in a data attribute; the step size, the undo history and the statistics are React state.
data-*useStateSmall components - a card, a button, a todo item - put together into bigger ones with props and children.
propschildrenEvery field is React state and checked as you type - nothing leaves the browser. Compare it with the form PAD checks.
useStateonSubmitA switch component used three times - each copy keeps its own state.
useStateAn event handler that reads where you clicked and leaves a ripple there.
onClickuseRef