update tuts

Author: jcouyang

docs/build.sbt

@@ -1,5 +1,5 @@
-micrositeName := "Xreact"
-micrositeDescription := "Reactive x React = Xreact"
+micrositeName := "xReact"
+micrositeDescription := "Reactive x React = xReact"
 micrositeAuthor := "Jichao Ouyang"
 micrositeHomepage := "https://xreact.oyanglul.us/"
 micrositeOrganizationHomepage := "https://oyanglul.us"

docs/src/main/tut/Examples.md

@@ -5,9 +5,13 @@ section: en
 position: 4
 ---
 
-- [Counter](https://github.com/reactive-react/react-most/tree/master/examples/counter)
-- [BMI Calculator](http://jsbin.com/bojaqiv/edit?js,output)
+# Counter
+<iframe src="https://www.webpackbin.com/bins/-KsSYQVTkFjd_MQon3b9" frameborder="0" width="100%" height="500"></iframe>
+
+## BMI Calculator
+
+<iframe src="https://www.webpackbin.com/bins/-Ksaj0iHMWD2xC24bAqR" frameborder="0" width="100%" height="500"></iframe>
+
 - [Type N Search](https://github.com/reactive-react/react-most/tree/master/examples/type-n-search) [(live)](https://reactive-react.github.io/react-most/examples/type-n-search/public/)
+
 - [TodoMVC](https://github.com/reactive-react/react-most/tree/master/examples/todomvc) [(live)](https://reactive-react.github.io/react-most/examples/todomvc/public/)
-- [Type N Search with Transducers](https://github.com/reactive-react/react-most/tree/master/examples/transducer-type-n-search) [(live)](https://reactive-react.github.io/react-most/examples/transducer-type-n-search/public/)
-- [Type N Search with Time Travel](https://github.com/reactive-react/react-most/tree/master/examples/type-n-search-with-undo) [(live)](https://reactive-react.github.io/react-most/examples/type-n-search-with-undo/public/)

docs/src/main/tut/FRP-Best-Practice.md

@@ -1,6 +1,6 @@
 ---
 layout: docs
-title: Functional Best Practice in xReact
+title: Functional Best Practice
 section: en
 ---
 

docs/src/main/tut/Get-Started.md

@@ -20,6 +20,8 @@ position: 1
 Sorry we don't have a **book** to document how to use xreact, and I don't really need to,
 there's only 3 things you should notice when using xreact, I'll explain by a simple counter app.
 
+<iframe src="https://www.webpackbin.com/bins/-KsSVkmGpVrLlwylSrkE" frameborder="0" width="100%" height="500"></iframe>
+
 ### 1. Define a simple stateless View component
 
 ![](https://www.evernote.com/l/ABd-YTQc2FVBjqOEkpiFZDltPloti8a2Hq8B/image.png)
@@ -78,7 +80,7 @@ a `Machine` defines
 
 ```js
 import {render} from 'react-dom'
-import X, {x} from 'xreact/lib/x'
+import {x, X} from 'xreact/lib/x'
 import * as rx from 'xreact/lib/xs/rx'
 
 const Counter = x(plan)(CounterView)
@@ -93,3 +95,10 @@ render(
 `Counter` is product(x) of `plan` and `CounterView`, which means it can react to `Intent` as it's plan, and update `CounterView`
 
 `<X></X>` will provide a `intent$` instance.
+
+
+## Type Safe Counter
+
+If you are TypeScript user and want to enjoy a type safe counter app, it's simple to do so since Xreact is written 100% in TypeScript.
+
+<iframe src="https://www.webpackbin.com/bins/-KsSYQVTkFjd_MQon3b9" frameborder="0" width="100%" height="500"></iframe>

docs/src/main/tut/React-Most-函数式最佳实践.md

@@ -1,6 +1,6 @@
 ---
 layout: docs
-title: Xreact 函数式最佳实践
+title: xReact 函数式最佳实践
 section: zh
 ---
 

docs/src/main/tut/index.md

@@ -1,14 +1,14 @@
 ---
 layout: home
-title:  "Reactive X React"
+title:  "Reactive x React"
 section: "home"
 technologies:
  - first: ["Functional", "Declarative and composable data flow"]
  - second: ["Reactive", "Asynchronous flow made easy"]
  - third: ["React", "Seamless and idiomatic integration with React"]
 ---
 
-Xreact is a lightweight reactive HOC for React. Data flow in Xreact is observable and unidirectional.
+xReact is a lightweight reactive HOC for React. Data flow in xReact is observable and unidirectional.
 
 ![](https://www.evernote.com/l/ABdv2Ks5f7dNQKxyoz7Q1eB9Xm9vy3U11ZMB/image.png)
 
@@ -19,7 +19,7 @@ npm install xreact --save
 yarn add xreact
 ```
 
-A [quick walk through of a counter app](Get-Started.html) will give you a brief idea of how Xreact work.
+A 👉 [quick walk through of a counter app](Get-Started.html) will give you a brief idea of how xReact work.
 
 ## Features
 
@@ -31,7 +31,7 @@ In imperatively written code, you describe step-by-step how to process data.  Wi
 There's also [Fantasy Land](https://github.com/fantasyland/fantasy-land) implementation in `src/fantasy.ts`, you can see [bmi calculator example](https://github.com/reactive-react/xreact/blob/master/examples/bmi-calc/app.tsx) to get the idea.
 
 ### Typesafe and scalable
-Rewritten in Typescript, and abstract Stream as Higher Kind type so easier to bring new FRP lib to integrete with xreact.
+xReact is 100% Typescript!, abstract Stream as Higher Kind type so easier to bring new FRP lib to integrete with xreact.
 
 ### Composable and Reusable `Plan`
 In Redux, reducers' use of `switch` statements can make them difficult to compose. Unlike reducers, the function `x` return is simply a function which can easily compose.
@@ -67,7 +67,7 @@ intent$.filter(x=>x.kind=='rest')
 where `fetch(url)` will return a `Promise`,
 
 ### Reactive libs of your choice
-Xreact came with 2 FRP libs of choices, rxjs and mostjs, for any new lib you only need to implement the `StaticStream` with your prefered lib as Higher Kind Type.
+xReact came with 2 FRP libs of choices, rxjs and mostjs, for any new lib you only need to implement the `StaticStream` with your prefered lib as Higher Kind Type.
 
 more details about HKT implementation in TypeScript is [here](https://github.com/gcanti/fp-ts)