OSSForks/react
1
0
Fork 0
mirror of https://github.com/zebrajr/react.git synced 2026-01-15 12:15:22 +00:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

Merge pull request #3794 from jsfb/fix-thinking-in-react-blog-post

Browse Source 
Fixed jsfiddles broken on https.  Fixes 3735.
This commit is contained in:
Jim
2015-05-01 10:47:12 -07:00
parent 9484d0fc39 34b99cc69e
commit 6ed98ec0c8
4 changed files with 6 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/_posts/2013-09-24-community-roundup-8.md
View File

@@ -66,4 +66,4 @@ While this is not going to work for all the attributes since they are camelCased
[Vjeux](http://blog.vjeux.com/) re-implemented the display part of the IRC logger in React. Just 130 lines are needed for a performant infinite scroll with timestamps and color-coded author names.
<iframe width="100%" height="300" src="https://jsfiddle.net/vjeux/QL9tz/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
[View the source on JSFiddle...](http://jsfiddle.net/vjeux/QL9tz)

6
docs/_posts/2013-11-05-thinking-in-react.md
View File

@@ -56,7 +56,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="https://jsfiddle.net/6wQMG/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
<iframe width="100%" height="300" src="https://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.
@@ -100,7 +100,7 @@ So finally, our state is:
## Step 4: Identify where your state should live
<iframe width="100%" height="300" src="https://jsfiddle.net/QvHnx/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
<iframe width="100%" height="300" src="https://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.
@@ -125,7 +125,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="https://jsfiddle.net/3Vs3Q/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
<iframe width="100%" height="300" src="https://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`.

2
docs/_posts/2013-12-23-community-roundup-12.md
View File

@@ -63,8 +63,6 @@ React declarative approach is well suited to write games. [Cheng Lou](https://gi
[Ross Allen](https://twitter.com/ssorallen) implemented [MontageJS](http://montagejs.org/)'s [Reddit tutorial](http://montagejs.org/docs/tutorial-reddit-client-with-montagejs.html) in React. This is a good opportunity to compare the philosophies of the two libraries.
<iframe width="100%" height="300" src="https://jsfiddle.net/ssorallen/fEsYt/embedded/result,html,js" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
[View the source on JSFiddle...](https://jsfiddle.net/ssorallen/fEsYt/)
## Writing Good React Components

5
docs/_posts/2014-01-06-community-roundup-14.md
View File

@@ -45,7 +45,7 @@ rails s
[Eldar Djafarov](http://eldar.djafarov.com/) implemented a mixin to link Backbone models to React state and a small abstraction to write two-way binding on-top.
<iframe width="100%" height="300" src="https://jsfiddle.net/djkojb/qZf48/13/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
[View code on JSFiddle](http://jsfiddle.net/djkojb/qZf48/13/)
[Check out the blog post...](http://eldar.djafarov.com/2013/11/reactjs-mixing-with-backbone/)
@@ -71,8 +71,7 @@ rails s
[Thomas Aylott](http://subtlegradient.com/) implemented an API that looks like Web Components but using React underneath.
<iframe width="100%" height="300" src="https://jsfiddle.net/SubtleGradient/ue2Aa/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
[View the source on JSFiddle...](http://jsfiddle.net/SubtleGradient/ue2Aa)
## React vs Angular