網頁日記 # 8｜Iris 程式小白

操作完簡單的 Javascript 實作後，馬上來進到下一步 —— 認識重量級函式庫！

那～ 我們馬上來看看 React.js 能帶給我們哪些便利之處吧～

本篇日記針對 React 的十大特點做概括性的介紹 希望新手朋友們看完此篇對於 React 就能有最基礎的認識＆了解 😆

1. React 超基本介紹

• 為 Javascript 的函式庫
• 用於建造可重複使用、元件化、具互動性的 UI (User Interfaces) 使用者介面
• 打造 SPA (Single Page Application) 單頁式應用程式

2. 環境 IDE

React 可直接性的在 HTML 中撰寫，但需要額外導入三行程式碼，分別是 React、ReactDOM 和 Babel （Babel 用於解讀 JSX）。

<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>

<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

<script src="https://unpkg.com/[email protected]/babel.min.js"></script>

但若有真實產出需要，上述將 React 寫在 HTML 的方法可能還不足以應付開發需求，那這時你就會需要安裝 NPM、Node.js 和 create-react-app，安裝完畢上述三者後再輸入命令 npx create-react-app my-app 後於 terminal 下指令 npm start 就能打開瀏覽器（http://localhost:3000）檢查安裝結果了👍 正確的執行結果你應該會看到 React 的 logo 在轉，搭配「Welcome to React」的字樣

3. Virtual DOM

不會直接操作瀏覽器的 DOM，改採智慧式「需更新再更新」模式，先將原始 DOM 和 React 的虛擬 DOM 比照，再將更動之處同步 DOM 到記憶體上，減少重新操作的時間成本和記憶體的損耗。

4. Class 

我們在寫 Javascript 時常常聽到的 ES6 (ECMAScript 6) 寫法也可以用於 React，常見的功能有：class、arrow function 和 let & const，有鑒於前面幾篇日記已經多次聊到 block scope 和 let & const 的用法（arrow function 箭頭函式也在白科圖鑑中談過），這裡就先不贅述後兩者，今天就著重介紹 class

首先，帶大家看看最簡易的 class 寫法

class Color {

constructor (name) {

this.hue = name;  

}

dress () {

return ‘She is in ’ + this.hue + ‘dress’; 

}

}

mycolor = new Color(“red”); 

mycolor.dress(); // She is in red dress

class 其實就是一種變形的函式 (function)，其寫法為直接將 class 寫出，用以製造一個新的類別～  By the way, 建立一個 class 需要 constructor 的協助，好比說初始化物件的狀態、property 和 method 

class Fashion extends Color {

constructor(name, trd) {

super(name);

this.trend = trd;

}

statement () {

return this.dress() + ‘, she is a ’ + this.trend + ’icon.’

}

}

mycolor = new Fashion (“red”, “Gucci”);

mycolor.statement(); // She is in red dress, she is a Gucci icon.

當然，為了提升撰寫效率，class 允許「繼承 (inherence)」功能，為的就是將已經寫好的 method 傳遞給其他擁有相似特徵的 class。操作上很簡單，只需要使用關鍵字 extends 就可以將寫好的 class 有效率地套用在其他需要的 class 之中。另外，在 constructor 裡呼叫 super 關鍵字代表的就是直接性的參照父類別 (parent class)，將父類別的 property 和 method 移植到子類別之中

與 class 相對的概念就是 React 中的 functional component。顧名思義 functional component 就是直接從 Javascript 的 function 延伸出來的寫法， 在寫法上 functional component 沒有狀態（stateless)，也沒有 this，相較於 class component 也比較簡潔、乾淨，當然這也關乎到執行的效能和效率

🦘補充：React 16.8 的 Hook 使 functional component 也能「勾」上類似 state 的功能，如此一來就可以更簡潔、快速的表達 state 和生命週期，而 hook 的種類有 useState、useEffect、useContext 等等

function Welcome(props) {

  return <h1>Hello, {props.name}</h1>;

}

export default Welcome; //

5. Render & return

Render 看起來很玄妙，不過其實就是將元素渲染到 DOM 上的過程，最經典也是最常見的 render 案例就是 ReactDOM.render()，ReactDOM.render() 負責的是最後輸出的關鍵任務，將 React 中虛擬 DOM 元素轉變為實體 DOM 元素

function Welcome(props) {

  return <h1>Hello, {props.name}</h1>;

}




const element = <Welcome name="Sara" />;




ReactDOM.render(

  element,

  document.getElementById('root')

);

class Welcome extends React.Component {

  render() {

    return <h1>Hello, {this.props.name}</h1>;

  };

};




ReactDOM.render( Welcome , document.getElementById('root'));

Class component 透過 render 產出虛擬 DOM；則 Functional component 會透過 return 回傳預先建立的虛擬 DOM， 因此我們可以透過兩者來建立視覺元件，前者的方法運用了 ES6 的特性，是使用了class 處理，後者使用 React 16.8 hooks 搭配進行元件化。 

6. JSX

JSX 指的是 Javascript Syntax Extension，也就是 Javascript 和 XML 的語法混合體，因此剛開始學習時會有種似曾相似又陌生的感覺。最經典的例子如以下（參考官方網站）：

const element = <h1>Hello, world!</h1>;

若僅使用 Javascript 撰寫，會需要額外寫非常多 code（像是React.createElement 等等），請看以下：

var element = React.createElement(

  "h1",

  null,

  "Hello, world!"

);

由以上兩個例子我們就會發現到 JSX 的迷人之處，JSX 合併了 HTML（也就是 markup）和Javascript 的邏輯，集結成的綜合體恰好成全了 React component 的便利性。當然，我們可以選擇 JSX 的方式寫 React，也可以捲起袖子毛起來刻 Javascript～ 但相對的在效率和除錯上就會有許多不利的地方，以下是 JSX 經典範例：

const name = 'Josh Perez';

const element = <h1>Hello, {name}</h1>;

如果在 HTML tags 中要加入 Javascript 的表達式，則需要使用花括號 { } 包裹，如以上範例的 name。另外，Javascript 的表達式有非常多種，包括簡單的加減乘除、節點、函式… 

7. Component

Component 是 React 中最小的單位，也是一個網頁的組成要素。換句話說，每個使用 React 寫的網頁的任一個小功能、小區域都是由 component 構成（你可以把 component 想成是一塊塊的樂高，透過不斷堆疊、組合、變化，最後組合成或大或小的成品… 一面牆、一輛車、一間房子、一個網頁元素… ），這樣的 component 不難想像十分有彈性，不僅能重複使用也能獨立存在

🧬 Component 特性列舉：

• 可大可小
• 可重複使用、彈性高
• 大寫表示

🧯注意：習慣上只要為 React component 都以大寫字母開頭為主，小寫則是保留給 HTML 元素

8. Prop, State

接著我們來介紹 React 中非常重要的兩個觀念：prop 和 state，以下會條列出他們各自的特性，讓你們更認識這兩個核心的觀念

Props 

• 為 property 的縮寫
• Read-only 唯讀：表示 coder 不能隨意更改 props 的值，這樣一來可以確保資料的正確性和完整性，也能使資料處理上更加穩定、安全
• props 為繼承而來（由父元件傳至子元件）

State

• state 可自行定義，也可更改（若需更改則使用 this.setState）
• state 的更改可為非同步 (asynchronous)
• 僅能作為 props 傳遞到子元件，不能直接傳遞

9. Event

React 中的事件如 HTML 上操作一般，有 click、change、mouseover 等事件

🧯注意：Event 需要以 camelCase 命名，且事件控制 (event handler) 須寫在花括號內；JSX 是以 function 傳遞事件控制，而非字串 (string) 

10. Lifecycle

React 的生命週期有三階段，分別是 Mounting、Updating 和 Unmounting，這三個階段可能從 3 > 1 > 2 （方法於事件發生前執行）或是 1 > 2 > 3 （方法於事件發生後執行）都有可能

首先，Mounting 階段我們會將元素放入 DOM 中，以下是在 Mounting 你會看到的方法：

constructor() 

getDerivedStateFromProps()

render()

componentDidMount()

四個方法中唯獨 render() 是每次更新 props 和 state 必須，其他都是可加可不加。若沒有執行 render()，就無法將產出渲染至 DOM 上，也算是做白功了。  

第二階段：Updating 更新

當元件 (component) 的 state 或 props 有變動時，元件就會重新被更新過一輪，那更新的過程就會需要用到以下五種方法～ 同理，render() 是唯一的必須

getDerivedStateFromProps()

shouldComponentUpdate()

render()

getSnapshotBeforeUpdate()

componentDidUpdate()

最後，Unmounting 卸載

這個階段相對簡單和單純，僅有一個 componentWillUnmount() 負責將元件移除 DOM

介紹完十個 React.js 知識點～ 相信你們應該對於 React 的使用和寫法有一定的瞭解🤩 那如果身為 Javascript 或 React 覺得我的日記對你的學習有幫助，也歡迎你加入「程式小白學習群」～

小白群是什麼？ 在幹嘛？

• 小白群由文科小白所創，希望幫助學習 Python & Javascript 的朋友們度過難熬的撞牆期
• 加入小白群能和同樣在努力學習程式的朋友們交流切磋
• 我也會在小白群釋出最新的文章和學習資訊～ 在初學之路的朋友千萬別錯過了喲🤩

參考資料：

1. https://medium.com/@madhupathy/learn-basics-of-react-js-in-3-minutes-a94cbc6f02c8
2. https://dev.to/spectrumcetb/beginner-s-guide-to-react-js-15lm
3. https://www.fooish.com/reactjs/handling-events.html
4. https://www.google.com.tw/amp/s/www.freecodecamp.org/news/react-components-jsx-props-for-beginners/amp/
5. https://blog.kalan.dev/function-component-to-hooks/
6. https://hugh-program-learning-diary-js.medium.com/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6-react-%E7%94%9F%E5%91%BD%E9%80%B1%E6%9C%9F-ec100a159e1e
7. https://www.w3schools.com/react/react_events.asp
8. https://reactjs.org/docs/components-and-props.html