Add Simple States And Composite States as an XState til

xstate/simple-states-and-composite-states.md

@@ -0,0 +1,52 @@
+# Simple States And Composite States
+
+XState allows you to build [hierarchical state
+machines](https://xstate.js.org/docs/guides/hierarchical.html). A hierarchical
+state machine is one where there are substates nested under states.
+
+States with nothing nested under them are _simple states_. States that have
+substates are _composite states_.
+
+```javascript
+const machine = createMachine({
+  // Starting State
+  initial: "active",
+  // Starting Context
+  context: { count: 0 },
+  // States
+  states: {
+    inactive: {
+      always: { target: "active" },
+    },
+    active: {
+      on: {
+        SWITCH_COUNT_DIRECTION: {
+          actions: ["logSwitch", "consoleLogSwitch"],
+        },
+        COUNT: {
+          actions: "changeCount",
+        },
+      },
+      initial: "increment",
+      states: {
+        increment: {
+          on: {
+            SWITCH_COUNT_DIRECTION: "decrement",
+          },
+        },
+        decrement: {
+          on: {
+            SWITCH_COUNT_DIRECTION: "increment",
+          },
+        },
+      },
+    },
+  },
+});
+```
+
+- The `inactive` state is a _simple state_. There is nothing nested under it.
+- The `active` state is a _composite state_. There are two substates
+  (`increment` and `decrement`) nested under it.
+- The `increment` and `decrement` states are both _simple states_. Nothing is
+  nested under them.