Patterns
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.
Server to React
4 examplesThe 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.
Islands with props
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.islandpropsProgressive enhancement
PAD 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}serverHtmluseMemoData files with a tag
A 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/datasetcreateRootProviders with {reactData}
Four 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')React back to PAD
5 examplesThe 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.
One page, two answers
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=jsonuseEffectAbortControllerForms checked by PAD
One 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-TokenIslands sharing server state
Two 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$padExposeCustomEventuseEffectPAD draws, React steers
React 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}padFragmentdangerouslySetInnerHTMLLive polling
A 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.
$padExposepadCacheGetsetIntervalvisibilitychangeReact basics
5 examplesState, events, forms and composition - plain React, mounted in a PAD page.
Counter with history
The start value comes from PHP in a data attribute; the step size, the undo history and the statistics are React state.
data-*useStateComposition
Small components - a card, a button, a todo item - put together into bigger ones with props and children.
propschildrenControlled form
Every field is React state and checked as you type - nothing leaves the browser. Compare it with the form PAD checks.
useStateonSubmitToggles
A switch component used three times - each copy keeps its own state.
useStateClick handler
An event handler that reads where you clicked and leaves a ripple there.
onClickuseRef