React components and SEO

React components

Choose the React runtime and write component.jsx (and any helper files it imports relatively). Props arrive typed, under their ids. Do not write behavior_js or declare libraries: both are produced when the source compiles.

import { useState } from "react"; export default function Counter({ label, start, step }) { const [n, setN] = useState(start); return ( <div className="cc-counter"> <span data-sb-prop="label">{label}</span> <button className="cc-btn" => setN(n + step)}>{n}</button> </div> ); }

You may importreact(React 19) and the approved libraries:three,gsap(core),lottie-webandchart.js. Nothing else, no CSS imports (styles go in the component's CSS) and no network.

The component isserver-renderedwhen the page is published and hydrated in the browser, so render the same markup on the server and the client: do not touchwindow,document,Math.randomor the current time during render; do browser work inuseEffect.

Every save is test-rendered with the default props, and a failed server render is reported in the editor. Until it is fixed, the page shows the fallback.

SEO: the fallback

A plain-JavaScript component draws its content in the browser, so without help a crawler sees an empty element. The fallback is plain HTML the server places inside the root and your code replaces on mount. Keep it to the real content: a heading, a sentence, an image. For every component, Praisma also adds a crawlable copy of what the frame starts with (the React server render or your fallback) to the page, hidden visually and from screen readers.