Javascript 學習日記｜Iris 程式小白 ＃6

Javascript在紅什麼？快跟著網頁設計小白🙆‍♀一起速速了解JS吧！

這篇文章專給…

• 彷彿聽過，對JS 似曾相似，但從來沒有真正了解
• 愛用Google analytics & inbound marketing (Hubspot) 的行銷人
• 覺得跟前端工程師錯頻，想了解一下他們星球的語言
• 想學互動式網頁設計，創建屬於自己的第一個網頁天堂

接續 JS ES6，趁著對 ES6 記憶猶新，跟著程式小白🙆‍♀一起來簡單認識👀 React JS吧！

📌 Dear Diary📒, 到底什麼是 React JS？ React JS 又能做些什麼呢？

React JS 通常被廣義地稱作為前端的框架＆函式庫（狹義的函式庫），於 2013 年由Facebook 公司中的軟體工程師 Jordan Walke 創造（剛推出時原名：FaxJS），近年來在前端開發工具的地位與 Vue 和 Angular並稱三雄。

根據 React 官方網站 介紹：「React 是一個陳述式、高效且具有彈性的 JavaScript 函式庫，用以建立使用者介面。它讓你使用小巧而獨立的 component，來建立複雜的 UI。」以下會更進一步說明 React 的特性和優缺！

📌 Mayday Mayday Mayday📣,  React JS 的魅力在哪裡？

這裡我們看到三個官方主打的 React 特點：

1. 宣告式 Declarative

React 能輕易地創造具互動性使用者介面 (UI) 和設計簡易的視圖。同時，當我們宣告資料狀態改變時，它能立即並有效地自動更新和渲染，使除錯和預測更為容易。

2. 元件導向 Component-based

React 透過元件的封裝、組合和獨立運行性來創建更複雜、嚴密的使用者介面。另一方面，由於元件邏輯撰寫於 JS 中，在數據的取得上不需透過 DOM 即可由 APP 獲取。

3. 高度應用 Learn once, write everywhere 

使用 React ，開發者不再需要自行編寫已存在的代碼，就能輕鬆開發新功能。React 也能透過事先執行，將 Node 和 React Native 渲染在伺服器和手機 app 上。

🦖 恐龍君名詞小補充：

1/ Component 元件（aka. 樂高）：前面有提及 React 的根本即是元件，因此我們也可以說 React 整體架構為多元件的排列組合。我們可以利用元件拆分使用者介面 (UI)，並將獨立＆可重複使用的程式碼應用在更多思考層面的解決問題之上

2/ State：顧名思義為元件的狀態，當原本儲存的資料數值更動時，我們必須呼叫 setState 函式，React 會即時更新元件的狀態，並重新呼叫 render 函式，最後把更新後的狀態呈現在畫面上。

3/ Props (properties)：為元件之「屬性」；基本上 props 是不更改的 (immutable)。父元件完全決定了 props 的型態、樣式和數值；這樣的資料傳遞方式為單向（綁定）、嚴謹的。

💊 小結：React 中的元件有 state 和 props，不過元件本身僅能改變其狀態 (state)，特性 (props) 的部分由父親繼承下來，無法更改 (read-only)。

📌  React JS 的優點：

1. 虛擬化 DOM   ➔ Virtual DOM

以往網頁更新都需要重新載入，但當引入 React 開創的 Virtual DOM 後，React 自建的記憶體中會出現相似於 DOM 的虛擬樹狀層級結構。當資料 (props 或 state) 做改變時，React 會先開啟 Diff 演算機制，逐一比對不同之處後在將改變部分渲染到真實的 DOM 上。這樣一來可以優化 DOM 的操作，也可以使開發者不再受制於效能方面的考量。 

2. JSX 語法  Javascript Extensive Syntax 

JSX 因應開發者的習慣而生、為 HTML 和 Javascript 的綜合體。既然是讓人能快速上手的語法， JSX 想當然爾不會是瀏覽器能解讀的語言，因此需要 Webpack 和 Babel 的輔助，來將 JSX 轉成純 Javascript 程式碼。

JSX 寫法：將 HTML 置入 JS 中相對簡易、效率高

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

透過 Babel 轉化成純 Javascript 程式碼樣貌：複雜、冗長

var element = React.createElement(

  "h1",

  null,

  "Hello, world!"

);

3. 一切從簡

藉由元件的重組和堆疊，React 使程式碼有千千萬萬種變化，但同時具備好維修、易於管理的特性。維護時單獨拉出有狀況的元件，想做更改時也可以輕易地調整一塊元件（不會交互影響，造成大規模程式碼污染）。由此可見，區區分明的特性使 React 特別具效率和競爭力。另外，props 的階層化資料傳遞（單向）也使 React 的程式碼相對穩定、可信賴。

📌  React JS 的缺點：

1. 過度專一性

因為 React 僅支援 UI 的視覺 (views) 部分，其他需要安裝額外的函式庫當作外掛，才能解決路由 (routing)、狀態處理 (state management)、API 互動的問題。

2. 更新飛速

由Facebook 開發的 React 的版本更新非常迅速、頻繁，導致學習＆前端開發者需要戰戰兢兢如履薄冰才能跟上腳步拔得頭籌，第一手文件取得也相對困難（要中文版就更難嘍～大家必須學好英文呀～）。

不過，身為初學 React 的我們不需要顧慮太多；現階段儘管吸取知識，把基礎打好，才能以不變應萬變👌

📌 React JS 的宣告語法

1. 函式宣告 Function declaration：

function 的基本配備：必 return 

function Welcome(props) {

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

}

2. 類別宣告 Class declaration：

class 的基本配備：必 extends 後 render （繼承後渲染）

import React from 'react'




class Welcome extends React.Component {

  render() {

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

  }

}

📌 Buckle up～ 最後來衝一波來用實例告訴你們 React 好在哪！

React JS 現今為前端開發數一數二的函式庫，它被用於創建瀏覽器 App 開發手機應用程式 (利用 React Native)。

1. Facebook：超過 2 億用戶的 FB 是個創造 React 的霸主，其開發和應用包括起初於 FB 上的 React 初步網頁測試到後來「通知」和「自動刷新頁面」功能的出現。註：FB 於 2018 年更發佈了 React Fiber — 為一個重新改寫的 React 函式庫

2. Instagram：應該很難想像偌大一個以圖文分享為主的社群平台的網站竟然能單單藉由 React 獨立完成繁複作業，包含地圖、hashtags 、精準 SEO 等等都是使用 React 的心血結晶。

3. Netflix: 自從 2014 年導入 React 撰寫網頁，Netflix 的串流速度和運轉效率就獲得顯著的提升，也間接影響了 UX (User Experience) 的表現和用戶滿意度。

4. Ubereats：當紅炸子雞又能送脆皮炸雞的 Ubereats 也是 React 的受惠者，利用 React-router 來執行頁面之間的切換，讓外送員和用戶端無縫接軌；當然論下訂、接單、完單的效率 React 貢獻了不少。

5. Airbnb:  Airbnb 的性質屬於跨區域統合民宿的住宿網站，需要 React 來達成 API （多平台）整合和網站的高機動性。但是由於政策面的考量，Airbnb 也在 2018 年宣布漸退 React Native。

6. CNN & BBC & The New York Times: 就算是新聞報社廣播網頁平台製作也需要用到 React Native 的協助，以獲得更快速的更新和創造更優質的閱聽人體驗。

🔥下集預告🔥

初步認識 React JS 後，不知道大家對於 React 有什麼想法？ 下集小白🙆‍♀我將為大家帶來更多 React 入門的相關知識😍  對這篇筆記有興趣的人記得 tune in 下集！

這裡先拜過我的恩師Glove🙇‍♀

🎏 如果對於 React JS 函式庫有興趣，或是想提升 JS 技能的人，這裡雙手奉上 Glove 的部落格，非常建議和我一樣的小菜雞🐥上去爬個文～

Glove 另外也有在 Udemy 上開設 JS 課程 和 React 課程唷，特別適合唷想快速練功的人😎！（中文教學）🎏

不知道大家有沒有熟悉 W3Schools 了，這次和大家介紹一個叫做 Programming with Mosh 的 YouTube 教學頻道，專門引導新手學習各大前端開發工具（Javascript、React.js、C#、Node.js…市面上看得到的保證都有），每支影片雖然偏長，但是重點講得很清楚，可是勝過太多國內教學（YT上中文的 tutorial 目前還看不到我喜歡的，所以歡迎底下留言告訴我你推哪支 YouTube 教學！）

/* 希望以上心得筆記和資訊有助於大家更了解 React 的運作～  如果覺得獲益良多歡迎繼續關注我！

有任何問題都不吝指教（底下留言💬），大家一起學習、一起進步喲🗣

那～我們下禮拜見嘍！👋👋👋 */ 

參考資料 References:

1. https://www.fooish.com/reactjs/
2. https://www.runoob.com/react/react-tutorial.html
3. https://medium.com/reactmaker/7%E5%A4%A9%E5%AD%B8%E6%9C%83-reactjs-day3-react-basic-d959b2db539a
4. http://skyroxas.tw/react-js-react-%E5%85%A5%E9%96%80-%EF%BC%9A%E7%B5%84%E4%BB%B6-component-%E7%9A%84-%E5%B1%AC%E6%80%A7-props/
5. https://ithelp.ithome.com.tw/articles/10217533
6. https://stackoverflow.com/questions/51435476/why-props-in-react-are-read-only
7. https://itnext.io/what-is-props-and-how-to-use-it-in-react-da307f500da0
8. https://acowebs.com/react-js-features/
9. https://www.simform.com/websites-use-react/#UberEats