a little bit of the "responding to events" section

Author: Archmonger

docs/examples/css/responding_to_events/simple_button_event.css

@@ -0,0 +1,3 @@
+button {
+    margin-right: 10px;
+}

docs/examples/python/responding_to_events/simple_button.py

@@ -0,0 +1,7 @@
+from reactpy import component, html
+
+
+# start
+@component
+def button():
+    return html.button("I don't do anything")

docs/examples/python/responding_to_events/simple_button_event.py

@@ -0,0 +1,22 @@
+from reactpy import component, html
+
+
+@component
+def button():
+    def handle_click(event):
+        print("You clicked me!")
+
+    return html.button({"on_click": handle_click}, "Click me")
+
+
+
+# end
+if __name__ == "__main__":
+    from reactpy import run
+    from reactpy.utils import _read_docs_css
+
+    @component
+    def styled_app():
+        return html._(html.style(_read_docs_css()), button())
+
+    run(styled_app)

docs/src/learn/responding-to-events.md

@@ -6,7 +6,7 @@ title: Responding to Events 🚧
 
 <p class="intro" markdown>
 
-React lets you add _event handlers_ to your JSX. Event handlers are your own functions that will be triggered in response to interactions like clicking, hovering, focusing form inputs, and so on.
+React lets you add _event handlers_ to your PSX. Event handlers are your own functions that will be triggered in response to interactions like clicking, hovering, focusing form inputs, and so on.
 
 </p>
 
@@ -18,35 +18,43 @@ React lets you add _event handlers_ to your JSX. Event handlers are your own fun
 
 ## Adding event handlers
 
-To add an event handler, you will first define a function and then [pass it as a prop](/learn/passing-props-to-a-component) to the appropriate JSX tag. For example, here is a button that doesn't do anything yet:
+To add an event handler, you will first define a function and then [pass it as a prop](../learn/passing-props-to-a-component.md) to the appropriate PSX tag. For example, here is a button that doesn't do anything yet:
 
-```js
-export default function Button() {
-	return <button>I don't do anything</button>;
-}
-```
+=== "app.py"
+
+    ```python
+    {% include "../../examples/python/responding_to_events/simple_button.py" start="# start" %}
+    ```
+
+=== ":material-play: Run"
+
+    ```python
+    # TODO
+    ```
 
 You can make it show a message when a user clicks by following these three steps:
 
-1. Declare a function called `handleClick` _inside_ your `Button` component.
-2. Implement the logic inside that function (use `alert` to show the message).
-3. Add `on_click={handleClick}` to the `<button>` JSX.
+1. Declare a function called `handle_click` _inside_ your `#!python def button():` component.
+2. Implement the logic inside that function (use `print` to show the message).
+3. Add `on_click=handle_click` to the `html.button` PSX.
 
-```js
-export default function Button() {
-	function handleClick() {
-		alert("You clicked me!");
-	}
+=== "app.py"
 
-	return <button on_click={handleClick}>Click me</button>;
-}
-```
+    ```python
+    {% include "../../examples/python/responding_to_events/simple_button_event.py" end="# end" %}
+    ```
 
-```css
-button {
-	margin-right: 10px;
-}
-```
+=== "styles.css"
+
+    ```css
+    {% include "../../examples/css/responding_to_events/simple_button_event.css" %}
+    ```
+
+=== ":material-play: Run"
+
+    ```python
+    # TODO
+    ```
 
 You defined the `handleClick` function and then [passed it as a prop](/learn/passing-props-to-a-component) to `<button>`. `handleClick` is an **event handler.** Event handler functions: