什麼是 React

React 是一個由 facebook 開發的前端 JavaScript library.

  • 透過設計重複利用的元件的概念,設計一個個小元件,組裝成一個較大的元件,最終打造成一個的完整專案
  • 使用於開發複雜的互動式網頁
  • 使用 VirtualDOM 來提昇 render 的效率
  • 使用 Unidirectional data flow(單向資料的流動):更改狀態觸發畫面更新
閱讀全文 »

網頁設計

SPA(single-page application)單頁面應用程式

是一種網站設計的模型,它通過動態重寫當前頁面來與使用者互動,而非傳統的從伺服器重新載入整個新頁面。這種方法避免了頁面之間切換打斷使用者體驗。

  • 因 SPA 網頁是動態產生,對SEO不友好
閱讀全文 »

HTML Entities(實體) 是什麼

HTML Entities是以&開頭;結束的字串,這常用來顯示一些保留字元,不可見字元或鍵盤難以輸入的字元
常用 Entity

Symbol Description Entity Name Number Code
quotation mark " "
apostrophe ' '
& ampersand & &
< less-than &lt; &#60;
> greater-than &gt; &#62;
~ tilde operator &sim; &#8764;
* Asterisk &ast; &#42;
閱讀全文 »

CSS Box model

Box model 規範 HTML 每個元素(element)的基本設計規範
Box model 包含 content, padding, border and margin

  • content : 放文字或圖像的地方
  • border : 為 element 的邊框
  • padding : content 與 border 間的區域
  • margin : element 與鄰近 element 的距離
閱讀全文 »

Entry

何謂 JavaScript

JavaScript 是一種直譯的程式語言,原本是設計給瀏覽器使用,現在已被應用到不同的環境,含 Server 也有使用到

閱讀全文 »

use useLocation found error “TypeError: Cannot read properties of undefined (reading ‘location’)”

use useLocation doesn’t put same component as Router

閱讀全文 »

留言板

package.json

1
2
3
4
5
6
7
8
9
 "scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"homepage": "https://hot5656.github.io/react-comments-test2",
閱讀全文 »

名詞

web component : Web Components is a suite of different technologies allowing you to create reusable custom elements
JSX : 是一個 JavaScript 的語法擴充, 允許我們在 JS 的檔案中使用 HTML 的標籤
Virtual DOM :
Reconciliation : 找出哪些樹節點哪些需要變化
Immutability : 不可變性
Mutation : 修改
JSON Web Token (JWT) : 用來在 身份提供者 和 服務提供者 間傳遞被 認證 的用戶身份訊息,以便於從資源伺服器獲取資源

閱讀全文 »