Codepen 是寶庫！！

我是一個喜歡把玩顏色、嘗試各種介面風格的人，因此 codepen 是我經常使用的工具，更棒的是，可以在上面看到各種高手，用著千奇百怪你一生可能都學不會的招式在寫 code，看了真的很療癒！

此外，codepen 也提供匯出程式碼或是儲存在 GitHub Gist 的功能，個人認為非常好用，程式的移駕不至於太麻煩。

我們找一個 Codepen 上的 React 範例（這邊就直接拿我上一篇做的小練習xD默默置入行銷），點擊右下角的 export 匯出 Zip 檔，匯出的檔案結構為：

接著，把整個資料夾丟到我的編輯器裡面探探程式的秘密吧！
第一個先看看 index.html 裡面放了什麼程式碼：

這邊我們看到了引入的 React CDN，和一行

<script  src="js/index.js"></script>

那我們就來看看 js 資料夾底下的 index.js，這應該就是我所撰寫的 js 程式碼吧！但事實上，這邊放的是 Babel compile 後的語法。而我們實際撰寫的 js 語法則會放在 babel 資料夾中的 index.babel

Todo App 是學習任何語言很好的題材，計算機也是。這兩個題目都是練習 CRUD 的最佳素材：
在 Codepen 挖到許多寶物～前輩為我們開創了一條路（夜深了想睡了語無倫次了），很多的學習都是從模仿開始，而我不知道哪一天可以完成 React Todo App 希望能盡快學習。
分享兩個很不錯的範例：
https://codepen.io/marekdano/pen/bVNYpq
https://codepen.io/grsmith/pen/BLaGXN?q=react%20todo