# Web 企業運算 - Week 12 ( 6/2 - 6/9 )

數科碩一 M0861101 許家維

### 本週自學清單
1. React 官方文件閱讀 https://zh-hant.reactjs.org/
2. React 基本操作練習 install、render、props、states...etc
3. 本文連結 : https://hackmd.io/qyEtWZUgRXez8IyUjObvFg?both
### 上課內容程式碼
**一、簡易計時器**
index.js
<br>
Timer.js
<br>
完成畫面(加入適當CSS修飾)
<br>
**二、faker_db 資料抓取**
faker_db.js - 抓取資料格式
<br>
data.js - Show Data
<br>
執行結果
<br>

### 學習筆記
* React 是什麼 ?
* React 是一個陳述式、高效且具有彈性的 JavaScript 函式庫，用以建立使用者介面。它讓你使用小巧而獨立的「**component**」，來建立複雜的 UI。
* 範例程式
* 
* ShoppingList 是一個 React 的 component class，Component 會接受名為 props 的參數（「properties」的簡稱），並透過 render 這個方法回傳一個有階層架構的 view 到螢幕上。
* **render 回傳的是一個 React element**，也就是一個 render 內容的輕量描述。大部分 React 的開發者會使用一種特殊的語法，被稱為「JSX」。div語法在構建時被建立為 React.createElement('div')
* JSX
* 看看這段程式碼 ```const element = <h1>哈囉！</h1>;```
* 這個語法叫做 JSX，是一個 JavaScript 的語法擴充。我們在寫 React 的時候透過這個語法來描述使用者界面的外觀
* 在 XML 之中，如果一個標籤是空白的，你可以用 **/>** 立刻關閉這個標籤
* EX.```const element = <img src={user.avatarUrl} />;```
* Babel 將 JSX 編譯為呼叫 React.createElement() 的程式。以下兩例完全相同(Babel將JSX轉成JS)
* 
<br>
* 
* Render Element
* 假設你的 HTML 檔案內有一個 div ```<div id="root"></div>```
* 我們稱為這是一個「root」DOM node，因為所有在內的 element 都會透過 React DOM 做管理
* 使用 React 建立應用程式時，通常會有一個單一的 root DOM node。如果你想要整合 React 到現有的應用程式時，你可以根據你的需求獨立出多個 root DOM node。如果要 render 一個 React element 到 root DOM node，傳入兩者到 ```ReactDOM.render()```
* 範例

        const element = <h1>Hello, world</h1>;
        ReactDOM.render(element, document.getElementById('root'));

* Components 與 Props
<br>
* 讓我們來複習一下這個例子發生了什麼事：
1.我們對 ```<Welcome name="Sara" />``` 這個 element 呼叫了 ```ReactDOM.render()```。
2.React 以 ```{name: 'Sara'}```作為 props 傳入 Welcome component 並呼叫
3.Welcome component 回傳了 ```<h1>Hello, Sara</h1>``` 這個 element 作為返回值
4.React DOM 有效的將 DOM 更新為 ```<h1>Hello, Sara</h1>```
* **注意： Component 的字首須為大寫字母 !!!**

* Covert Function Component to Class
1. ```class Clock extends React.Component ``` : 建立一個相同名稱並且繼承 React.Component 的 ES6 class
2. 加入一個 render() 的空方法
3. 將 function 的內容搬到 render() 方法
4. 將 render() 內的 props 替換成 this.props
5. 刪除剩下空的 function 宣告
<br>

* State 和生命週期
* State 類似於 prop，但它是私有且由 component 完全控制的
* 加入 Local State 到 Class
* 將render() 方法內的 this.props.date 替換成 this.state.date
* 加入一個 class constructor 並分配初始的 this.state
* Class component 應該總是要呼叫基礎 constructor 和 props

* 建立 React App
1. ```npx create-react-app app ``` : npx是npm 5.2 + 附帶的 package 執行器。而Create React App 並不會處理 backend 邏輯或資料庫；它只會建立一個 frontend build pipeline，以便你配合任何 backend 來使用
2. ```cd app ``` : 移動目前位置到app資料夾
3. ```npm start ``` : 開啟react server

### 本周心得
本週老師帶我們入門了目前前端三大框架內最多人使用的React，由於這次的內容較多，我下課後也利用時間從零開始閱讀React的官方教學文件，先認識基本的render、state等等用法。再透過練習上課所學的範例，讓自己更熟悉React的基本操作。這學期的課即將結束了，目標是前端工程師的我受益真的非常多，希望自己以後能努力熟悉一個框架，讓自己在出社會後能更有競爭力