start work on dangers of mutability section

Author: rmorshea

docs/source/_static/css/interactive-widget.css renamed to docs/source/_static/css/idom-view.css

@@ -0,0 +1,43 @@
+from idom import component, html, run, use_state
+
+
+@component
+def MovingDot():
+    position, set_position = use_state({"x": 0, "y": 0})
+
+    def handle_click(event):
+        set_position(
+            {
+                "x": event["clientX"],
+                "y": event["clientY"],
+            }
+        )
+
+    return html.div(
+        {
+            "onClick": handle_click,
+            "style": {
+                "position": "relative",
+                "height": "200px",
+                "width": "100%",
+                "backgroundColor": "white",
+            },
+        },
+        html.div(
+            {
+                "style": {
+                    "position": "absolute",
+                    "backgroundColor": "red",
+                    "borderRadius": "50%",
+                    "width": "20px",
+                    "height": "20px",
+                    "left": "-10px",
+                    "top": "-10px",
+                    "transform": f"translate({position['x']}px, {position['y']}px)",
+                },
+            }
+        ),
+    )
+
+
+run(MovingDot)

docs/source/adding-interactivity/_examples/moving_dot.py

@@ -0,0 +1,40 @@
+from idom import component, html, run, use_state
+
+
+@component
+def MovingDot():
+    position, set_position = use_state({"x": 0, "y": 0})
+
+    def handle_click(event):
+        position["x"] = event["clientX"]
+        position["y"] = event["clientY"]
+        set_position(position)
+
+    return html.div(
+        {
+            "onClick": handle_click,
+            "style": {
+                "position": "relative",
+                "height": "200px",
+                "width": "100%",
+                "backgroundColor": "white",
+            },
+        },
+        html.div(
+            {
+                "style": {
+                    "position": "absolute",
+                    "backgroundColor": "red",
+                    "borderRadius": "50%",
+                    "width": "20px",
+                    "height": "20px",
+                    "left": "-10px",
+                    "top": "-10px",
+                    "transform": f"translate({position['x']}px, {position['y']}px)",
+                },
+            }
+        ),
+    )
+
+
+run(MovingDot)

docs/source/adding-interactivity/_examples/moving_dot_broken.py

@@ -1,8 +1,54 @@
-.. _Dangers of Mutability:
+Dangers of Mutability
+=====================
 
-Dangers of Mutability 🚧
-========================
+While state can hold any type of value, you should be careful to avoid directly
+modifying objects that you declare as state with IDOM. In other words, you must not
+:ref:`"mutate" <What is a Mutation>` values which are held as state. Rather, to change
+these values you should use new ones or create copies.
+
+
+.. _what is a mutation:
+
+What is a Mutation?
+-------------------
+
+In Python, values may be either "mutable" or "immutable". Mutable objects are those
+whose underlying data can be changed after they are created, and immutable objects are
+those which cannot. A "mutation" then, is the act of changing the underlying data of a
+mutable value. For example, a :class:`dict` is a mutable type of value. In the code
+below, an initially empty dictionary is created. Then, a key and value is added to it:
+
+.. code-block::
+
+    x = {}
+    x["a"] = 1
+    assert x == {"a": 1}
+
+This is different from something like a :class:`str` which is immutable. Instead of
+modifying the underlying data of an existing value, a new one must be created to
+facilitate change:
+
+    x = "Hello"
+    y = x + " world!"
+    assert x is not y
 
 .. note::
 
-    Under construction 🚧
+    In Python, the ``is`` and ``is not`` operators check whether two values are
+    identitcal. This `is distinct
+    <https://realpython.com/python-is-identity-vs-equality>`__ from checking whether two
+    values are equivalent with the ``==`` or ``!=`` operators.
+
+Thus far, all the values we've been working with have been immutable. These include
+:class:`int`, :class:`float`, :class:`str`, and :class:`bool` values. As a result, we've
+have not had to consider the consiquences of mutations.
+
+
+Why Avoid Mutation?
+-------------------
+
+Unfortunately, IDOM does not understand that when a value is mutated, it may have
+changed. As a result, mutating values will not trigger re-renders. Thus, you must be
+careful to avoid mutation whenever you want IDOM to re-render a component.
+
+.. idom:: _examples/moving_dot