From 25d22606de3200ddf85b3d5e57ebb15c760d3991 Mon Sep 17 00:00:00 2001
From: Ian Storm Taylor <ian@ianstormtaylor.com>
Date: Fri, 8 Jul 2016 11:44:44 -0700
Subject: [PATCH] add more docs

---
 docs/{concepts.md => concepts/Readme.md}      |   0
 .../statelessness-and-immutability.md         |   5 +
 .../the-document-model.md}                    |   2 +-
 docs/getting-started/installing-slate.md      | 138 ++++++++++++++++++
 4 files changed, 144 insertions(+), 1 deletion(-)
 rename docs/{concepts.md => concepts/Readme.md} (100%)
 create mode 100644 docs/concepts/statelessness-and-immutability.md
 rename docs/{getting-started.md => concepts/the-document-model.md} (98%)
 create mode 100644 docs/getting-started/installing-slate.md

diff --git a/docs/concepts.md b/docs/concepts/Readme.md
similarity index 100%
rename from docs/concepts.md
rename to docs/concepts/Readme.md
diff --git a/docs/concepts/statelessness-and-immutability.md b/docs/concepts/statelessness-and-immutability.md
new file mode 100644
index 000000000..cf8f20a7b
--- /dev/null
+++ b/docs/concepts/statelessness-and-immutability.md
@@ -0,0 +1,5 @@
+
+
+# Statelessness & Immutability
+
+
diff --git a/docs/getting-started.md b/docs/concepts/the-document-model.md
similarity index 98%
rename from docs/getting-started.md
rename to docs/concepts/the-document-model.md
index 5d3cd09c1..06a37b831 100644
--- a/docs/getting-started.md
+++ b/docs/concepts/the-document-model.md
@@ -1,7 +1,7 @@
 
 
 
-# Statelessness & Immutability
+
 
 
 
diff --git a/docs/getting-started/installing-slate.md b/docs/getting-started/installing-slate.md
new file mode 100644
index 000000000..40bc4f857
--- /dev/null
+++ b/docs/getting-started/installing-slate.md
@@ -0,0 +1,138 @@
+
+### Getting Started
+
+- [**Installing Slate**]()
+- [Customizing Slate's Behavior](./customizing-slates-behavior)
+- [Adding Plugins](./adding-plugins)
+
+Slate is an npm module, so to install it you do:
+
+```
+npm install slate
+```
+
+You'll also need to be sure to install Slate's peer dependencies for React:
+
+```
+npm install react react-dom
+```
+
+Once you've install it, you'll need to import it.
+
+Slate exposes a set of modules that you'll use to build your editor. The most important of which is an `Editor` component.
+
+```js
+import { Editor } from 'slate'
+```
+
+In addition to loading the editor, you need to give Slate a "initial state" to work with. Without it, Slate knows nothing about the type of content you want to create, since it has no knowledge of your schema.
+
+To keep things simple, we'll use the `Raw` serializer that ships with Slate to create a new initial state that just contains a single paragraph block with some text in it:
+
+```js
+import { Editor, Raw } from 'slate'
+
+/**
+ * Create our initial state...
+ */
+
+const initialState = Raw.deserialize([
+  {
+    kind: 'block',
+    type: 'paragraph',
+    nodes: [
+      {
+        kind: 'text',
+        ranges: [
+          {
+            text: 'A line of text in a paragraph.'
+          }
+        ]
+      }
+    ]
+  }
+])
+```
+
+Once you've got a `State` object create, via the `Raw` serializer, or any other serialization method you want, you can pass it into the `Editor` component inside your application:
+
+```js
+import React from 'react'
+import { Editor, Raw } from 'state'
+
+/**
+ * Create our initial state...
+ */
+
+const initialState = Raw.deserialize([
+  {
+    kind: 'block',
+    type: 'paragraph',
+    nodes: [
+      {
+        kind: 'text',
+        ranges: [
+          {
+            text: 'A line of text in a paragraph.'
+          }
+        ]
+      }
+    ]
+  }
+])
+
+/**
+ * Our app.
+ */
+
+class App extends React.Component {
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      state: initialState
+    }
+  }
+
+  render() {
+    return (
+      <Editor
+        state={this.state.state}
+        onChange={(state) => {
+          this.setState({ state })
+        }}
+      />
+    )
+  }
+
+}
+```
+
+You'll notice that the `onChange` handler passed into the `Editor` component just updates the app's state with the newest editor state. That way, when it re-renders the editor, the new state is reflected with your changes.
+
+And that's it! 
+
+That's the most basic example of Slate. If you render that onto the page, you should see a paragraph with the text `A line of text in a paragraph.`. And when you type, you should see the text change!
+
+<p align="center"><strong>Next:</strong><br /><a href="./customizing-slates-behavior.md">Customizing Slate's Behavior</a></p>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+