Browse Source

Own our fiddles so we can update them more easily

main
Paul O’Shannessy 10 years ago
parent
commit
27fbafae18
  1. 4
      docs/getting-started.md
  2. 4
      docs/getting-started.zh-CN.md
  3. 6
      docs/thinking-in-react.md

4
docs/getting-started.md

@ -9,8 +9,8 @@ redirect_from: "docs/index.html"
The easiest way to start hacking on React is using the following JSFiddle Hello World examples:
* **[React JSFiddle](http://jsfiddle.net/vjeux/kb3gN/)**
* [React JSFiddle without JSX](http://jsfiddle.net/vjeux/VkebS/)
* **[React JSFiddle](http://jsfiddle.net/reactjs/69z2wepo/)**
* [React JSFiddle without JSX](http://jsfiddle.net/reactjs/5vjqabv3/)
## Starter Kit

4
docs/getting-started.zh-CN.md

@ -8,8 +8,8 @@ next: tutorial.html
开始 Hack React 的最简单的方法是用下面 JSFiddle 的Hello Worlds
* **[React JSFiddle](http://jsfiddle.net/vjeux/kb3gN/)**
* [React JSFiddle without JSX](http://jsfiddle.net/vjeux/VkebS/)
* **[React JSFiddle](http://jsfiddle.net/reactjs/69z2wepo/)**
* [React JSFiddle without JSX](http://jsfiddle.net/reactjs/5vjqabv3/)
## 入门教程包 (Starter Kit)

6
docs/thinking-in-react.md

@ -60,7 +60,7 @@ Now that we've identified the components in our mock, let's arrange them into a
## Step 2: Build a static version in React
<iframe width="100%" height="300" src="http://jsfiddle.net/n25pd/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
<iframe width="100%" height="300" src="http://jsfiddle.net/reactjs/yun1vgqb/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
Now that you have your component hierarchy it's time to start implementing your app. The easiest way is to build a version that takes your data model and renders the UI but has no interactivity. It's easiest to decouple these processes because building a static version requires a lot of typing and no thinking, and adding interactivity requires a lot of thinking and not a lot of typing. We'll see why.
@ -104,7 +104,7 @@ So finally, our state is:
## Step 4: Identify where your state should live
<iframe width="100%" height="300" src="http://jsfiddle.net/t53sx/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
<iframe width="100%" height="300" src="http://jsfiddle.net/reactjs/zafjbw1e/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
OK, so we've identified what the minimal set of app state is. Next we need to identify which component mutates, or *owns*, this state.
@ -129,7 +129,7 @@ You can start seeing how your application will behave: set `filterText` to `"bal
## Step 5: Add inverse data flow
<iframe width="100%" height="300" src="http://jsfiddle.net/F8H7p/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
<iframe width="100%" height="300" src="http://jsfiddle.net/reactjs/n47gckhr/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
So far we've built an app that renders correctly as a function of props and state flowing down the hierarchy. Now it's time to support data flowing the other way: the form components deep in the hierarchy need to update the state in `FilterableProductTable`.

Loading…
Cancel
Save