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