docs(reference): make the jinja component example actually mount

The shipped example violated the rule stated three lines below it on the same
page: home.html asked for {% component "pages.counter" %} and
{% component "pages.badge", class="badge" %}, but main.py defined counter in
__main__ and registered root_components=["main.counter"]. Both tags emitted
markup for a path ReactPy could not import -- the elements stayed empty and the
only symptom was 'ImportError: ReactPy failed to import "pages"' on the
websocket request, which a reader copying the page never sees.

Add the missing pages.py (counter + badge), register both paths, and show the
third file in a tab. Verified in Chrome: both mounts connect, the counter
increments 0 -> 1.

Author: Archmonger

docs/examples/reference_jinja/component_tag/main.py

@@ -3,20 +3,9 @@
 from starlette.routing import Route
 from starlette.templating import Jinja2Templates
 
-from reactpy import component, html, use_state
 from reactpy.executors.asgi import ReactPyMiddleware
 from reactpy.templatetags import ReactPyJinja
 
-
-@component
-def counter():
-    count, set_count = use_state(0)
-    return html.div(
-        html.h1(count),
-        html.button({"onClick": lambda event: set_count(count + 1)}, "Add 1"),
-    )
-
-
 # start
 templates = Jinja2Templates(
     env=Environment(
@@ -33,7 +22,9 @@ async def home(request):
 
 starlette_app = Starlette(routes=[Route("/", home)])
 
-# The dotted path must be importable by the server: the browser asks ReactPy to
-# render `pages.counter`, and that lookup happens on the server, not in the
-# template. Register the same path here that the template passes to the tag.
-my_app = ReactPyMiddleware(starlette_app, root_components=["main.counter"])
+# The dotted path in the template is resolved on the server, not in the
+# template: the browser asks ReactPy to render `pages.counter`, and ReactPy
+# imports it to satisfy that request. Register exactly the paths the template
+# passes to `{% component %}` -- here the `counter` and `badge` functions in
+# the sibling `pages.py`.
+my_app = ReactPyMiddleware(starlette_app, root_components=["pages.counter", "pages.badge"])

docs/examples/reference_jinja/component_tag/pages.py

@@ -0,0 +1,20 @@
+from reactpy import component, html, use_state
+
+
+@component
+def counter():
+    count, set_count = use_state(0)
+    return html.div(
+        html.h1(count),
+        html.button({"onClick": lambda event: set_count(count + 1)}, "Add 1"),
+    )
+
+
+@component
+def badge():
+    # The tag's `class` argument styles the mount element, not this markup, so
+    # the component is free to render whatever it likes inside it.
+    return html.div(
+        html.span({"class": "badge-label"}, "Status:"),
+        html.span({"class": "badge-value"}, "active"),
+    )

docs/src/reference/jinja.md

@@ -138,13 +138,19 @@ Both are raised at render time, so they surface as a 500 on the page — not as
     {% include "../../examples/reference_jinja/component_tag/home.html" %}
     ```
 
+=== "pages.py"
+
+    ```python
+    {% include "../../examples/reference_jinja/component_tag/pages.py" %}
+    ```
+
 === ":material-play: Run"
 
     ```python
     # TODO
     ```
 
-The component must live in an importable module, since the browser reaches it by dotted path — a component defined inside the view function is not reachable that way. The template's path and the `#!python root_components` list have to agree exactly.
+The components cannot live in `#!python main.py` even though that is where the wiring is. The browser reaches them by dotted path, so they must sit in a module the server can import — a component defined next to the view is reachable as `#!python main.counter`, but then the template has to say exactly that. Whatever you choose, the path in `{% component %}` and the entry in `#!python root_components` must agree character for character. Nothing checks it for you: a mismatch emits markup that mounts an element which stays empty forever, and the failed import surfaces only as a server-side traceback on the websocket request.
 
 ### A client-side component