Skip to content

Commit 8a1c36e

Browse files
authored
Merge pull request #63 from danielsbird/remove-duplicate-codepen-scripts
Load CodePen script once
2 parents 921b5d8 + 37c9963 commit 8a1c36e

File tree

1 file changed

+1
-3
lines changed

1 file changed

+1
-3
lines changed

content/docs/thinking-in-react.md

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ Now that we've identified the components in our mock, let's arrange them into a
6262
## Step 2: Build A Static Version in React
6363

6464
<p data-height="600" data-theme-id="0" data-slug-hash="BwWzwm" data-default-tab="js" data-user="lacker" data-embed-version="2" class="codepen">See the Pen <a href="https://codepen.io/gaearon/pen/BwWzwm">Thinking In React: Step 2</a> on <a href="http://codepen.io">CodePen</a>.</p>
65-
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
65+
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
6666

6767
Now that you have your component hierarchy, it's time to implement 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 best 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.
6868

@@ -107,7 +107,6 @@ So finally, our state is:
107107
## Step 4: Identify Where Your State Should Live
108108

109109
<p data-height="600" data-theme-id="0" data-slug-hash="qPrNQZ" data-default-tab="js" data-user="lacker" data-embed-version="2" class="codepen">See the Pen <a href="https://codepen.io/gaearon/pen/qPrNQZ">Thinking In React: Step 4</a> on <a href="http://codepen.io">CodePen</a>.</p>
110-
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
111110

112111
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.
113112

@@ -133,7 +132,6 @@ You can start seeing how your application will behave: set `filterText` to `"bal
133132
## Step 5: Add Inverse Data Flow
134133

135134
<p data-height="600" data-theme-id="0" data-slug-hash="LzWZvb" data-default-tab="js,result" data-user="rohan10" data-embed-version="2" data-pen-title="Thinking In React: Step 5" class="codepen">See the Pen <a href="https://codepen.io/gaearon/pen/LzWZvb">Thinking In React: Step 5</a> on <a href="http://codepen.io">CodePen</a>.</p>
136-
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
137135

138136
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`.
139137

0 commit comments

Comments
 (0)