React 的 props 運用
在 React 中，元件之間資料的傳遞都是由父元件傳給子元件的單向數據流，本篇文章將會講到如何使用 props 來傳遞資料。
上一篇講到 component 的使用，但是有些時候想要另外客製化不一樣的內容的話，不就還要做出好幾個不一樣的 component 嗎？
例如下面的 Codesandbox 有兩個 button，按下按鈕就會跳出訊息。
但是如果想要做出一個 component，然後內容不要寫死可以自定義的情況下，該怎麼做呢？
props 的運用這時候就可以透過 props 來做出想要的效果，例如在 CustomButton.js 這個 component 中：
加入參數 props。
123const CustomButton = (props) => { return <button></button>;};
定義一個變數並使用它，等等可以在父層輸入客製化內容。
1234const CustomButton = (props) => { const msg = props.text; r ...
在 CRA 專案中管理 components
在一個專案中，通常不會在一個頁面放入太多的 HTML 結構，這樣會變得難以維護。前面也有提到如何拆分成 component，本篇文章則是講解如何在透過 creat-react-app 的專案中，管理各個 components。
先來看 CodeSandbox 的範例：
可以看到在 App.js 中有 3 個區塊，分別是 head、content、footer。前面的文章有提到如何拆分成 component，所以就來依樣畫葫蘆。
分成 3 個 component1234567891011121314151617const Head = () => ( <div className="head"> <h1>Head</h1> </div>);const Content = () => ( <div className="content"> <h2>This is content.</h2> </div>);const ...
偽類選取器之 :nth-child() 和 :nth-of-type()
最近都在忙著面試，有些面試官人很好，如果有不懂的地方，他們會試著教你，所以我也藉由面試學到了蠻多東西（真的謝謝面試官大大）。 像是學到了 :nth-child() 跟 :nth-of-type() 這兩個的用法，回家也試著玩了一下，蠻有趣的，之後可以運用在 side-project 看看，這篇文章先來介紹這兩者的使用方法。
蝦米是 pseudo-class？pseudo-class，中文是偽類選取器，是 class 的一種，都是由一個冒號作為開頭，例如常見的 :hover。
:nth-child() 怎麼用？不囉嗦，直接看用法
See the Pen choose num 4 by Bucky Chu
(@bucky0112) on CodePen.
可以看到如果想要指定某個物件改變樣式的話，就可以使用 :nth-child(n)，數值從 1 開始算起，所以如果要選第 4 個，那就是輸入 4；如果要選擇 1、2、5 的話，就可以這樣寫：
12345ul :nth-child(1),ul :nth-child(2),ul :nth-child(5) { co ...
React 的表單輸入運用
在 Vue 中使用 v-model 來做表單輸入時非常好用，那麼在 React 中可以怎麼運用呢？本篇文章將會介紹該怎麼利用 Hook 來做類似的效果。
利用 useState 綁定數值首先，先看一下完成的程式：
See the Pen React 的表單輸入運用 by Bucky Chu
(@bucky0112) on CodePen.
當輸入數字時，另一個顯示的欄位就會即時顯示輸入的數字，那麼就一步一步地來看是如何做出來的。
載入 useState 方法
1const { useState } = React;
使用 useState 方法
12// [state, '改變 state 的方法'] = useState(預設值)const [inputNum, setInputNum] = useState(0);
定義事件處理器
12345// 在 React 中，一般會使用 handle 開頭命名事件處理器const handleInputNum = (e) => { const { val ...
用 Create React App 來建立專案吧～
在逛 GitHub 看別人的 React 專案時，似乎都是使用 Create React App 來開發居多，比較少見使用 CDN 的模式，所以本篇文章將會講解如何入門使用 Create React App 來建立一個專案，並會簡單跟 Vue CLI 做一下比較。
什麼是 Create React App？Create React App (CRA) 是一款由 React 官方開發的 CLI 工具，可以讓開發者不用再擔心建置環境，可以專心地寫 Code 就好。
開始專案首先開始之前，要先確認一下電腦中是否有 Node.js 跟 NVM，還沒安裝過可以看一下我在 Vue CLI 的教學。
都搞定之後，就可以來使用 Create React App 了。
在終端機輸入指令，在 create-react-app 後面的就是要建立的專案名稱，接著就會開始建置專案：
1$ npx create-react-app first-app
完成之後就 cd 到專案資料夾中，並執行指令啟動 React 專案：
12$ cd first-app$ npm start
沒問題的話，就會自動開啟瀏覽器 ...
React Fragment 的標籤好適合懶人工程師啊～
在使用 Vue 的 template 模板時，如果有多個 HTML 標籤的話，就必定需要一個 <div> 包起來才能運行。而 React 在 JSX 中也是一樣的，只是它多了一個選擇可以用，而且更精簡，看起來就跟沒有一樣呢～
JSX 只能夠有一個最外層元素JSX 只能夠有一個最外層元素是什麼意思？就像下面的例子中，如果把 <div className="container"> 給拿掉的話就會無法運作，所以一定要有一個 <div> 在最外層包起來。
12345678910111213141516171819202122const Counter = () => { const [count, setCount] = useState(0); return ( <div className="container"> <div className={`plus ${count >= 10 && " ...
在 JSX 使用迴圈
使用 Component 就是可以像積木一樣一直組裝，而且不會互相干擾資料，因為每個都是獨立的狀態。不過如果需要大量放置 Component 的話，那麼就可以試試看迴圈，本篇就來講解怎麼在 JSX 中使用迴圈。
Render 多個 Component在一般如果數量不大時，想要顯示多個 Component，比較直覺的作法可能就像堆積木一樣，一個一個組裝就可以了。
12345678910ReactDOM.render( <div> <Counter /> <Counter /> <Counter /> <Counter /> <Counter /> </div>, document.querySelector("#root"));
See the Pen React counter use css class by Bucky Chu
(@bucky0112) on CodePen.
但是如果是大量的 Component 的話，總不 ...
使用 Actions 跟 Mutations 來改變資料狀態
上一篇已經初步了解 State，這篇繼續試著了解怎麼透過 Actions 跟 Mutations 來改變 State。
Actions 跟 Mutations 如何改變資料先看官網的 Vuex 的週期介紹圖，如果 Component 要改變 State 的話，就要透過 Actions 發出 Commit 去呼叫 Mutations，藉由 Mutations 去改變 State。
如何使用我在 CodeSandbox 建立了一個 Vuex 來模擬變更資料，當按下 Click Me 按鈕，原本顯示在頁面上的 Hello Vuex 會變更為 Good Job，在過 5 秒後則會再變更為 Try Again，就可以繼續按，觀察資料如何變更。
首先在 State 中設立一筆資料
123state: { testWord: "Hello Vuex"}
接著就可以透過 Actions 跟 Mutations 來改變資料：
在 Actions 及 Mutations 加入：
12345678910mutations: { CHANG ...
用 Vuex 來管理 State 資料狀態
在之前的專案中，如果碰到要資料傳遞的部份，例如是父子層關係的話，只要用 props 跟 emit 就可以解決了，而遇到同階層的關係，就用 $eventbus 來處理，不過這個方法只能處理比較簡單的資料，而且在 Vue 3 也不支援了。不怕，總是有技術可以解決問題，所以就從 state 開始來學學 Vuex 吧～
什麼是 Vuex？Vuex 是 Vue 官方開發的一種狀態管理模式，它的設計是把所有元件的狀態集中式管理，放在一個 store 裡面。以下是 Vuex 的處理方法：
12345Vuexstate ----------> 資料狀態，類似 component 中的 dataactions ---------> 跟 methods 一樣，進行非同步的行為及取得資料getter ---------> 跟 computed 一樣，資料呈現的方式mutations -------> 改變資料內容的方法
怎麼使用 state？由於 State 就跟 Data 差不多概念，只是 State 是一個統一存放在 Vuex 的 Store 中的 Data，要使用的話 ...
React 動態加入 CSS
前面提到如何使用邏輯運算子來判斷顯示加號減號，這篇則是介紹其他方式，也就是使用 CSS 來動態將 HTML 元素隱藏起來。
visibility 與 display 的差異首先，要先了解 visibility: hidden 與 display: none 這兩個的運用有什麼差異。
visibility: hidden：當隱藏元素時，原本的元素依然存在佈局中。
display: none：當隱藏元素時，該元素會在原本的佈局移除。
根據以上條件的不同，選擇使用 visibility: hidden 會是不錯的作法。
動態加入 CSS在前面的筆記中有提到如何加入 inline-style，這邊就再加入邏輯運算子來判斷，當 count >= 10 就執行 visibility: hidden：
123456789<div className="plus" style={{ visibility: count >= 10 && "hidden" }} onC ...
