安裝 Gulp
Gulp 是一種前端自動化工具，可以幫助開發者將 SASS 跟 ES6 編譯成一般瀏覽器看得懂的版本，也可以把圖片跟 .css 還有 .js 壓縮成更小的檔案，是一個很方便的開發工具，這篇文章將介紹如何安裝 Gulp 並引入專案中。
安裝 NVM安裝 Gulp 之前，首先你的電腦需要有 Node.js 的環境，建議使用 NVM 來安裝 Node.js，方便日後可以切換不同版本的 Node.js。
使用 cURL 或 Wget 指令安裝：：
1curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.36.0/install.sh | bash
1wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.36.0/install.sh | bash
確認是否安裝成功，輸入指令確認，成功的話會顯示 nvm：
1command -v nvm
用 NVM 安裝 Node.js
輸入指令查看 LTS 版本（長期穩定開發版本）：
1nvm ls-remote --l ...
React 運用邏輯運算子解決 JSX 問題
在 React 前一個筆記中，有試著做出一個 Counter，並且有加入判斷條件：如果數字為 0 的話，就沒辦法繼續按減號。還有另一種作法是：如果數字為 0 的話，減號按鈕就消失不能按，不過實做的話，會出現一些問題，這篇來看看需要解決什麼問題。
JSX 不能使用陳述式設定數字大於 0，減號顯示，按照邏輯可能會這樣寫：
12345678910const Count = () => { return ( if (count > 0) { <div className="plus" onClick={() => setCount(count - 1)} >+</div> } );}
但是這樣做會違反 JSX 的規則，也就是 JSX 只能使用表達式，不能使用陳述式。如果要解決這個問題的話，可以使用邏輯運算子。
什麼是邏輯運算子？根據 MDN 官網解釋，邏輯運算子通常被用於布林值的判斷，使用的符號有 &am ...
React v.s Vue 之 Component 比較心得
目前學 React 學了一點皮毛，而 Vue 也使用了一陣子，想寫一篇來比較一下兩者對於我這個小碼農有什麼不一樣。
Vue 的 Component我用 Vue 寫了一個簡單的 counter，預設數字是 0，當點擊 + 時，數字增加 1；而點擊 — 時，數字減 1，數字等於 0 時，就不能減，並且用 3 個 component 放在一起。
直接看完成品：
See the Pen Vue Counter Demo by Bucky Chu
(@bucky0112) on CodePen.
React 的 ComponentReact 的部份也是一樣的功能，一樣也是放 3 個 component。
直接玩玩看：
See the Pen React count demo by Bucky Chu
(@bucky0112) on CodePen.
兩者比較先說這只是我自己的心得，可能有某些個人喜好影響。
Vue：我覺得 Vue 的寫法還滿直觀的，而且 HTML、CSS 跟 JavaScript 三者分離的寫法滿乾淨，可能是我先學 Vue，所以一些語法的部份已經 ...
使用 useState 來管理狀態
前面提到當變數更新時，React 還不知道資料有更新。所以 React 提供了一個方法來監控而且管理資料，而這就是 React 的 Hooks 之一 - useState。
什麼是 State首先要先來了解 State 是什麼，才能 use 它。根據 React 官網說到，State 類似 props，不過差別在於 State 是由 Component 私有控制的。可以把它當成是資料，假設一個資料有兩種狀態，true 或 false，預設狀態是 false，當你使用它時，就會變成 true，這種狀態就是 state。
來試著使用 State Hook 吧先來簡單瞭解一下什麼是 Hook：
Hook 是 React 16.8 中增加的新功能。它讓你不必寫 class 就能使用 state 以及其他 React 的功能。 (來自 React 官網的解釋)
簡單來說 Hook 就是 React 中各項特殊 function，而本篇則是會介紹 useState 的用法。
開始使用 useState下方有一個 Component，來試著使用 useState 改動畫面。
See ...
建立並使用 React Component
在前端框架中，將原本 UI 拆分成獨立而且可以重複使用的程式碼，就是 Component（Angular 我不確定是不是，不過我在 Vue 蠻常用的）。拆成 Component 的好處是，方便日後維護以及可以專注在個別程式碼的開發，還有最棒的是可以當作是一個樂高積木一樣重複使用組合。
使用React Component1234567891011121314151617181920212223242526272829// 把下面整個 .container 給包成 component<div class="container"> <div class="plus">+</div> <div class="num">0</div> <div class="minus">-</div></div>======================================================// 用一 ...
如何在 JSX 中加入 CSS 樣式？
在 React 中，什麼東西都可以直接寫在 JavaScript 裡面，就連 CSS 樣式也可以，雖然有點奇怪，不過我在 Vue 也是會這樣寫 inline-style 的，只是 Vue 還會寫在 template 中，而 React 則是寫在 JSX 裡面。
把 CSS 樣式變成物件寫法？目前的理解是，感覺什麼都可以寫成變數來操作，就連 CSS 樣式也可以。我寫了一個點擊器範例：
See the Pen React count demo by Bucky Chu
(@bucky0112) on CodePen.
接著試著把 CSS 樣式寫成物件，寫法是這樣：
123456// 定義一個 style變數const numStyle = { margin: '0 50px 0 50px', // 如果不是純數字，就要用字串格式 color: '#EE6464', fontSize: 60, // 加 px 就要使用字串，這裡 px 可用可不用}
要注意的地方：
由於這裡是物件，不是 CSS，所以每一 ...
JSX 變數與表達式使用
經過上一回的 JSX 超入門，這一次一樣入門，不過從變數以及表達式開始。
變數怎麼使用？先定義一個變數出來，例如 const word = 'PS5' ，接著在 ReactDOM 的第一個參數中使用，只要在變數名稱的外面包上一個大括號就可以使用了，例如：
See the Pen React variable by Bucky Chu
(@bucky0112) on CodePen.
表達式使用而在大括號中，除了可以放入變數以外，也可以放入表達式（關於表達式與陳述式這個話題，以後會專門開一個文章來說明）。
12345const num = 100;ReactDOM.render( <p>PS5 今天賣 {num * 100} 台了</p>, document.querySelector("#root")); // 在畫面上就會呈現 PS5 今天賣 10000 台了
JSX 的變數大致上就是這樣使用了，使用起來跟 Vue 的感覺有點像，雖然目前還不太習慣，總之就繼續練習下去吧！
City Weather App 開發筆記
這次單純使用 JavaScript 來串接 API 開發一個天氣小程式，也練習一下我的 SCSS，寫了一下英文文件發在 GitHub 上可以練習我的英文，這篇就稍微介紹一下我的開發過程吧～
天氣資料首先要找天氣資料來源，發現 Open Weather 有提供 API，不過要先去註冊申請拿到 API key 才能開始，註冊方面我就不多加解釋了。它有很多 API 可以玩，不過目前只需要拿到當前天氣狀況的資料，就選擇 Current Weather Data。
這邊就直接跳到拿到 key 之後可以透過 API call 去拿資料：
預設API call：https://api.openweathermap.org/data/2.5/weather?q={city name}&appid={API key}
API call 的網址也可以試著加入想要的資料，例如：測量單位可以選：預設是 standard，選擇 metric ，溫度為攝氏，所以加上 &units=metric
語系也可以選擇：http://api.openweat ...
學會 Mixin，讓你 SCSS 開發更快速
以往自己在寫 CSS 時，多少會遇到想要寫某一個效果卻忘記怎麼開始，然後就需要上網找怎麼解決問題。當下雖然問題解決了，不過可能過沒多久，當遇到同樣問題時，又需要再去找解法，這時候 Mixin 就派上用場了。
如何開始用 Mixin基本用法Mixin 的用法我覺得有點像變數，只是差在變數只能給一個值，而 Mixin 則是把一個物件定義成一個變數，然後要用的時候再呼叫變數名稱就可以使用裡面的方法，就像下面的 CodePen：
See the Pen mixin demo by Bucky Chu
(@bucky0112) on CodePen.
1234567891011// 定義一個 @mixin，並給它一個名稱@mixin hide-text { text-indent: 110%; white-space: nowrap; overflow: hidden;}// 要使用時，呼叫 @include 加上 mixin 名稱.h1 { @include hide-text}
帶入參數的用法這是比較進階的用法，用法跟 JavaSc ...
React 從 JSX 開始 Hello World
相信每個使用 React 的前端工程師都會聽過並學習使用 JSX 這個語法，雖然官方是說不一定要求使用 JSX，不過先來看一下它如何寫，也許就不會這麼排斥它了…吧？
什麼是 JSX？JAX 是一種 JavaScript 的語法擴充，官方推薦使用它來寫出使用者界面的外觀，而且 JSX 允許你使用 JavaScript 所有的功能。
從 Hello World 開始學 JSX
See the Pen First React - Hello World by Bucky Chu
(@bucky0112) on CodePen.
從上面的 CodePen 中，可以看到畫面顯示 Hello World，不過是怎麼動的呢？看一下程式碼：
1ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById("root"));
各位觀眾，這就是 JSX 了，看起來 JavaScript 裡面的結構跟一般的 HTML 差不多，其實把它當成是威力加強版的 HTML 就可以了（跟 Koe ...
