iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 6
2
Modern Web

Zero to hero with React.js系列 第 6

【Day6 React】學習都是從觀摩他人的 code 開始

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


上一篇
【Day5 React】render 一個會動的 React 日曆
下一篇
【Day7 React】從拆解電子名片學習 React Components #Part1
系列文
Zero to hero with React.js30

尚未有邦友留言

立即登入留言