Mounting React in Phoenix LiveView + transferring data

This skill covers one thing: the seam between a Phoenix LiveView and a React element mounted inside it. Two mechanics:

1. Mounting — a LiveView renders an empty node; a JS hook mounts a React root into it and tears it down cleanly.
2. Data transfer — moving values from Phoenix into React, and events/state from React back to Phoenix.

What the React component is — its UI library, its internal state, its styling — is entirely the user's concern. This skill never prescribes that. It only wires the component into LiveView and the two data channels.

The placeholder node

The LiveView renders an empty node and hands it to a hook. Two attributes matter: