Alice's
notes

JavaScript ES6

ES6 使用module

• ES6中，我們可以把js函式、變數、物件打包成模組，然後在其他js檔引入使用
• 方法是透過export在被模組化的檔案中設定要讓別人使用的東西
• 在要使用的地方用import、給予一個名字，被輸出的檔案會變成一個物件，名稱是剛剛給予的名字，以物件方式存取就能使用

node 要使用 ES6 module 模組，需創建 package.json ，裡頭放入："type":”module"

React

React -

• 編寫程式碼
• 輸出網頁程式(html、php......)
• 透過伺服器呈現網頁

使用React前端網頁介面程式庫後

• 載入別人寫好的函式庫（套件）
• 將新語法/函式庫的程式碼做「打包、編譯」成瀏覽器認得的程式碼（preprocessing）
• 透過伺服器呈現網頁

React 是一個專注在 UI（view）的 JavaScript 程式庫

1. 一次安裝設定好react、 webpack、 babel
2. npm install create-react-app –g
3. 至操作之目錄新增 create-react-app 檔案名稱

成功！（關閉後要再次開啟直接 $npm start 即可。大部分情況不用再重新 start，重整畫面即可）

使用 React 時發現一個問題，我之前有下載 html 自動排版的外掛，使用 React 排版會不一樣使操作錯誤，這時用 command+shift+X（mac） 開啟 vscode 外掛頁面，把 JS-CSS-HTML Formatter 暫停使用。

ReactDom

• 輸出網頁一般是寫入到DOM
• ReactDOM.render()，是先將網頁內容寫到virtural DOM，若與原先的DOM內容不同才更新。即更新“需要更新的地方”

運作流程：

1. 將要渲染的內容輸出到ReactDOM
2. ReactDOM整理要渲染的內容
3. 對原始綁定的div在DOM上的位置做渲染
4. 完成畫面的渲染

JavaScript XML, JSX - JavaScript 裡包 HTML

• 只能傳遞一個元素（因此把要傳遞的東西放小括弧內）
• 可以在 html 標籤中利用「{}」寫javascript 表示式
• style變為一物件、屬性名稱規則改用大寫區隔、屬性的值變成字串（屬性變一物件）若要直接在html中加style要用雙大括號 {{ … }}
• css 的 class 在這邊要寫成 className
• 在元素上傳遞屬性時若省略要指定的值，該資料會獲得true布林值，以下兩個是相同的
<button value={true} > 是 </button> <button value > 是 </button>

實際操作圖：

React Component

• 以函式實現React Component
• function 名稱第一個字為大寫
• <自設的元素名稱 /> 或 <自設的元素名稱 ></自設的元素名稱 >

可以做出進度條，並依照父輩大小，子輩使用百分比去調整。

props 對 component 的影響

• 下列情況會產生ReactDOM進入re-render的更新程序 -> props的值改變時 / state的值改變時
• probs不能被元件自己更改（read-only）
• probs也可綁定函式

在 react component 中，我們把包在標籤中間的東西，稱為 children - <App> 其他資料 </App>。當 children 的內容改變時，畫面也會重繪。

• 須在建構函式 constructor（）中加 super（props） 敘述
• 使用須加上this.props

state 與 setState

• state是class component的預設好會去檢查的一個特殊的member data
• 當state被改變時，會進入re-render的update程序，更新畫面
• state的結構也是一個物件，可在建構子中宣告

Summary

今天學了前端框架之一的—— React！很是期待已久的內容，學起來也覺得頗有趣的，雖然依然有很多東西要繼續再自己鑽研，但覺得 coding 真的是挺有趣的，時不時就會這麼覺得，遇到 error 時，就像玩找碴 XD，沒有 error 時，看到畫面成功呈現也覺得很有成就感！