30DaysChallenge 是自主性每兩天寫一篇技術相關的部落格

React

認識 React

(圖片來源：https://miro.medium.com/max/2568/1*GEVBYK_t2QirtIhCJwrxvA.jpeg)

前端其實有很多框架，但現代框架中以 Angular、React 以及 Vue 較為普及。

框架三者其實都大同小異，無疑都是透過框架來使開發更快速且多元，但 React 跟其他兩者最大的差別在於，React 只是個 Libary，比起另外兩個似乎沒那麼方便，但也因此比較彈性，社群也比較廣。

---

React

React 官網

React 的文件有中文以外，說明其實還蠻清楚的，只要對 HTML 與 JS 有一定程度的認知，學習曲線也不用怕太高 XD?

React 的特性：

• 宣告式：比起一條一條的命令式，手把手帶大，宣告式就象直接給電腦一張設計稿，照著做就對了！

• 元件：Component，將畫面分割成一塊一塊的區塊，在其他框架也常見。除了關注點分離之外，重複的地方開發一次就能重複使用。

---

JSX

在 React 中，每個元件是都是函式，每個函式都是元件(嗯?XD)

JSX 是可以在 JS 裡面使用其他語法的語法糖，會直接在 JS 裡面寫出 HTML/XML 的架構(設計圖)。

所以，元件是由 Js Function 實作出來，當然也會看到使用 ES6 的 class 撰寫，但 class 基於 function 的概念!

//Example from 官方
const name = "Josh Perez"
const element = <h1>Hello, {name}</h1>

---

元件

每個元件只能 return 一個 root element，從頭到尾巴都要完美的包好 close!

//Button 元件
const Button = () => {
  return (
    <div>
      <button>CLICK!</button>
    </div>
  )
}

//某個不合法的元件
const Button = () => {
  return (
    <button>CLICK!</button>
    <button>CLICK!</button>
  )
}

Component Tree

對 DOM 很熟悉的你，那也可以很快知道，樹狀結構。

除了把元件區塊化之外，每個元件的層級關係是一種樹狀結構，也會影響上下資料的傳遞性。

---

接下來再更進入 React 的世界吧…

請等候下篇生產