1010Code

[Node.js打造API] Webpack 與 babel 轉譯

什麼是 Webpack ? Webpack 是一個開源的打包工具。Webpack 提供了開發缺乏的模組化開發方式，將各種靜態資源視為模組，並從它生成優化過的程式碼。 Webpack 可以從終端、或是更改 webpack.config.js 來設定各項功能。要使用 Webpack 前須先安裝 Node.js。

2017/12/23 2018iT邦鐵人賽
[React學習筆記] 暸解元件與JSX

何謂 JSX？ JSX 語法類似 HTML，全名為(JavaScript XML)，在 React 中會將 JSX 標籤語法轉換成 React.createElement 編譯讓網頁看得懂的元件，元件非常方便，因為我們可以將程式碼集中在每個文件中，使其更容易維護。

2017/12/23 React
[Node.js打造API] 深入浅出 ESLint 與實作

何謂 ESLint ? ESLint 支援 ES6 與 JSX 語法，具高度設定彈性與擴充性的檢查語法工具，可提供程式開發者在語法上的錯誤警告，此篇教學我所使用的是 Airbnb 的規範，簡單來說 ESLint 就是可以規範整個開發團隊中的 coding style。

2017/12/22 2018iT邦鐵人賽
[CSS學習筆記] img圖片排版

圖片標籤圖片不限於容器設定的大小，圖片有多大就多大還有可能超出指定範圍，當容器設定寬為 300px 圖片的寬設定 100% 會與父容器等比例縮放，此外為了適應各瀏覽器高設定 auto 避免圖片因縮放而失真。

2017/12/22 CSS
[Node.js打造API] JavaScript基礎篇(4)

Exports & Imports (Modules) 在撰寫 API 過程中你會將很多分支檔案拆開寫，一方面是減少過長的程式碼另一方面是日後好管理。你必須要先匯出分支檔(export)再經由主檔案中被引入(import)，以下有個簡單例子，第一個分支檔 person.js 將函式 person 匯出，第二支分支檔將函式 clean 和變數 bastData 匯出 (另一種匯出寫法) ，最後再主檔案 index.js 引入被呼叫使用。

2017/12/21 2018iT邦鐵人賽
[React學習筆記] 輕鬆使用 Create React app

Create React app Create React app 是由 Facebook 自己所開源的 start kit 在 GitHub 上可以下載下來使用，初學習 React 建議從這包工具開始下手，裡面是由官方和一些 React 的社群共同維護的專案包。

2017/12/21 React
[CSS學習筆記] 兩種修改元素位置

修改元素位置在 posioion 屬性中有 relative 相對位置跟 static 差別在於 relative 是可以做上下左右移動的修改屬性有 top、left、right、bottom，以上都是跟 position 共用的，今天的例子是將圖片向上位移，但他只能將圖片位移相對位置而已下面依附的內容則原封不動，如下圖：

2017/12/21 CSS
[CSS學習筆記] Navigation導覽列實作

Navigation 導覽列通常網頁上都有一個導覽列我們稱它 Navigation，往往放在網頁的 header 中，今天就來實作利用 HTML 和 CSS 刻岀一個簡易導覽列，如下圖。

2017/12/21 CSS