在接下來的範例中，比較沒辦法像之前的範例一樣直接丟到瀏覽器，檢查的開發者工具直接執行，需要建置基本的環境，我有想過幾種方式進行建置，甚至是在 codesandbox 直接線上進行，但比起線上的環境還是比較喜歡在本地端用 VS Code 進行開發，在追求方便簡單的前提下，選擇了 Vite 進行部屬。

環境建置前的準備-NPM(Node Package Manager)

在使用 Vite 部屬前需要安裝 node 套件管理器(npm)來方便進行 Vite 部屬，而 NPM 是 Node 的安裝管理套件，簡單來說就是綁定 Node，所以安裝 node 就可以使用囉!

Node 下載與安裝

Node.js:https://nodejs.org/en
推薦 LTS 版本，因為是長期維護的版本使用起來也會比最新版本還穩定，而安裝方式跟其他應用程式一樣簡單，只要一直按下一步就可以安裝完成了。

使用 Vite 進行環境建置

1.找到 VS Code 的終端機

2.輸入指令

npm create vite@latest //創建最新版本的專案

3.然後 vite 會詢問一系列的設定

(1)確定是否要執行程序=>按 y

(2)取專案名子=>可以隨便取或是用預設

(3)選擇哪一個框架=>選擇 React

(4)選擇使用哪一個語言=>選擇 JavaScript

(5)基本上就大致完成了，接下來是進行測試有無建置成功的部份，也很單純就照著 vite 提供的指令一行一行打就好了

  cd vite-project //切換到專案目錄的資料夾
  npm install //安裝模組
  npm run dev //開啟測試環境

4.如此一來就完成了，理論上應該是可以在下列網址(http://localhost:5173/)中看到下面的畫面
(1)終端機回饋的網址

(2)出現的測試畫面

5.操作的檔案位置(src=>App.js)
位在 src 資料夾的 App.js，未來的操作範例都可以在這個檔案進行。

總結

雖然步驟還是有點多或是有點麻煩，但如果要在本地端開發，這已經是相對簡單快速的方法了，明天就會正式進入 React 囉~

歷史發展

React 正式出現在眾人眼中是在 JSConf 上，來自原 Facebook 團隊 Jordan Walke 把一直以來在內部使用的 React 開源了，不過在當時的回響並不是很好，甚至受到了一些批評。

在開源團隊努力的推廣下，某些人開始慢慢發現 React 的好，隨之開源社群也慢慢建立了起來，到了 2016 年左右變成了一種主流框架，在那時 React 在前端圈子的地位被確立。

2019 年 Hook 被正式引入到 React 當中，同時也降低了學習成本，到現今 Hook 應該也是蠻多人會選擇開發的方式，也讓 React 使用人數持續成長，現在 React 應該還是使用人數最多的框架之一。

什麼是 React?

在主流的認知裡，大家常常提到的三大框架 Angular、React、Vue，式的沒錯大家是把 React 當作框架來看，但弔詭的是 React 的官方網站，卻開宗明義地強調”The library for web and native user interfaces”，React 是一個函式庫，就跟經典的 jQuery 一樣是一個函式庫，以此來強調 React 的輕量化及靈活性。

React 特色

1.元件化的特性，讓相似的區塊做成元件能重複使用

2.使用 JSX 語法，讓 HTML 標籤上可以使用 JavaScript 進行操作，大幅降低程式的複雜度，提升寫程式的效率

3.如果單獨元件有更新資料，可以只對單獨的元件進行重新渲染，不用刷新整個頁面

4.專注在畫面的呈現處理

為什麼選擇 React

綜合上述特色，加上龐大的使用者社群，在學習上的資源也相對多，雖然入門的門檻高了點，但跨過了，就可以感受到 React 的方便性了。

##參考資料
Origin Story: How A Small Team of Developers Created React.js at Facebook

React 官方網站

不知不覺鐵人賽已經寫超過一半了，用 JavaScript 水內容也水的差不多了 XD，但是我真心認為前面的內容都是我恨不得在學 React 之前能夠所學好的內容，至少在操做 React 的時候不會因為 JavaScript 而卡東卡西的，而且 React 本身已經夠難懂了。

在今天這個算是中場休息的時間，來稍微整理前面的內容，和提出接下來要進行的架構。依然是遵從本系列的定位，盡可能地減少在學習 React 之前的落差，所以並不會提到太多太難的內容，因為比較難的內容我相信版上已經有很多大神寫文章了，我能做到的是盡量地做銜接。

JavaScript 複習篇

Day1 參賽動機以及題目選擇和預計大綱
Day2 My VS Code Tour
Day3 查詢陣列的方法-forEach & map
Day4 操作陣列的方法 Part.1-push & pop
Day5 操作陣列的方法 Part.2-shift & unshift
Day6 其他的陣列方法 slice & splice
Day7 搜尋陣列的方法-find,findIndex & filter
Day8 字串陣列互相變化的方法 split & join
Day9 函式與箭頭函式
Day10 物件(Object)
Day11 解構賦值(Destructuring assignment)
Day12 其餘運算子 & 展開運算子(Spread Operator & Rest Operator)
Day13 JavaScript 模組(Modules)
Day14 同步&非同步(Synchronous & Asynchronous)
Day15 處理同步(Synchronous)和非同步(Asynchronous)的方法 Part.1
Day16 處理同步(Synchronous)和非同步(Asynchronous)的方法 Part.2-Promise
Day17 處理同步(Synchronous)和非同步(Asynchronous)的方法 Part.3-Async Await

React 預計大綱

Day19 React 介紹
Day20 React 環境建置
Day21 React 元件的形式
Day22 React 的語法-JSX
Day23 React 中的 JavaScript
Day24 React 的橋樑-Prpos
Day25 React 的渲染-JSX 與三元運算子的關係
Day26 React 的多重渲染-列表與 Key
Day27 React 的純函數元件
Day28 React 的 Hello World-Hook-useState
Day29 React 的玄學
Day30 總結

中場休息之小小心得

其實我很驚訝我能走到這裡，身為一個前端小菜雞，縱使知道自己寫的沒有很理想，但還是不知羞恥的寫下去，希望能透過這次的鐵人賽，能對這段時間的學習有個交代。

如果你是跟我一樣剛接觸 React 的新手或是讀到這裡的讀者可能對 React 產生一點興趣的人，期待我們能在各自的天空繼續走下去。

附帶一提，給想入門 React 的人一句”歡迎來到 React 地獄~”

Async Await

是 promise 的語法糖，這是一組雙生一對在正常的情況下無法分離的東西，那它是如何進行簡化的呢?
引用 MDN 解釋

當 async 函式被呼叫時，它會回傳一個 Promise。如果該 async 函式回傳了一個值，Promise 的狀態將為一個帶有該回傳值的 resolved。如果 async 函式拋出例外或某個值，Promise 的狀態將為一個帶有被拋出值的 rejected。

async 函式內部可以使用 await 表達式，它會暫停此 async 函式的執行，並且等待傳遞至表達式的 Promise 的解析，解析完之後會回傳解析值，並繼續此 async 函式的執行。

沒錯還是一如既往地讓人很難以理解，那就直接來看範例吧!會比較清楚一點，讓我們先回顧昨日的範例。

範例

Promise-昨日範例

依序 console.log() 出 1,2,3,4，但是 2,3 有 setTimeout，所以需要利用 new promise 進行處理然後回傳處理成功。

console.log(1);
new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log(2);
    resolve("success1");
  }, 1000);
})
  .then((res) => {
    console.log(res);
    return new Promise((resolve) => {
      setTimeout(() => {
        console.log(3);
        resolve("success1");
      }, 1000);
    });
  })
  .then((res) => {
    console.log(res);
    console.log(4);
  });

Async Await 語法

上述是單純用 promise 寫的那加入 async await 的改寫就變成下方的型式

async function callName() {
  console.log(1);

  await new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log(2);

      resolve("success1");
    }, 1000);
  });

  await new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log(3);
      resolve("success2");
    }, 1000);
  });

  console.log(4);
}

比較一下之後我們可以發現幾個特性: 1.把需要排列執行順序的非同步函式用 async function 全部裝在一起 2.把需要被處理或是等待執行的非同步掛上 await，這時 await 的作用就是讓程式執行完成後才會繼續 3.注意 awiat 裡面需要一個 promise 作為回傳

所以整理一下 Async Await 基本語法如下:

async function 函式名稱() {
  await new Promise((resolve, reject) => {
    放入需要被處理的非同步1;
  });

  await new Promise((resolve, reject) => {
    放入需要被處理的非同步2;
  });
}

如此一來簡單的 Async Await 語法架構就完成囉!

Async Await 錯誤檢查

但是，眼尖的朋友應該會發現少了什麼東西，那就是 resolve 或是 reject 的結果要麼處理呢?有一種方法就是直接還給它，因為 await 的語法會 return 一個 promise 物件，所以其實 ++promise 的.then()或是.catch()還是能用的++。

又或是出動我們的老朋友try catch協助我們確認程式有沒有被正確執行也是一種選擇。

下面的範例是採用第一種用.then 的方式去檢查

async function callName() {
  console.log(1);

  await new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log(2);

      resolve("success1");
    }, 1000);
  }).then((res) => {
    console.log(res);
  });

  await new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log(3);
      resolve("success2");
    }, 1000);
  }).then((res) => {
    console.log(res);
  });

  console.log(4);
}

總結

其實說穿了 Async Await 就是一個語法糖，所以只要了解了 promise 然後記住 Async Await 的架構，對於非同步的處理方法來說學習上並不會有太多的阻礙，而且反而能使用更簡單易讀的方法來處理非同步問題。

今天要來介紹的是現在比較常用處理非同步的方法分別是 promise，這裡會先大幅度的簡化 promise 的用法，來先理解整個 promise 的運作概念。

promise

1.創建 promise: 為什麼需要創建 promise 因為它是一個建構函式，所以需要使用關鍵字 new 去創建 promise，裡面帶兩個參數分別為 resolve, reject。
resolve:代表執行成功地回傳值
reject:代表執行失敗的回傳值

2.then&catch: .then()代表著 promise 執行成功後所需要執行的區塊，而且可以接 reslove 的回傳值;.catch()代表 promise 執行失敗後所需要執行的區塊，而且可以接 reject 的回傳值。

3.then 串接: .then 是可以串接的，甚至是可以在 then 裡面再多 new 一個 Promise 物件，來處理多個非同步的問題

綜合上述提到的三點，範例如下:
我需要依序 console.log() 出 1,2,3,4，但是 2,3 有 setTimeout，所以需要利用 new promise 進行處理然後回傳處理成功。

new Promise((resolve, reject) => {
  console.log(1);
  setTimeout(() => {
    console.log(2);
    resolve("success1");
  }, 1000);
})
  .then((res) => {
    console.log(res);
    return new Promise((resolve) => {
      setTimeout(() => {
        console.log(3);
        resolve("success1");
      }, 1000);
    });
  })
  .then((res) => {
    console.log(res);
    console.log(4);
  });

今天就先簡單介紹現在處理非同步的方法，但是強調 promise 還有很多種用法，但如果以一個初學的角度來看還是先熟悉基礎用法，會在使用上比較不容易造成混淆

事實上，ES6 之後還有一個語法 async await，它是 promise 的語法糖，在寫法上比 promise 更簡潔易懂，這部份就留做明天來介紹吧~

非同步所造成的問題

昨天介紹過了什麼是同步和非同步，今天要來介紹的是處理的方法，也就是說要來處理非同步所產的不確定性帶來的問題，比較具體的例子如下:

這是一個經典的例子，我期望的是 console.log()的順序為 1,2,3，但其實執行的結果為 1,3,2。
這是因為 setTimeout 產生了非同步行為，在 JavaScript 當中程式並不會等 setTimeout 執行而是會先把它丟到旁邊往下走等到時間到才會回來執行 setTimeout。

但是這樣就達不到我的需求，於是就產生了相對應的處理方法

console.log(1);
setTimeout(() => {
  console.log(2);
}, 1000); //setTimeout的意思是等多久才會執行，參數為1個回調函式+毫秒數這裡為1000
console.log(3);

處理非同步的方法

1. 回調函數（Callback Functions）： 回調函數是處理非同步非常古老的一種方法，有名的 callback Hell 就是因此誕生了，現在這個方法很少被使用，但還是介紹一下，其原理就是利用函式需要被呼叫的特性來達成想要程式執行的先後順序。利用上述的例子說明:

function call1() {
  console.log(1);
}
function call2(callback) {
  setTimeout(function () {
    console.log(2);
    callback();
  }, 1000);
}

function call3() {
  console.log(3);
}

function callNumber(call1) {
  call1(call2(call3));
}

callNumber(call1);

就會長出上面這種奇形怪狀不易閱讀的程式碼，所以 ES6 就發明出更簡潔的 Promises 語法還有 async await 提拱使用，這些就留到明日在做介紹。