From 4fe12ed6d1b80112cfaaef3bebd8f1afc25bc869 Mon Sep 17 00:00:00 2001
From: Max Dobler <dobler@synyx.de>
Date: Thu, 4 Jul 2019 22:39:40 +0200
Subject: [PATCH 1/4] Add getting started to readme

---
 README.md | 57 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 57 insertions(+)

diff --git a/README.md b/README.md
index 6983752..375ed87 100644
--- a/README.md
+++ b/README.md
@@ -13,9 +13,66 @@ build modular applications that are [composable], [functional reactive] and
 [functional reactive]: https://en.wikipedia.org/wiki/functional_reactive_programming
 [pure]: https://en.wikipedia.org/wiki/Functional_programming#Pure_functions
 
+# Getting started
+
+You can install flyps via npm:
+
+`npm i flyps`
+
+### Create a signal
+
+`Signals` are the core principle of flyps.
+
+```
+import { signal } from "flyps";
+
+const counter = signal(1);
+```
+
+### Change the value of a signal
+
+A signal can be updated via a function (`signal::update`) or replaced with a new value (`signal::reset`).
+
+```
+const counter = signal(0);           // value = 0
+counter.update(value => value + 1);  // value = 1
+counter.reset(0);                    // value = 0
+```
+
+### Render view
+
+Views can be rendered with the `mount` function.
+
+```
+import { mount } from "flyps";
+
+mount(document.querySelector("#my-view"),
+  () => "<h1>Hello World!</h1>",
+  (prev, next) => {
+    let el = htmlToElement(next);
+    prev.parentNode.replaceChild(el, prev);
+    return el;
+  },
+  prev => {
+    return prev.parentNode.removeChild(el);
+  }
+);
+```
+
+For more complex views we suggest to add the [flyps-dom-snabbdom] extension, which adds support for [snabbdom] rendering.
+
+### More Examples
+
+More examples can be found on our [flyps homepage].
+
+
+
 [npm-badge]: https://img.shields.io/npm/v/flyps.svg
 [npm-url]: https://www.npmjs.com/package/flyps
 [build-badge]: https://travis-ci.org/Contargo/flyps.svg?branch=master
 [build-url]: https://travis-ci.org/Contargo/flyps
 [coverage-badge]: https://coveralls.io/repos/github/Contargo/flyps/badge.svg?branch=master
 [coverage-url]: https://coveralls.io/github/Contargo/flyps?branch=master
+[homepage]: https://contargo.github.io/flyps/
+[flyps-dom-snabbdom]: https://github.com/Contargo/flyps-dom-snabbdom/
+[snabbdom]: https://github.com/snabbdom/snabbdom

From a64cbb7d1707154c03c10acbda4e6a5c96b6b061 Mon Sep 17 00:00:00 2001
From: Max Dobler <dobler@synyx.de>
Date: Thu, 4 Jul 2019 22:45:31 +0200
Subject: [PATCH 2/4] Fix link

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 375ed87..b762783 100644
--- a/README.md
+++ b/README.md
@@ -21,7 +21,7 @@ You can install flyps via npm:
 
 ### Create a signal
 
-`Signals` are the core principle of flyps.
+`Signals` are the core principle of flyps and are used everywhere.
 
 ```
 import { signal } from "flyps";
@@ -63,7 +63,7 @@ For more complex views we suggest to add the [flyps-dom-snabbdom] extension, whi
 
 ### More Examples
 
-More examples can be found on our [flyps homepage].
+More examples can be found on our flyps [homepage].
 
 
 

From 212c0e309c941c666fc52dc3fffba7cc5e3e3bc5 Mon Sep 17 00:00:00 2001
From: Max Dobler <dobler@synyx.de>
Date: Thu, 4 Jul 2019 22:55:09 +0200
Subject: [PATCH 3/4] Enhance getting started

---
 README.md | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/README.md b/README.md
index b762783..38803ad 100644
--- a/README.md
+++ b/README.md
@@ -61,6 +61,36 @@ mount(document.querySelector("#my-view"),
 
 For more complex views we suggest to add the [flyps-dom-snabbdom] extension, which adds support for [snabbdom] rendering.
 
+### Snabbdom rendering
+
+First install the extension: `npm i flyps-dom-snabbdom`
+
+```
+import { mount, h } from "flyps-dom-snabbdom";
+
+mount(document.querySelector("#my-view"),
+  () => h("h1", "Hello World!")
+);
+```
+
+### Render value from signal
+```
+import { signal } from "flyps";
+import { mount, h } from "flyps-dom-snabbdom";
+
+const data = signal("Hello World!");
+
+mount(document.querySelector("#my-view"),
+  () => h("h1", data.value())
+);
+```
+
+Whenever the `signal` is updated or replaced the view will be re-rendered with the new data.
+
+```
+data.reset("Hello User!");
+```
+
 ### More Examples
 
 More examples can be found on our flyps [homepage].

From 6ed118db42473027be6f153dc455b67f6e55f4fb Mon Sep 17 00:00:00 2001
From: Max Dobler <dobler@synyx.de>
Date: Thu, 4 Jul 2019 22:57:06 +0200
Subject: [PATCH 4/4] Edit docs

---
 README.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 38803ad..3b3cade 100644
--- a/README.md
+++ b/README.md
@@ -59,10 +59,10 @@ mount(document.querySelector("#my-view"),
 );
 ```
 
-For more complex views we suggest to add the [flyps-dom-snabbdom] extension, which adds support for [snabbdom] rendering.
-
 ### Snabbdom rendering
 
+For more complex views we suggest to add the [flyps-dom-snabbdom] extension, which adds support for [snabbdom] rendering.
+
 First install the extension: `npm i flyps-dom-snabbdom`
 
 ```
@@ -85,7 +85,7 @@ mount(document.querySelector("#my-view"),
 );
 ```
 
-Whenever the `signal` is updated or replaced the view will be re-rendered with the new data.
+Whenever the `signal` changes the view will be re-rendered with the new data.
 
 ```
 data.reset("Hello User!");