> Udemy課程：[React - The Complete Guide 2023 (incl. React Router & Redux)
](https://www.udemy.com/course/react-the-complete-guide-incl-redux/)

## 1-3. ReactJS vs "Vanilla JavaScript": Why Use React?
### Declarative VS. Impretive

* **Declarative programming（宣告式程式設計）**
> Declarative is What's stuff

表達計算的邏輯而不用描述它的控制流程

* **Imperative programming（指令式程式設計）**
> Imperative is How to do stuff.

幾乎所有電腦的硬體都是指令式工作；幾乎所有電腦的硬體都是能執行機器語言，而機器碼是使用指令式的風格來寫的。較高階的指令式程式語言使用變數和更複雜的語句，但仍依從相同的典範。菜譜和行動清單，雖非電腦程式，但與指令式程式設計有相似的風格：每步都是指令。因為指令式程式設計的基礎觀念，不但概念上比較熟悉，而且較容易具體表現於硬體，所以大部分的程式語言都是指令式的

大部分的高階語言都支援四種基本的語句：

1. ++運算語句++一般來說都表現了在記憶體內的資料進行運算的行為，然後將結果存入記憶體中以便日後使用。高階指令式程式語言更能處理複雜的表達式，可能會產生四則運算和函式計算的結合。
2. ++迴圈語句++容許一些語句反覆執行數次。迴圈可依據一個預設的數目來決定執行這些語句的次數；或反覆執行它們，直至某些條件改變。
3. ++條件分支語句++容許僅當某些條件成立時才執行某個區塊。否則，這個區塊中的語句會略去，然後按區塊後的語句繼續執行。
4. ++無條件分支語句++容許執行順序轉移到程式的其他部分之中。包括跳躍（在很多語言中稱為 Goto）、副程式和 Procedure 等。

迴圈、條件分支和無條件分支都是控制流程。

****

## 1-5. About This Course & Course Outline
這門課程會學習到的內容：


****

## 1-10. Creating React Projects Locally

<div style="background-color: #deeba2; color: #4b570e; margin: 10px 0; padding: 10px 20px; width: fit-content;">
Step 1.
</div>

<div style="border: 1px solid black; margin: 20px; padding: 20px; width: fit-content;">
下載<a href="https://nodejs.org/zh-tw">Node.js</a>
<img src="https://hackmd.io/_uploads/ryIXIoPth.png"> </img>
</div>

<div style="background-color: #deeba2; color: #4b570e; margin: 10px 0; padding: 10px 20px; width: fit-content;">
Step 2.
</div>

<div style="border: 1px solid black; margin: 20px; padding: 20px; width: fit-content;">
接著就可以利用Node.js的套件管理工具npm進行安裝React的環境。首先在電腦桌面打開終端機（terminal）（亦即終端機目前所在檔案位置為桌面），並且於終端機中輸入：
<pre class="lang-js s-code-block">
npx create-react-app my-app
</pre>

此時npm便會幫你安裝且建置好一個React專案"my-app"。
PS "my-app"為專案名稱，可自行改成任意名稱。

<img src="https://hackmd.io/_uploads/r14g5owtn.png"></img>
</div>

<div style="background-color: #deeba2; color: #4b570e; margin: 10px 0; padding: 10px 20px; width: fit-content;">
Step 3.
</div>

<div style="border: 1px solid black; margin: 20px; padding: 20px; width: fit-content;">
利用cd進入到"my-app"的檔案位置。
<pre class="lang-js s-code-block">
cd my-app
</pre>
<img src="https://hackmd.io/_uploads/BkWGciPF3.png"></img>
</div>

<div style="background-color: #deeba2; color: #4b570e; margin: 10px 0; padding: 10px 20px; width: fit-content;">
Step 4.
</div>

<div style="border: 1px solid black; margin: 20px; padding: 20px; width: fit-content;">
最後在終端機打上`npm start`，便可以透過http://localhost:3000（預設為3000）打開"my-app"專案：
<pre class="lang-js s-code-block">
npm start
</pre>

當有跳出React的網頁（如以下畫面）即成功建置React專案！
<img src="https://hackmd.io/_uploads/Bk5t9owKn.png"></img>

<img src="https://hackmd.io/_uploads/Skjt5sDth.png"></img>

PS 若想離開、關掉，則在終端機按下`ctrl`+`c`
</div>