---
# System prepended metadata

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

---

# 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
![](https://i.imgur.com/bSYFdOG.png)
<br>
Timer.js
![](https://i.imgur.com/2fF4KC3.png)
<br>
完成畫面(加入適當CSS修飾)
![](https://i.imgur.com/4dNOtuu.png)
<br>
**二、faker_db 資料抓取**
faker_db.js - 抓取資料格式
![](https://i.imgur.com/XNu8Ul3.png)
<br>
data.js - Show Data
![](https://i.imgur.com/O5Rahgh.png)
<br>
執行結果
![](https://i.imgur.com/YGS4tzC.png)
<br>






### 學習筆記
* React 是什麼 ?
    * React 是一個陳述式、高效且具有彈性的 JavaScript 函式庫，用以建立使用者介面。它讓你使用小巧而獨立的「**component**」，來建立複雜的 UI。
    * 範例程式
    * ![](https://i.imgur.com/q40eryD.png)
    * 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)
    * ![](https://i.imgur.com/bC6S00i.png)
    <br>
    * ![](https://i.imgur.com/Layuib2.png)
* 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
    ![](https://i.imgur.com/8go1GHV.png)
    <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 宣告
![](https://i.imgur.com/NCNM2Fd.png)
<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的基本操作。這學期的課即將結束了，目標是前端工程師的我受益真的非常多，希望自己以後能努力熟悉一個框架，讓自己在出社會後能更有競爭力