fix codepen result

Author: Bunlong

_docs/06-write-react-with-codepen.md

@@ -13,7 +13,7 @@ The basic setup that has been described in this chapter can be used online via [
 
 Below is an embedded CodePen containing the `HelloMessage` component used throughout this chapter. By clicking on the "Result" tab you can view the React component rendered to the DOM. To edit the code just click on "EDIT ON CODEPEN" at the top right corner.
 
-<p data-height="265" data-theme-id="dark" data-slug-hash="rvrQod" data-default-tab="result" data-user="Bunlong" data-embed-version="2" data-pen-title="rvrQod" class="codepen">See the Pen <a href="https://codepen.io/Bunlong/pen/rvrQod/">rvrQod</a> by Bunlong (<a href="https://codepen.io/Bunlong">@Bunlong</a>) on <a href="https://codepen.io">CodePen</a>.</p>
+<p data-height="265" data-theme-id="0" data-slug-hash="rvrQod" data-default-tab="js,result" data-user="Bunlong" data-embed-version="2" data-pen-title="rvrQod" class="codepen">See the Pen <a href="https://codepen.io/Bunlong/pen/rvrQod/">rvrQod</a> by Bunlong (<a href="https://codepen.io/Bunlong">@Bunlong</a>) on <a href="https://codepen.io">CodePen</a>.</p>
 <script async src="https://static.codepen.io/assets/embed/ei.js"></script>
 
 Note that the "Babel" tab indicates the JavaScript written into this tab will be transformed by Babel.

_docs/13-define-react-node-event.md

@@ -7,7 +7,7 @@ last_modified_at: 2018-05-16T15:58:49-04:00
 
 Events can be added to React nodes like events can be added to DOM nodes. In the example below I am adding a very simple click and mouseover event to a React `<div>` node.
 
-<p data-height="265" data-theme-id="dark" data-slug-hash="PedNxy" data-default-tab="result" data-user="Bunlong" data-embed-version="2" data-pen-title="PedNxy" class="codepen">See the Pen <a href="https://codepen.io/Bunlong/pen/PedNxy/">PedNxy</a> by Bunlong (<a href="https://codepen.io/Bunlong">@Bunlong</a>) on <a href="https://codepen.io">CodePen</a>.</p>
+<p data-height="265" data-theme-id="0" data-slug-hash="PedNxy" data-default-tab="js,result" data-user="Bunlong" data-embed-version="2" data-pen-title="PedNxy" class="codepen">See the Pen <a href="https://codepen.io/Bunlong/pen/PedNxy/">PedNxy</a> by Bunlong (<a href="https://codepen.io/Bunlong">@Bunlong</a>) on <a href="https://codepen.io">CodePen</a>.</p>
 <script async src="https://static.codepen.io/assets/embed/ei.js"></script>
 
 Note how the property name for an event in React starts with 'on' and is passed in the props argument object to the `ReactElement()` function.

_docs/21-define-event-in-jsx.md

@@ -9,7 +9,7 @@ In the [previous chapter](/define-react-node-event), it was explained how events
 
 Below is the none JSX way of adding an event to a React node:
 
-<p data-height="265" data-theme-id="dark" data-slug-hash="PedNxy" data-default-tab="result" data-user="Bunlong" data-embed-version="2" data-pen-title="PedNxy" class="codepen">See the Pen <a href="https://codepen.io/Bunlong/pen/PedNxy/">PedNxy</a> by Bunlong (<a href="https://codepen.io/Bunlong">@Bunlong</a>) on <a href="https://codepen.io">CodePen</a>.</p>
+<p data-height="265" data-theme-id="0" data-slug-hash="PedNxy" data-default-tab="js,result" data-user="Bunlong" data-embed-version="2" data-pen-title="PedNxy" class="codepen">See the Pen <a href="https://codepen.io/Bunlong/pen/PedNxy/">PedNxy</a> by Bunlong (<a href="https://codepen.io/Bunlong">@Bunlong</a>) on <a href="https://codepen.io">CodePen</a>.</p>
 <script async src="https://static.codepen.io/assets/embed/ei.js"></script>
 
 The above code written using JSX:

_docs/32-what-is-component-props.md

@@ -9,7 +9,7 @@ Props is similar to HTML attributes. In other words, props provide configuration
 
 In the example below a MyComponent is created and it is expecting a 'name' prop to be sent when the component is instantiated:
 
-<p data-height="265" data-theme-id="dark" data-slug-hash="yjZVJo" data-default-tab="result" data-user="Bunlong" data-embed-version="2" data-pen-title="yjZVJo" class="codepen">See the Pen <a href="https://codepen.io/Bunlong/pen/yjZVJo/">yjZVJo</a> by Bunlong (<a href="https://codepen.io/Bunlong">@Bunlong</a>) on <a href="https://codepen.io">CodePen</a>.</p>
+<p data-height="265" data-theme-id="dark" data-slug-hash="yjZVJo" data-default-tab="js,result" data-user="Bunlong" data-embed-version="2" data-pen-title="yjZVJo" class="codepen">See the Pen <a href="https://codepen.io/Bunlong/pen/yjZVJo/">yjZVJo</a> by Bunlong (<a href="https://codepen.io/Bunlong">@Bunlong</a>) on <a href="https://codepen.io">CodePen</a>.</p>
 <script async src="https://static.codepen.io/assets/embed/ei.js"></script>
 
 Inside the render function of the `<App>` component, where `<MyComponent>` is used, the name prop is added to the `<MyComponent>` component much like an HTML attribute is added to an HTML element (i.e. `<MyComponent name="Brian" />`). The name prop is then used by the `MyComponent` component (i.e. `this.props.name`) as the text node for the React `<div>` node rendered by the `MyComponent` component. This is similar to how an `<input>` can take a value attribute which it uses to display a value.

_docs/41-create-stateless-function-component.md

@@ -9,7 +9,7 @@ When a component is purely a result of `props` alone, no `state`, the component
 
 In the example below `MyComponent` is the result of a function that returns the results from `React.createElement()`.
 
-<p data-height="265" data-theme-id="dark" data-slug-hash="ELrJWN" data-default-tab="result" data-user="Bunlong" data-embed-version="2" data-pen-title="ELrJWN" class="codepen">See the Pen <a href="https://codepen.io/Bunlong/pen/ELrJWN/">ELrJWN</a> by Bunlong (<a href="https://codepen.io/Bunlong">@Bunlong</a>) on <a href="https://codepen.io">CodePen</a>.</p>
+<p data-height="265" data-theme-id="dark" data-slug-hash="ELrJWN" data-default-tab="js,result" data-user="Bunlong" data-embed-version="2" data-pen-title="ELrJWN" class="codepen">See the Pen <a href="https://codepen.io/Bunlong/pen/ELrJWN/">ELrJWN</a> by Bunlong (<a href="https://codepen.io/Bunlong">@Bunlong</a>) on <a href="https://codepen.io">CodePen</a>.</p>
 <script async src="https://static.codepen.io/assets/embed/ei.js"></script>
 
 Having look at the same code not using JSX should clarify what is going on.

_site/index.html

@@ -45,7 +45,7 @@
 
 
 
-  <meta property="article:published_time" content="2018-05-22T10:03:55+07:00">
+  <meta property="article:published_time" content="2018-05-22T10:21:02+07:00">