add write-react-with-codepen.md

Bunlong · Bunlong · commit 2edefa47bb25 · 2018-05-22T09:54:22.000+07:00
diff --git a/content/setting-up/write-react-with-codepen.md b/content/setting-up/write-react-with-codepen.md
@@ -0,0 +1,18 @@
+# Writing React with CodePen
+
+The basic setup that has been described in this chapter can be used online via [CodePen](https://codepen.io). CodePen uses the same three resources used earlier to make writing React online.
+
+* `react`
+* `react-dom`
+* `babel`
+
+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>
+<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.
+
+It will be assumed that after reading this chapter that you understand the basic requirements to setup React and Babel via `babel js`. And that while CodePen does not make it obvious, this is the same exact setup being used by CodePen to run React code.
+
+CodePen will be used throughout the rest of this book to show the results of React code transformed by Babel.
