大家好，有沒有想學寫網站的朋友呢？ 坊間大部份的網頁入門課程，在教完基本的 html 與 css 之後，接著就會教 [Bootstrap](http://getbootstrap.com) 這個工具包。 究竟 Bootstrap 是什麼呢？ 其實它只是一個寫網頁的懶人工具包，幫助你美化頁面的設計感，並且提供你網頁設計常用的一些元件。 聽再多介紹，不如親自動手實作！ 我整理了一份有趣的 Bootstrap 自學教材，每堂課附有一個小作業。 會帶領大家在作業中，以新聞媒體的網站為範例，一步一步利用 Bootstrap 把網頁打造出來。 剛開始入門網頁設計的朋友，很適合接著來學習 Bootstrap 喔！ 您只要具備基本的HTML與CSS基本知識就可以了 （還不會的朋友，請先完成自學網頁の嬰兒教材：HTML與CSS） https://codelove.tw/@howtomakeaturn/course/Ja6JaO 歡迎您試試看這份教材！
# 第6課 課程目標 正式在自己電腦上寫網頁 不再需要依靠jsfiddle來寫網頁 # 第6課 課程內容 前五課都是用jsfiddle來學習，先跳過了環境設定的問題。 這次的課程要練習正式在自己電腦上寫網頁。 其實，用記事本就可以寫網頁。只要把副檔名存成 .html 就可以了。 請閱讀這份教材： [HTML Editors](http://www.w3schools.com/html/html_editors.asp) 不習慣看英文，可以改看這裡： [HTML 编辑器](http://www.w3school.com.cn/html/html_editors.asp) 接著要回頭學一些基本知識，這些知識在前幾課我們先跳過了： [HTML Introduction](http://www.w3schools.com/html/html_intro.asp) [HTML Head](http://www.w3schools.com/html/html_head.asp) 不習慣看英文，可以改看這裡： [HTML 简介](http://www.w3school.com.cn/html/html_jianjie.asp) [HTML 头部元素](http://www.w3school.com.cn/html/html_head.asp) 全部唸完之後，請試著用計事本在自己電腦上做出一個網頁檔，然後用瀏覽器去打開它 # 第6課 作業 這次的作業要做所謂的 landing page landing page 是網站的門面，給客戶的第一印象 請參考下列網址，了解更多 landing page 的概念 [實例網站解說什麼是 Landing Page ？](https://cola.workxplay.net/what-is-an-landing-page/) 本次的作業內容如下： 假設你打算在近期內創業，請替你的公司建立一個漂亮、有效的 landing page 如果想不到的話，就請替你目前任職的公司，建立landing page 作業條件如下： 請尋找並下載一張大圖片，當作網頁的背景圖片 參考圖庫：https://unsplash.com/ 請建立一個獨立的 css 檔，不要在 html 檔內寫任何一行 css 試著用計事本在自己電腦上做出這個 landing page，然後用瀏覽器去打開它 完成這些，你就完成這次的課程目標了！
# 第5課 課程目標 認識各種常見的輸入欄位 能夠用表單送出資料 # 第5課 課程內容 用jsfiddle來練習： https://jsfiddle.net 這次要寫HTML區塊 請閱讀這份教材： [HTML Forms](http://www.tutorialspoint.com/html/html_forms.htm) 不習慣看英文，可以改看這裡： [HTML 表单和输入](http://www.w3school.com.cn/html/html_forms.asp) 把教學裡面的HTML貼到 jsfiddle 裡面做練習，貼好之後按上面的 RUN 按鈕，就會在右下角的 Result 看到結果了。 讀完、練習完這份教學裡面的程式碼，就算是學會 HTML 表單的用法，可以用表單來讓使用者輸入、選擇，接著送出各種資料了 # 第5課 作業 這次作業的情境如下： 你決定網路創業、開始網拍生意、線上賣衣服，並且自己設計購物網站 在後台管理面板中，需要有地方讓你新增商品項目 請利用本週學到的表單，將這個新增商品項目的表單做出來。 這個表單至少要能輸入以下欄位，（括號內代表建議的欄位類型）： - 商品名稱 (text) - 價格 (text) - 是否免運費 (checkbox) - 性別 男/女 (radio) - 類別：上衣類 外套類 下身類 配件類 (select) - 商品備註 (textarea) 請讓這個表單用 POST 的方式將資料送出到 ‘/add-product’ （注意：網址’/add-product’並不存在，所以表單資料無法真的送過去。本週課程只談論表單製作。伺服器程式接收、處理表單資料，不在本週課程範圍） 完成這些，你就完成這次的課程目標了！
# 第4課 課程目標 學會使用HTML的table來整理、顯示資料 能夠做出漂亮的表格 # 第4課 課程內容 用jsfiddle來練習： https://jsfiddle.net 這次要寫HTML跟CSS兩個區塊～ 請閱讀這份教材： [HTML Tables](http://www.w3schools.com/html/html_tables.asp) 不習慣看英文，可以改看這裡： [HTML 表格](http://www.w3school.com.cn/html/html_tables.asp) 把教學裡面的HTML、CSS程式碼，貼到 jsfiddle 裡面做練習，貼好之後按上面的 RUN 按鈕，就會在右下角的 Result 看到結果了。 讀完、練習完這份教學裡面的程式碼，就算是學會HTML table的用法了，可以用table來顯示各種資料了 接著請搜尋關鍵字 `table css 美化`，上網研讀一下各種文章，學習基本的表格美工。 # 第4課 作業 政府近年在提倡透明化，公佈了許多資料 請前往 [政府資料開放平台](https://data.gov.tw/) 或是 [台北市政府資料開放平台](https://data.taipei/) 挑選一份你有興趣的資料，利用本週學到的table，將資料用HTML表格呈現。 （資料量巨大的話，請在表格內呈現10筆資料即可。） 完成之後，請用CSS替表格加上美工。 完成這些，你就完成這次的課程目標了！
# 第3課 課程目標 學會使用div和span元素 能夠做出漂亮的排版 # 第3課 課程內容 用jsfiddle來練習： https://jsfiddle.net 這次要寫HTML跟CSS兩個區塊 請閱讀這份教材： [HTML Block and Inline Elements](http://www.w3schools.com/html/html_blocks.asp) 或是看中文版 [HTML 块](http://www.w3school.com.cn/html/html_blocks.asp) 接著開始學習版面配置： [學習 CSS 版面配置](http://zh-tw.learnlayout.com/) 把教學裡面的HTML、CSS程式碼，貼到 jsfiddle 裡面做練習，貼好之後按上面的 RUN 按鈕，就會在右下角的 Result 看到結果了。 讀完、練習完這份教學裡面的程式碼，就算是學會基本的網頁排版了。 # 第3課 作業 在第1、2課的作業，我們將風傳媒的文章內容做了出來，但是略過了上方的導覽列、旁邊的熱門文章等等區塊。 這次作業要延續那些作業，這次不只是文章內容，請將整個頁面都做出來。 注意：本週作業內容繁重許多，請至少將上方的導覽列、旁邊的熱門文章推薦區塊做出來，其餘的可以省略。 完成這些，你就完成這次的課程目標了！ 注意： 有同學反應，jsfiddle的介面太窄，不方便排版 如果您也覺得jsfiddle不好用，可改用 [Glitch](https://glitch.com/) 來練習。 完成後請將您的 Glitch 專案發布，即可將網址分享出去。 小技巧： 您可以使用瀏覽器的開發者功能，觀察網站本身是怎麼寫的 例如：Google Chrome 請對著元素按右鍵 -> 檢查 多利用這個技巧觀察網站原始碼，對於學習本身很有幫助
# 第2課 課程目標 學會用id、class、元素名稱來指定特定元素 學會用CSS來替文字加上設計感，替文字變色、變大小、設計邊框、寬度、留白等等 # 第2課 課程內容 用jsfiddle來練習： https://jsfiddle.net 這次要寫HTML跟CSS兩個區塊 請閱讀並練習這11份教學（不要緊張，內容很簡單）： [CSS Syntax](http://www.w3schools.com/css/css_syntax.asp) [CSS Colors](http://www.w3schools.com/css/css_colors.asp) [CSS Backgrounds](http://www.w3schools.com/css/css_background.asp) [CSS Borders](http://www.w3schools.com/css/css_border.asp) [CSS Margins](http://www.w3schools.com/css/css_margin.asp) [CSS Padding](http://www.w3schools.com/css/css_padding.asp) [CSS Height/Width](http://www.w3schools.com/css/css_dimension.asp) [CSS Box Model](http://www.w3schools.com/css/css_boxmodel.asp) [CSS Text](http://www.w3schools.com/css/css_text.asp) [CSS Fonts](http://www.w3schools.com/css/css_font.asp) [CSS Links](http://www.w3schools.com/css/css_link.asp) 不習慣看英文，可以改看這裡： [CSS 基础语法](http://www.w3school.com.cn/css/css_syntax.asp) [CSS id 选择器](http://www.w3school.com.cn/css/css_syntax_id_selector.asp) [CSS 类选择器](http://www.w3school.com.cn/css/css_syntax_class_selector.asp) [CSS 背景](http://www.w3school.com.cn/css/css_background.asp) [CSS 框模型概述](http://www.w3school.com.cn/css/css_boxmodel.asp) [CSS 内边距](http://www.w3school.com.cn/css/css_padding.asp) [CSS 边框](http://www.w3school.com.cn/css/css_border.asp) [CSS 外边距](http://www.w3school.com.cn/css/css_margin.asp) [CSS 字体](http://www.w3school.com.cn/css/css_font.asp) [CSS 文本](http://www.w3school.com.cn/css/css_text.asp) [CSS 链接](http://www.w3school.com.cn/css/css_link.asp) 把教學裡面的HTML、CSS程式碼，貼到 jsfiddle 裡面做練習，貼好之後按上面的 RUN 按鈕，就會在右下角的 Result 看到結果了。 讀完、練習完這11份教學裡面的程式碼，就算是學會CSS的基礎，能夠用CSS做美工、排版、設計了 # 第2課 作業 你在第1課的作業利用HTML，模仿風傳媒的文章，做了基本的文章排版。 這次的作業，請使用本次學到的內容，把上次的作業拿出來改，替文章加上各種色彩、字體大小、各種排版，讓文章看起來變漂亮。 （請至少替文章加上padding，讓文字不要貼著邊邊，看起來比較舒服） 完成這些，你就完成這次的課程目標了！
# 第1課 課程目標 學會 h1, h2. p, br 等等HTML元素的用法 學完之後，你將可以用HTML來替內容排版 # 第1課 課程內容 第一課只要學習最基本的HTML元素就可以了 請打開這個網站，用這個網站來開發你的網站： https://jsfiddle.net 共有HTML, CSS, JavaScript三塊可以寫，先只要寫HTML就好。 閱讀並且練習這五份教學的內容： [HTML Basic](http://www.w3schools.com/html/html_basic.asp) [HTML Elements](http://www.w3schools.com/html/html_elements.asp) [HTML Attributes](http://www.w3schools.com/html/html_attributes.asp) [HTML Headings](http://www.w3schools.com/html/html_headings.asp) [HTML Paragraphs](http://www.w3schools.com/html/html_paragraphs.asp) 不習慣看英文，可以改看這裡： [HTML 基础](http://www.w3school.com.cn/html/html_basic.asp) [HTML 元素](http://www.w3school.com.cn/html/html_elements.asp) [HTML 属性](http://www.w3school.com.cn/html/html_attributes.asp) [HTML 标题](http://www.w3school.com.cn/html/html_headings.asp) [HTML 段落](http://www.w3school.com.cn/html/html_paragraphs.asp) 把教學裡面的HTML程式碼，貼到 jsfiddle 裡面的 HTML 區域，貼好之後按上面的 RUN 按鈕，就會在右下角的 Result 看到結果。 讀完、練習完這五份教學裡面的程式碼，就算是學會HTML的基礎了 # 第1課 作業 前往這個網站：[風傳媒](https://www.storm.mg) 或者任何你覺得版面很漂亮的媒體網站 找一篇你喜歡的文章 接著打開jsfiddle，把jsfiddle當成 Microsoft Word文書編輯軟體來用，用HTML的段落、標題、換行等等元素，把文章排版打出來。 只要打出文章內容就好，上方的導覽列、旁邊的熱門文章那些區塊都不用。 完成這些，你就完成這次的課程目標了！
大家好，有沒有想學網頁的朋友呢？ 我整理了一份非常簡單的 HTML 跟 CSS 自學教材，每堂課附有一個小作業 會帶領大家在作業中，實作部落格頁面、網路媒體排版、用政府的 open data 做報表、設計購物網站的上架表單，還有創業最重要的 landing page 課程的最後，您會真的做出一個自己的個人網頁並正式上線，讓您未來在求職、談合作、各種需要介紹自己的場合都可以使用！ 您不需要具備任何基礎、也不需要任何背景 歡迎您試試看這份教材！
**舊的 React 文件幾乎沒什麼用，這大家都知道，因為它沒反映該框架的現代用法。在本文中，我們將探索它的新文件並討論它為何很棒。** 原文出處：https://dev.to/diogorodrigues/reacts-new-killer-documentation-focused-only-on-functional-components-jnk --- React Hooks 與 [2019 年初版本 16.8](https://reactjs.org/blog/2019/02/06/react-v16.8.0.html) 一起發布，迅速流行起來並在前端社區中得到廣泛採用。通過這個版本，使用基於類別的元件編寫的複雜性，被有狀態的功能元件所取代。雖然我們可以在文件中找到對這些新功能的很好解釋，但大多數範例都繼續使用類別。 現在，在發生革命性變化 3 年多之後，**React 發布了其文件的 BETA 版本，從其解釋中刪除了類別，專注於使用帶有互動範例的鉤子的現代開發方式。** > “一旦我們與現有的 React 文檔達到內容一致，我們的目標是將此網站切換為主要網站。舊的 React 網站將存檔在一個子域中，因此您仍然可以存取它。舊內容鏈接將重定向到存檔的子域，該子域將有關於過時內容的通知。” - [BETA React 文檔](https://beta.reactjs.org/) _P.S.重要的是，當我寫這篇文章時，新內容幾乎 100% 完成了。_ ## 你可以在新的 React 文檔中找到什麼 雖然這個 React BETA 文檔不是很廣泛，但我不會逐個主題地介紹它，我將在下面重點介紹它的一些主要優點。 ### Quick Start 真的是非常快速的開始 **對我來說，這是改善超多的部分，因為與舊版本不同，現在我們可以通過其文檔中的互動式程式碼範例來使用 React 程式碼。** 這不是很神奇嗎？ 一個完整的介紹，非常簡單，解釋清楚，並且不需要為現在開始學習的人設置任何專案。  ### 很好地解釋了使用 React Effects 的最佳方式 就個人而言，我認為**他們為解釋 Effects 所做的工作非常出色。**這確實是我研究了很多的東西，肯定會幫助我使用 React 開發更好的程式碼。 有一些詳盡的頁面展示了[如何停止將 Effects 視為生命週期掛鉤](https://beta.reactjs.org/learn/lifecycle-of-reactive-effects)，而是 [Effects 作為與外部系統的同步器](https://beta.reactjs.org/learn/synchronizing-with-effects)。發生這種混淆是因為我們習慣於將使用 useEffect 鉤子的功能組件與基於類別的元件生命週期進行比較，但這不再有意義了。 https://twitter.com/dan_abramov/status/1157250198659354624 **另一個令人驚嘆的內容是 [“你可能不需要 effect”](https://beta.reactjs.org/learn/you-might-not-need-an-effect) 主題，我們可以在其中了解如何刪除不必要的效果**通過許多用例和互動式程式碼示例。您可以在下面的影片中找到關於該主題的精彩摘要。 https://www.youtube.com/watch?v=bGzanfKVFeU&t=742s&ab_channel=BeJS ### 精通狀態管理 我知道這個標題聽起來太冒險了，但是這個 React BETA 文檔有很多內容是關於[如何更好地建置狀態，避免冗餘狀態相關的錯誤](https://beta.reactjs.org/learn/managing-state)，等等。 > “良好地建置狀態可以區分一個易於修改和除錯的元件，以及一個經常產生錯誤的組件。” - React 文檔 查看 [管理狀態部分](https://beta.reactjs.org/learn/managing-state) 以及 [Referencing Values with Refs](https://beta.reactjs.org/learn/referencing-values-with-refs) 主題以更好地理解 React 中狀態的使用。 ### 更多你可以在新的 React 文檔中找到的知識 我想強調的其他一些內容是： - [React API 參考](https://beta.reactjs.org/apis/react) 部分包含所有內容，以便更快地諮詢程式碼片段。 - “[聲明式 UI 與命令式 UI 相比如何](https://beta.reactjs.org/learn/reacting-to-input-with-state#how-declarative-ui-compares-to-imperative )”主題展示瞭如何更好地編寫聲明式 React 元件。 - “[Render and Commit](https://beta.reactjs.org/learn/render-and-commit)” 了解渲染 React 元件過程中的步驟。 - “[排隊一系列狀態更新](https://beta.reactjs.org/learn/queueing-a-series-of-state-updates)”主題將解釋為什麼有時它不起作用以及如何解決它. - “[通過自定義掛鉤重用邏輯](https://beta.reactjs.org/learn/reusing-logic-with-custom-hooks)”了解如何在元件之間共享邏輯。 ## 結論 **從基礎主題到進階主題，這些文檔涵蓋了您學習如何使用最好的現代 React 建立用戶界面所需的一切。**如果您是 React 世界的新手，本文檔肯定會對您有很大幫助互動式範例。對於經驗豐富的 React 開發人員，本文檔匯集了幾個重要的進階概念，這些概念一定會幫助您建立更好的 UI 元件。
向您介紹這個開發人員工具列表。它是一個開源專案，由社群整理。 讓我們開始吧！ 🚀 原文出處：https://dev.to/dostonnabotov/ultimate-tools-for-developers-2aj2 --- ## 程式碼編輯器和 IDE 💻 - [Visual Studio Code](https://code.visualstudio.com/) 作為免費的開源程式碼編輯器，Visual Studio Code 是開發人員的絕佳工具。它帶有許多功能和外掛，使其成為開發人員的絕佳選擇。 - [CodeSandbox](https://codesandbox.io/) 簡單來說，CodeSandbox 就是 Visual Studio Code 的在線版本。 - [Dev - Visual Studio Code](https://github.dev/) github.dev 基於網絡的編輯器是一種輕量級的編輯體驗，完全在您的瀏覽器中執行。 有兩種方法可以打開基於 Web 的編輯器 1. 在任何存儲庫或拉取請求上按 `.` 鍵 2. 將 URL 中的 .com 替換為 .dev。例如。 `https://github.dev/username/repo` - [CodePen](http://codepen.io/) CodePen 是網絡前端的遊樂場。這是一個試驗、測試和展示您的前端工作的地方。此外，您還可以從其他開發人員那裡找到許多靈感。 - [Replit](https://repl.it/) Replit 是一個簡單、強大且協作的在線 IDE。這是編碼、協作和託管專案的好地方。 - [StackBlitz](https://stackblitz.com/) 面向前端和全棧開發人員的 Web IDE。 - [TypeScript Playground](https://www.typescriptlang.org/play/) 想玩玩看 TypeScript 嗎？ TypeScript Playground 是一個適合你的地方。 ## 圖片 🖼 - [Unsplash](https://unsplash.com/) 為您的下一個專案輕鬆找到精美、高質量的照片。所有照片均可免費用於商業和個人用途。 - [Pexels](https://www.pexels.com/) Pexels 是免費庫存照片的重要來源。所有照片均可免費用於商業和個人用途。 - [Carbon](https://carbon.now.sh/) Carbon 是一個很棒的平台，可以建立和共享程式碼的精美圖像，允許您使用語法突出顯示、主題、字體等自定義圖像。 ## 顏色 🎨 - [Color Space](https://mycolor.space/) 再也不會浪費時間尋找完美的調色板！只需輸入顏色！並生成漂亮的調色板 - [Coolors](https://coolors.co/) 建立完美的調色板或從數千種美麗的配色方案中汲取靈感。 - [Color Wheel](https://www.canva.com/colors/color-wheel/) 想知道什麼顏色搭配起來好看嗎？ Canva 的色輪讓色彩組合變得簡單。 ## 排版 📝 - [Google Fonts](https://fonts.google.com/) Google Fonts 是一個包含免費授權字體系列的庫。只需選擇您想要的字體，將它們下載到您的計算機或使用提供的 CSS 或 HTML 鏈接將它們嵌入您的網頁。 - [Fontsource](https://fontsource.org/) 如果您不想從 CDN 獲取字體，則可以使用整齊打包的 NPM 包中的自託管開源字體。 - [Nerd Fonts](https://www.nerdfonts.com/) Nerd Fonts 使用大量字形（圖標）修補針對開發人員的字體。 ## 設計 🎨 - [Figma](https://www.figma.com/) 一個免費的線上協作界面設計工具和原型製作工具。 - [Pinterest](https://www.pinterest.com/) Pinterest 是一種視覺發現工具，可用於為您的所有專案和興趣尋找創意。 ## 文檔 📚 - [MDN 網絡文檔](https://developer.mozilla.org/en-US/) 學習Web開發的最佳平台。每當您對 HTML、CSS、JavaScript 或任何其他網絡技術有疑問時，請務必先查看 MDN。 - [W3Schools](https://www.w3schools.com/) 幾乎所有您能想到的程式語言的參考。 - [CSS 技巧](https://css-tricks.com/) 提供使用 CSS（層疊樣式表）的提示、技巧和技術的最佳平台之一。 ## 工具 🛠 等一會兒！工具中的工具？是的，你沒有聽錯。這裡有一些工具可以幫助您找到更多工具。 😃 - [Stack Overflow](https://stackoverflow.com/) Stack Overflow 是一個面向專業和狂熱工程師的問答網站。這是提出問題和獲得答案的好地方。 - [Micro Digital Tools](https://mdigi.tools/) 一組對開發人員有用的工具。 - [Small Dev Tools](https://smalldev.tools/) 一組對開發人員有用的工具。 - [Can I Use](https://caniuse.com/) Can I Use 提供了最新的瀏覽器支持表，以支持桌面和移動 Web 瀏覽器上的前端 Web 技術。 - [網站圖標生成器](https://favicon.io/) 您是否曾經為了替自己的網站建立網站圖標而苦惱？不同的尺寸，不同的格式，不同的平台。 從文本、圖像或從數百個表情符號中選擇快速生成您的網站圖標。 - [Font Awesome](https://fontawesome.com/) 免費和高級圖標庫。 - [OverAPI.com](https://overapi.com/) 以有組織的格式查找大量不同技術的備忘單。 - [Transform](https://transform.tools/) 多語言網絡轉換器。輕鬆將 HTML 轉換為 Pug、將 TypeScript 轉換為 JavaScript、將 Markdown 轉換為 HTML 等等... - [Frontend Tools](https://murtazajoo.github.io/tools/) 一個網站，您可以在其中找到具有更好用戶體驗的所有工具。 - [GitProtect](https://gitprotect.io/) 適用於所有 GitHub、GitLab、Bitbucket 和 Jira 資料的 DevOps 備份和災難恢復軟體。 - [Linear](https://linear.app/) 在團隊中組織問題和拉取請求的好工具。 ## 結論 🎉 希望您覺得這個列表有用。
在 Web 開發世界中，有時感覺就像每天都有新的前端框架問世！大多數來去匆匆，但有一件事是肯定的：Svelte 將繼續存在。 不過，這並不意味著您應該放下一切並在今天學習！追逐最新潮流會讓您分心和不知所措。 這篇文章將一勞永逸地回答：**我應該學習 React 還是 Svelte？**。 您將看到一些程式碼範例，這些範例解釋了為什麼 React 開發人員會為 Svelte 瘋狂，但我們也必須實際一點。 React 已經存在了很長時間。有更多的套件、支援、職缺。 Svelte 還能取代 React 嗎？讓我們找出答案！ - 原文出處：https://dev.to/mikehtmlallthethings/svelte-vs-react-which-framework-to-learn-in-2023-50gf --- * 📍 什麼是 React？ * 📍 什麼是 Svelte？ * 📍 React 和 Svelte 的 5 個區別 * Svelte 的捆綁包尺寸更小 * Svelte 更容易學習 * Svelte 使用純 HTML、CSS 和 JavaScript 進行編譯 * React 有更多的套件 * React 有 React Native * 📍 React 是庫還是框架？ * 📍逐行比較 React 和 Svelte 專案 * 📍 Svelte 比 React 快嗎？ * 📍 何時從 React 切換到 Svelte * 📍 結論 ### **What is React?** 讓我們從 React 開始。 React 是一個漸進式 JavaScript 前端框架（或函式庫，具體取決於您詢問的對象），可幫助您構建複雜的 Web UI。 它由 Facebook（現為 Meta）於 2013 年創建，能夠很快在前端 Web 開發領域站穩腳跟。 React 的核心是狀態和渲染狀態，這意味著要使用它，您必須添加其他庫來處理客戶端功能和路由。 ### **What is Svelte?** Svelte 也是一個前端 JavaScript 框架，但採用了更加一體化的方法。 Svelte 具有內建的狀態管理、路由和客戶端 (DOM) 功能。  React 需要第三方庫和工具，如 Redux、React Router、JSX，而 Svelte 內建了很多這樣的功能。它不太靈活，但更方便和一致。 它採用更幕後（魔術）風格的方法，它直譯非常基本的 JavaScript 程式碼並為您處理 UI 和狀態管理： ``` <script> let count = 0; function handleClick() { count += 1; } </script> <button on:click={handleClick}> Clicked {count} {count === 1 ? 'time' : 'times'} </button> ``` Svelte 由紐約時報的開發人員 Rich Harris 於 2016 年創建，用於以高效的方式處理複雜的圖表和圖形。它從那裡成長為 React 和 Vue 之類的備受喜愛的競爭對手。 ### **React 和 Svelte 之間的 5 個區別** ### **1。 Svelte 的構建包大小要小得多** 我們在下面構建的相同（功能）應用程序。部署包大小在 React 是 41.2 kB，在 Svelte 是 2.1 kB。這幾乎減少了 **20x** 🤯 為了獲得這些數字，我構建了一個在 Svelte 和 React 中具有相同功能的應用程序。我們將在 React 與 Svelte 代碼分解部分深入研究這些應用程序。  我用 React 和 Svelte 構建了一個相同的應用程序。看看 Svelte 包小了多少！ ### **2。 Svelte 更容易學習，因為它的語法簡單** Svelte 採用更幕後的魔術方法，允許您編寫非常少量的樣板或語法糖來完成複雜的綁定。模板語法只是帶有一些額外內容的 HTML，這與 JSX（React 等價物）有很大不同並且更容易學習。 React 變數宣告：  Svelte 變數宣告：  Svelte 看起來像純 JavaScript，但它具有與 React 完全相同的功能。更新 Svelte 變數將自動更新它所在的 UI 元素。 ### **3。 Svelte 符合純 HTML、CSS 和 JavaScript** Svelte 將您編寫的程式碼編譯成基本的 HTML、CSS 和 JavaScript。它不需要像 React 那樣與你的代碼捆綁在一起！ React.js 需要存在於一個 bundle 中以完成所有正確的虛擬 DOM 比較和創建，Svelte 不使用虛擬 DOM 來處理 UI。相反，它選擇了基本的 JavaScript 元素創建函數，例如 document.createElement。 ### **4。 React 擁有更多為它構建的庫和包** React 已經存在了 3 年多，也是目前 JavaScript 框架事實上的王者👑。正因為如此，它擁有大量用戶和公司創建的軟件包。 用戶創建的包通常只是為了使路由和狀態管理更容易，或者添加滑塊、燈箱等。這些並不重要，因為 Svelte 具有可靠的選項，並且兼容/適應大多數 JavaScript 套件。 有點困難的是，要跟任何其他框架之前創建的 React 套件整合時不容易。我在 Solana 和以太坊上從事 Web3 專案時經常遇到這個問題。 ### **5。 React 有 React Native** React Native 是使用率最高和受支持最多的跨平台框架之一。它提供了使用 React 創建 iOS 和 Android 應用程式的能力。全部來自同一個代碼庫。由於其成熟度，它擁有大量的庫、支援和學習資源。 儘管有 Svelte 的替代方案，例如稱為 Svelte-native 的 NativeScript 改編版，但它們不具有與 React-native 相同的可靠性和功能。 ### **React 是函示庫還是框架？** 儘管 React 通常被稱為框架，但可以說，由於其範圍，它更像是一個函式庫。它專門負責管理 UI 的狀態並使其與應用程式中的資料狀態保持同步。 因此，它需要第 3 方函式庫來處理應用程式路由 (React Router)、UI 創建 (JSX) 和元件之間的狀態管理 (Redux)。 另一方面，Svelte 內建了上述所有功能，因此更像是一個完整的 UI 管理解決方案。 你可以看到大多數人都同意這是一個函式庫，但仍有一些爭論👇 https://twitter.com/htmleverything/status/1597574223148765185 ### **逐行比較 React 和 Svelte 專案** 比較兩種 Web 技術的最佳方法是深入研究並使用它們進行構建。構建完全相同的應用程序有助於了解每個庫/框架如何處理不同的功能。 讓我們看看： * 條件渲染 * 模板循環 * 更新狀態 * 事件掛鉤 ### **我們在建造什麼？** 編碼是一項口渴的工作，因此我們將構建一個簡單的網絡應用程序，允許用戶跟踪他們全天喝了多少杯水（或🍺）。 額外的好處是顯示每杯喝醉的歷史和時間。 我們將保持 UI 簡單，以更多地關注底層框架。 （見下面的用戶界面） https://codesandbox.io/embed/react-water-example-scrimba-ny5q0m?fontsize=14&hidenavigation=1&theme=dark ### **React** 為了分解代碼，首先讓我們深入了解一些 React 概念和術語👇 React 有幾種類型的語法你需要學習。鉤子、狀態和模板 (JSX) 是主要的。 鉤子 - 允許您進入應用程序的生命週期 State - 允許您根據數據的變化更新 UI 元素。它將“狀態”（或更簡單的變量）更改與 UI 更新聯繫起來 模板 - 允許您直接在 HTML 中使用變量和 JavaScript React 組件的樣式通常由單獨的 .css（或 .scss）文件處理。 ### **React 代碼分解** https://codesandbox.io/embed/react-water-example-scrimba-ny5q0m?fontsize=14&hidenavigation=1&theme=dark&view=editor 變數是使用 useState 掛鉤設置的，它允許更新變量並讓 UI 動態呈現這些更新。 `useEffect` 用於在加載應用程序時設置今天的日期。 JSX 模板使用基本的“{}”符號以及 HTML 中的標準 JavaScript 函數，允許顯示變量和循環數組（使用“.map”）。 ### **Svelte** Svelte 採用不同的方法，採用更“幕後魔術”的風格。邏輯看起來很像純 JavaScript。在後台，代碼做的事情幾乎與 React 代碼做的一樣。 Svelte 仍然有像 `onMount` 和 `onDestroy` 這樣的鉤子，但是簡單地分配一個變量並讓它完全響應並在模板 (HTML) 中可訪問不需要任何特殊的語法糖。 另一個很大的區別是您可以直接在 Svelte 組件中編寫 CSS/SCSS。這只是一個選項，因為您仍然可以像在 React 中一樣導入樣式，但我注意到大多數 Svelte 項目都使用樣式內組件。 ### **Svelte 代碼分解** https://codesandbox.io/embed/svelte-water-example-scrimba-2vsoid?fontsize=14&hidenavigation=1&module=%2FApp.svelte&theme=dark&view=editor 上面的代碼實例化了一個 cupsOfWater 數組，將新的日期變量設置為當前日期。 聲明一個函數來創建一個新日期並將其存儲在一個名為 cup 的變量中，然後將其添加到 cupsOfWater 數組中。 模板部分更接近 HTML 並增加了一些功能。再次使用“{}”表示法，您可以從“<script>”部分引用任何聲明的變量。您還可以使用事件偵聽器（如 `on:click`）、條件（如 `{#if}`）和使用 `{#each}` 循環。 ### **Svelte 比 React 快嗎？** 是的，從快速的 HTML 生成到更快的構建和開發環境，Svelte 的性能都大大優於 React。 * 生成 HTML * 根據狀態更新 UI * 第一次內容豐富的渲染 * 互動時間 * 速度指數 所有這些都看到了可衡量的差異，而 Svelte 具有優勢。您的應用程序越大越複雜，差異就越明顯。 在 Zeitspace 的一篇文章中可以看到性能比較 https://www.zeitspace.com/blog/we-built-an-app-with-svelte.-heres-what-we-learned ### **Svelte 比 React 好嗎？** 當開始一個新專案時，Svelte 有足夠的優勢，它應該始終是一個考慮因素。 話雖如此，React 在使用率方面仍然絕對勝過 Svelte。這可能會導致專案的第 3 方插件支持、僱用和壽命問題。 不過，為了應對這一點，Svelte 語法的易用性使其非常容易上手，尤其是對於 React 開發人員而言。這是公司在招聘 Svelte 項目時可以藉鑑的東西（不要將自己局限於 Svelte 開發人員）。 ### **何時從 React 切換到 Svelte** Svelte 是構建複雜網站或 Web 應用程序的絕佳選擇。許多老牌公司已經開始將 Svelte 用於內部和外部應用程序： * 1Password * Avast * Chess.com * Alaska Airlines * Fusion Charts * Rakuten * GoDaddy * IBM * Square * 紐約時報 * 飛利浦 但這並不意味著您必須將當前的 React 應用程序放入垃圾桶！ 那麼什麼時候是接觸 Svelte 的合適時機？ 如果您的應用/網站： * 由於頻寬限制，需要較小的包大小 * 需要盡可能快 * 需要快速建造 When is not the right time to reach for Svelte? 什麼時候不適合使用 Svelte？ 如果您的應用/網站： * 嚴重依賴第 3 方集成/工具 * 需要轉換為移動應用程序 這些很快就不會成為問題，但在投入之前確實需要進行一些研究和盡職調查。 ### **結論** 建議投入其中並嘗試在 Svelte 中構建一些東西。如果你來自 React，我幾乎可以向你保證你會喜歡它的簡單性和速度。
來看看一些對 React 開發人員最有用的 VS Code 外掛吧！ - 原文網址：https://dev.to/devland/vs-code-extensions-you-should-use-as-a-react-developer-2f6i ## ES7 React/Redux/GraphQL/React-Native snippets  最流行的外掛之一，由 React 開發人員提供，也由 React-Native 開發人員參與。它帶有許多速記前綴，您可以輕鬆使用它來加快開發過程。 這個外掛提供了很多你可能不知道的功能。一旦你安裝了這個驚人的外掛，創建一個新文件並輸入 rfce 然後按回車鍵，這將生成一個 React 功能組件，導入 React 並導出元件。  它還允許您在幾秒鐘內創建不同的 es7 片段，只需輸入前綴簡寫並按 enter。 此外，如果您使用的是 Redux 或 GraphQL，此外掛也為它們提供了程式碼片段。 ## VSCode React Refactor  簡單，但非常有用。允許您將 JSX 部分提取到新元件、文件等。使用類別、函數和箭頭函數並支持 TypeScript 和 TSX。 ## Prettier  經過多年使用 Prettier，我認為它是任何專案的都好用的外掛。這是一個自動為你格式化程式碼的工具。它有助於保持程式庫的一致性，因為無論團隊中的開發人員有什麼個人偏好，所有程式碼都將以相同的方式格式化。 ## Eslint  用於查找程式碼中的錯誤和缺陷。它可以幫助開發人員編寫沒有錯誤和警告的優質程式碼。 此外，它可以自動修復錯誤和警告。 ## Stylelint  和ESLint類似，也是一個linter，但是針對樣式。它可以檢測並突出顯示不正確的樣式，並有助於保持樣式一致和有序。更重要的是，它適用於純 CSS 以及 SCSS 和 LESS 等預處理器。 ## GitLens  增強了 Visual Studio Code 中內置的 Git 功能。它可以幫助您通過 Git 責備註釋和 code lens 一目了然地可視化代碼作者身份，無縫導航和探索 Git 存儲庫。 ## Git History  允許您查看 git 日誌和文件歷史記錄，並比較分支或提交。 ## Settings sync  您是否曾經重新安裝作業系統或更改您編寫程式碼的設備、繼續安裝 VS Code、然後發現您需要重新安裝所有外掛？它可以自動保存你的外掛和 VS Code 設置，然後在另一台設備上安裝和配置它們。 ## Bracket Pair Colorization Toggler  非常簡單但有用的擴展。突出顯示匹配的括號對。 ## Auto Close Tag  一個簡單但最有用的 React 外掛之一。它所做的是一件非常簡單的事情。 Auto close tag，顧名思義，為元素創建一個結束標籤，這意味著開發人員不需要編寫結束標籤。這可能看起來很簡單，但實際上，自動關閉標籤非常有用。 ## Auto Rename Tag  自動重命名成對的 HTML/XML 標籤。 ## Auto Import  自動為所有可用導入查找、解析並提供代碼操作和代碼完成。適用於 TypeScript 和 TSX。 ## Import Cost  在 React 中，安裝和導入套件是非常常見和必要的。導入大量套件可能會導致性能問題，因為其中一些包可能很重。此外掛在編輯器中顯示套件的大小。 ## Jumpy  您通常如何從一行程式碼轉到幾行和空格之外的特定關鍵字？多次使用鍵盤箭頭或單擊滑鼠？使用 Jumpy，您可以更有效率，因為它可以讓您快速跳轉到特定單詞。 ## i18n Ally  如果您的應用程序支持多種語言，就非常好用。 Formatting toggle  在某些情況下，我們希望暫時禁用像 Prettier 這樣的代碼格式化程序。這可以通過 Formatting toggle 外掛來完成，無需修改編輯器設置。 ## Npm intellisense  為導入語句中的 npm 模塊提供自動完成功能。 ## Web Accessibility  用於提高 Web 應用程序可訪問性的出色插件。它突出顯示了您應該考慮更改的元素，還提供了有關如何更新它們的提示。 ## Live Share  您願意與其他人協作編寫您的代碼嗎？ 此外掛使您能夠與他人實時編輯和調試代碼。 ## Better comments  用於在您的代碼中創建更人性化的註釋。它可以將評論分類為警報、查詢、待辦事項和突出顯示，並以不同的顏色顯示它們。 ## Docker  如果您的應用程序是使用 Docker 部署的，您可以考慮使用來簡化構建、管理和部署來自 VS Code 的容器化應用程序。 ## Remote — SSH  您是否需要訪問服務器才能遠程編輯文件？遠程 SSH 讓您可以使用任何帶有 SSH 服務器的遠程機器作為您的開發環境。您可以輕鬆地在遠程和本地開發環境之間切換。 ## WSL  如果您更喜歡在 Linux 上開發您的應用程序，但您的主要操作系統是 Windows，您可以考慮使用 Windows 子系統 Linux (WSL)。如果這樣做，那麼您可能會發現 WSL 擴展很有用，因為它可以讓您在 Windows 上使用 Vs Code構建 Linux 應用程序。在使用基於 Linux 的工具、運行時和實用程序進行開發時，您可以獲得 Windows 的所有生產力。 ## 實時服務器  如果您需要在文件更改時通過實時瀏覽器重新加載來快速啟動實時服務器，很推薦。 ## Debugger for Chrome and Debugger for Firefox  調試器提供了許多有用的功能，例如在斷點處暫停代碼執行、變量檢查等。這些擴展提供了 VS Code 編輯器內部的調試功能。 ## Change-case  顧名思義，此擴展允許您更改當前選擇或當前單詞的大小寫。如果您有很長的文本或想將多個變量轉換為相同的大小寫，這將非常有用。 ## Regex Previewer  大多數開發人員很少編寫 Regex 表達式。但是，如果必須，此擴展可能會非常方便。它在並排文檔中顯示當前正則表達式的匹配項。 ## DotENV  _.env_ 文件的語法突出顯示。 ## 結論 希望對您有幫助！
TypeScript 的型別系統很強大，大部分專案都在用。此外，在 TypeScript 中，其實有提供一些 Utility Types 來輔助我們進行型別定義與操作。今天與您分享其中五個。 - 原文出處：https://dev.to/murillonahvs/a-little-about-typescript-utility-types-1epd ### Summary - Pick - Omit - ReadOnly - Partial - Required --- ## 1. Pick(Type, Keys) Pick utility type 是從現有型別中選取某些屬性來生成新的型別。 基本上，Pick 從指定型別中刪除除指定鍵之外的所有鍵。 ``` type Person = { name: string lastName: string age: number hobbies: string } type SomePerson = Pick<Person, "name" | "age"> // type SomePerson = { // name: string; // age: number; // } ``` --- ## 2. Omit(Type, Keys) Omit utili type 與 Pick 型別相反，Omit 是寫出要省略的屬性，而不是要保留的屬性。 ``` type Person = { name: string lastName: string age: number hobbies: string } type SomePerson = Omit<Person, "lastName" | "hobbies"> // type SomePerson = { // name: string; // age: number; // } ``` --- ## 3. Readonly(Type) Readonly utility type 用於所有屬性都設置成唯讀的型別。無法為屬性分配新值，不然就跳 TypeScript 警告。 ``` type Person = { name: string } type ReadOnlyPerson = Readonly<Person> const person: ReadOnlyPerson = { name: "Fizz", } person.name = "Buzz" // Cannot assign to 'name' because it is a read-only property. ``` --- ## 4. Partial(Type) Partial utility type 用於所有屬性都設置為選填的型別。 ``` type Person = { name: string lastName: string age: number address: string } type PartialPerson = Partial<Person> // type PartialPerson = { // name?: string | undefined; // lastName?: string | undefined; // age?: number | undefined; // address?: string | undefined; // } ``` --- ## 5. Required(Type) Required utility type 與 Partial 相反。要求要定義好所有屬性。可用來避免選填屬性出現在此型別中。 ``` type Person = { name?: string lastName?: string age?: number address?: string } type RequiredPerson = Required<Person> // type RequiredPerson = { // name: string; // lastName: string; // age: number; // address: string; // } ``` --- 以上，簡單舉例五個分享，有很多好用的 utility type，歡迎查看官網了解更多： https://www.typescriptlang.org/docs/handbook/utility-types.html
網路上免費的 React 版型資源不太好找，最好有一份懶人包。 這份列表整理了各式各樣的模板與主題套件，希望對您有幫助。 - 原文出處：https://dev.to/davidepacilio/35-free-react-templates-and-themes-32ci --- ##1. Open  [**Live demo**](https://open.cruip.com/) / [**Download**](https://github.com/cruip/open-react-template) Open 是一個免費的 React 模板，專為開源專案、線上服務、數位產品，創建快速、專業的登陸頁面而生。為了吸引潛在客戶和電子郵件訂閱者，Open 提供了一個多功能的資源庫，其中包含時尚、簡約和可重複使用的元件和元素。 --- ##2. Atomize  [**Live demo**](https://atomizecode.com/) / [**Download**](https://github.com/proksh/atomize) Atomize 是一個 React UI 框架，旨在幫助開發人員與設計師合作，輕鬆構建一致和諧的用戶界面。由於樣式指南和靈活網格等資源的完美結合，Atomize 適合建立任何類型的響應式網站。 --- ##3. Treact  [**Live demo**](https://treact.owaiskhan.me/) / [**Download**](https://gumroad.com/l/QaruQ) Treact 是使用 TailwindCSS 作為前端框架開發的現代 React 模板和 UI 組件展示庫。這個精美的檔案庫提供了 7 個內建的主頁、8 個輔助頁面以及 52 個預先設計的元素和段落。每個內容都可以針對家用電腦、平板電腦和移動設備進行擴充。 --- ##4. MatX  [**Live demo**](http://matx-react.ui-lib.com/dashboard/analytics) / [**Download**](https://ui-lib.com/downloads/matx-react-dashboard/) MatX 是一個建立在 Material Design 之上的精美 React Native 模板。此模板使用 React、Redux 和 Material UI，它包含為 Web 應用程式提供新造型可能需要的所有基本功能。 MatX 的免費版本可用於輕鬆設置管理面板、用戶管理系統和專案管理系統。 --- ##5. Holly  [**Live demo**](https://lukemcdonald.github.io/holly-react/) / [**Download**](https://github.com/lukemcdonald/holly-react) Holly 是一個響應式 React JS 模板，適用於線上服務和數位產品的生產者，能在主要產品仍在開發中時，就開始搜集電子郵件地址。這個模板最初是由 [Cruip](https://cruip.com/) 用 HTML 設計的，然後在這個版本中用 React 撰寫。 --- ##6. OAH-Admin  [**Live demo**](https://oah-admin.ahmedelywa.com/extra-components/progress/) / [**Download**](https://github.com/AhmedElywa/oah-admin) OAH-Admin 是一個基於 Gatsby 的免費 React 管理儀表板模板，帶有 oah-ui 元件和元素包。這個 React 模板有良好的 UI 元件色調，超級整潔和靈活的格式使任何人都可以輕鬆建立 SaaS 應用程式、管理面板、儀表板。 --- ##7. Gatsby Starter Ghost  [**Live demo**](https://gatsby.ghost.org/) / [**Download**](https://github.com/TryGhost/gatsby-starter-ghost) 使用 Ghost 這個基於 Gatsby 的入門模板，輕鬆建立高效能網站。Gatsby Starter Ghost 是一個乾淨而現代的模板，適用於部落格、雜誌或任何新聞網站。該產品專門設計來幫助任何人在網路上建立個人空間並分享想法、創意和更新。 --- ##8. Star Admin  [**Live demo**](https://www.bootstrapdash.com/demo/star-admin-free/react/template/demo_1/preview/dashboard) / [**Download**](https://github.com/BootstrapDash/StarAdmin-Free-React-Admin-Template) 一個免費的 React Native 模板，提供了無窮無盡的各種基本元素，可以將任何想法變為現實。該模板具有精心製作的儀表板，包含大量整齊排列和組織的元件，它可以完美地與所有最新和現代的瀏覽器配合使用，並且能夠使資料可視化過程更易於管理。 --- ##9. Carolina Admin Dashboard  [**Live demo**](https://demo.uifort.com/carolina-react-admin-dashboard-material-ui-free-demo/LandingPage) / [**Download**](https://uifort.com/template/carolina-react-admin-dashboard-material-ui-free/) 如果您正在尋找一個令人驚嘆且實用的 React 儀表板模板，Carolina Admin Dashboard 擁有啟動和運行您 Web 專案所需的一切。這個漂亮的模板建立在 Material-UI 框架之上，採用乾淨清新的設計，遵循所有 Google 的 Material Design 指南。此外，核心結構是完全響應式和開源的。 --- ##10. Tabler  [**Live demo**](http://tabler-react.com/) / [**Download**](https://github.com/tabler/tabler-react) Tabler 是一個免費的 React 管理儀表板模板，非常適合任何類型的後端 Web 應用。此管理模板包含大量精心設計的範例，無需從頭開始，可為您節省大量時間，它還附帶可重複使用的元件，例如按鈕、地圖、圖表、表單等。 --- ##11. React Nice Resume  [**Live demo**](https://nordicgiant2.github.io/react-nice-resume-page/#home) / [**Download**](https://github.com/nordicgiant2/react-nice-resume) React Nice Resume 是一個漂亮的主題，如果您是開發人員、設計師或一般的數位創作者，可以用來宣傳您自己和您的作品。該資源展示了一個獨特的主頁，帶有粒子背景、工作經驗時間線、技能圖表、顯示最新專案的縮略圖、一個帶有功能輸入表單的段落。 --- ##12. Boss Lite  [**Live demo**](http://boss.ux-maestro.com/app/tables/data-table) / [**Download**](https://github.com/ilhammeidi/boss-lite) Boss Lite 是一個基於 React 和 Redux 的管理儀表板模板。此模板為您帶來清新現代的設計和多種配色方案。它支援大多類型的 Web 專案，並且 Flexbox 佈局而變得很流暢。 --- ##13. Chakra UI  [**Live demo**](https://chakra-ui.com/) / [**Download**](https://github.com/chakra-ui/chakra-ui/) Chakra UI 提供了一組好用、可重用的 React 功能元件，使建立好用網站和用戶界面變得非常簡單。 Chakra UI 中的幾乎所有元素都兼容深色模式，它們遵循 WAI-ARIA 指南規範，並構建在 React UI Primitive 之上以實現無限的可組合性。 --- ##14. Black Dashboard React  [**Live demo**](https://demos.creative-tim.com/black-dashboard-react/#/admin/dashboard) / [**Download**](https://www.creative-tim.com/product/black-dashboard-react) Black Dashboard React 是用於管理界面的 React 模板。該模板基於 Bootstrap 建立的設計指南，是基於企業的應用程式，是強大後端軟體可用的優秀前端選項。它具有更高等級的切分、設計套件、可重複使用的圖表，能夠不斷改善用戶和開發體驗。 --- ##15. Argon Design System  [**Live demo**](https://demos.creative-tim.com/argon-design-system-react/) / [**Download**](https://github.com/creativetimofficial/argon-design-system-react) 使用 Bootstrap 4 和 Reactstrap 的 React 設計系統。Argon Design System 帶有 100 多個單獨的元件、內建的範例，並且每個元素都有多種樣式、懸停、焦點狀態，任何人都可以輕鬆使用。該產品是從原型設計到正式上線的完美解決方案。 --- ##16. Devias Kit - Admin Dashboard  [**Live demo**](https://react-material-dashboard.devias.io/dashboard) / [**Download**](https://github.com/devias-io/react-material-dashboard) Devias Kit 是一個響應式 Material Design 管理儀表板，專為 React 使用 Google 自己的 Material Design 框架建立。可以自定義設置、指令、圖標和樣式。該模板包含清晰直觀的目錄和文件、快速入門文件，如果您想對設計進行任何更改，甚至還有 Sketch 文件。 --- ##17. Dev Blog  [**Live demo**](https://ryanfitzgerald.github.io/devblog/) / [**Download**](https://github.com/RyanFitzgerald/devblog) Dev Blog 是一個 React 網站模板，專為快速建立副專案和產品而生。該網站模板帶有一個首頁，其中顯示了部落格名稱、社交媒體圖示以及帶有文字和圖像的文章縮圖。該模板還包括單個文章頁面，有漂亮且精心策劃的排版。 --- ##18. Material PRO  [**Live demo**](https://wrappixel.com/demos/free-admin-templates/materialpro-reactadmin-lite/main/#/starter/starter) / [**Download**](https://www.wrappixel.com/templates/materialpro-react-admin-lite/) Material Pro 是一個免費的 React Native 模板，為任何需要管理儀表板的人精心製作。這個漂亮而清爽的產品採用模組化和現代設計理念開發，100% 免費使用和下載，並包含許多頁面，可幫助您更快、更輕鬆地建立專案。 --- ##19. Ant Design Landing  [**Live demo**](https://landing.ant.design/) / [**Download**](https://github.com/ant-design/ant-design-landing) Landing 是 Ant Design System 建立的模板。內涵不同樣式的首頁和內頁模組。 --- ##20. Isomorphic  [**Live demo**](https://isomorphic.redq.io/dashboard) / [**Download**](https://github.com/pujoey/ismorphic) Isomorphic 是一個易於管理且有吸引力的管理模板，具有大量靈活的元件。 --- ##21. Shards Dashboard Lite  [**Live demo**](https://designrevision.com/demo/shards-dashboard-lite-react/blog-overview) / [**Download**](https://designrevision.com/downloads/shards-dashboard-lite-react/) Shards 是一個免費的 React 儀表板模板，具有現代設計系統和許多自定義頁面和部分。 --- ##22. uiw  [**Live demo**](https://uiwjs.github.io/) / [**Download**](https://github.com/uiwjs/uiw) uiw 是用於 React 16+ 的高質量 React 元件庫和 UI 工具包。 --- ##23. React Material Admin  [**Live demo**](https://flatlogic.github.io/react-material-admin/#/login) / [**Download**](https://flatlogic.com/templates/react-material-admin) React Material Admin 是一個建立在 Material-UI 框架之上的 React 儀表板。 --- ##24. Material KIT React  [**Live demo**](https://demos.creative-tim.com/material-kit-react/) / [**Download**](https://www.creative-tim.com/product/material-kit-react) Material UI KIT 是一款免費的 React UI 主題，其設計靈感來自 Google 的 Material Design，設計清新整潔。 --- ##25. Airframe  [**Live demo**](http://dashboards.webkom.co/react/airframe/dashboards/projects/) / [**Download**](https://github.com/0wczar/airframe-react) Airframe 是一個基於 Bootstrap 4 和 React 16 的免費開源 React 應用程式模板。 --- ##26. Gatsby Simplefolio  [**Live demo**](https://gatsby-simplefolio.netlify.app/) / [**Download**](https://github.com/cobidev/gatsby-simplefolio) Gatsby Simplefolio 是一個乾淨、美觀且響應迅速的 React 組合模板。 --- ##27. Ant Design Pro  [**Live demo**](https://pro.ant.design/) / [**Download**](https://github.com/ant-design/ant-design-pro/) React --- ##28. React SaaS Template  [**Live demo**](https://reactsaastemplate.com/) / [**Download**](https://github.com/dunky11/react-saas-template) --- ##29. Shards React  [**Live demo**](https://designrevision.com/downloads/shards-react/) / [**Download**](https://github.com/designrevision/shards-react) --- ##30. Base Web  [**Live demo**](https://baseweb.design/) / [**Download**](https://github.com/uber/baseweb) --- ##31. Light Blue React Dashboard  [**Live demo**](https://demo.flatlogic.com/light-blue-react/#/app/main/dashboard) / [**Download**](https://github.com/flatlogic/light-blue-react-template) --- ##32. React JS Landing  [**Live demo**](https://react-landing-page-template.herokuapp.com/#page-top) / [**Download**](https://github.com/IssaafKattan/React-Landing-Page-Template) --- ##33. Admin Pro  [**Live demo**](https://wrappixel.com/demos/free-admin-templates/adminpro-react-lite/main/#/dashboard) / [**Download**](https://www.wrappixel.com/templates/adminpro-react-admin-lite/#comparison) --- ##34. Blueprint  [**Live demo**](https://blueprintjs.com/) / [**Download**](https://github.com/palantir/blueprint) --- ##35. Datta  [**Live demo**](http://lite.codedthemes.com/datta-able/react/default/dashboard/default) / [**Download**](https://codedthemes.com/item/datta-able-react-free-admin-template/) --- ##36. Flatlogic One  [**Live demo**](https://flatlogic.github.io/one-react-template/#/login) / [**Download**](https://flatlogic.com/templates/one-free-react-template) --- ##結論 我希望這組免費的 React 模板和主題能夠幫助您！
程式碼審查很難。以下是一些心得分享。 - 原文出處：https://dev.to/saminarp/today-i-learned-the-subtle-art-of-code-reviews-3pef --- 我最近在審查 https://github.com/humphd/my-photohub 的一個 PR。 這是我有生以來第一次進行程式碼審查，也讓我知道這項任務有多麼困難。第一次當審閱者，我發現自己盯著程式碼，思考可以做些什麼來讓它更好。感覺相當迷茫。我想出了一些平庸的建議。沒想到什麼厲害的。沒有什麼讓我覺得很滿意的建議。然後是 Dave 教授 https://github.com/humphd 對我正在審查的同一個 PR 進行程式碼審查。我只是坐在那裡，對他看到而我沒看到的細節感到驚訝。他提出了一些大改善，比如更好的程式設計邏輯，以及一些小建議，比如更新專案描述。這些小建議我也可以提出：更好的專案描述、更適合專案的圖示而不是預設的 React 圖示、並為某些事情創建紀錄追蹤。為什麼我會忽略掉 Dave 教授如此優雅、毫不費力就指出的明顯事情？ ## 一些程式碼審查的最佳實踐 這是一篇很棒的文章 https://google.github.io/eng-practices/review/reviewer/looking-for.html 我在研究程式碼審查最佳實踐時找到的。 它漂亮地闡述了設計、功能、複雜性、測試、命名、註釋、樣式、一致性、文檔和上下文都是代碼審查的重要組成。 ## 時間、注意力、溝通 好的審查需要時間和注意力。它需要我們批判性地思考程式設計邏輯。對於初學者來說，盯著別人寫的程式碼來建議一些有意義的東西，可能會讓人感到不知所措。害怕犯錯。害怕冒犯寫程式的人。我知道，因為這些我都有感受到。在開源專案中，在提供建設性回饋的同時，在溝通中保持禮貌和尊重很重要。我們有時可能不認同審查，這種時候，我們應該禮貌地溝通。 在給予和接受回饋時，保持開放的心態也很重要。正是通過這種思想交流和回饋，我們才能夠隨著時間一直進步。 如果你有一些寫程式經驗，只要花足夠的時間專心看程式碼，幾乎總是可以提出改進建議。 ## 從小處著手 如果您是初學者，請從小處著手並向他人學習。閱讀 Dave 教授的評論，我學到了很多重要的東西。然後我意識到，只有看到更有經驗的人如何審查程式碼，我才能變得更好。我記下了我在 GitHub 上閱讀他的大量評論所學到的東西。我把這些東西變成了清單： - 如果不清楚，請詢問有關某程式碼的具體問題。 - 找找看未使用的依賴項和優化 package.json 的方法。 - 從整個程式碼庫的上下文中來看事情。 - 留下一些鼓勵的話，指出開發人員做對了什麼！ - 專注於功能和相容性。 - 找出清晰的命名和適當的命名約定。 - 查看 README 檔或 CONTRIBUTING.md 檔時，請看看樣式、格式、拼寫和語法的一致性。 - 確保設計和UI看起來不錯。 - 確保單元測試是為這段程式碼適當設計的。 - 確保程式碼符合提供的某個樣式指南。 ## `linters` 會帶給我們信任 程式碼自動檢查器和靜態工具分析器可以幫助審閱者節省大量時間在尋找愚蠢的拼寫錯誤或樣式錯誤。linters 和 sanners 的作用大概就是拼寫和語法檢查。省下了檢查格式和其他風格的麻煩，審閱者可以專注於程式碼的實際邏輯。作為程式碼審閱者，必須使用可用的自動代碼檢查器來節省時間和心思。 ## 關於生產力的最後一點想法 如果你像我一樣喜歡閱讀有關心理學和生產力的文章，這是一篇很棒的文章 https://jamesclear.com/focus#Focus%20on%20the%20Process
React 作為一個強大的前端工具，有很多需要熟悉的基本觀念＆語法。 這篇文章做一個快速的全面整理，方便工作時，可以隨時翻閱，希望您喜歡。 - 原文出處：https://dev.to/reedbarger/the-react-cheatsheet-for-2020-real-world-examples-4hgg ## 核心概念 ### 元素和 JSX - React 元素的基本語法 ``` // In a nutshell, JSX allows us to write HTML in our JS // JSX can use any valid html tags (i.e. div/span, h1-h6, form/input, etc) <div>Hello React</div> ``` - JSX 元素就是一段表達式 ``` // as an expression, JSX can be assigned to variables... const greeting = <div>Hello React</div>; const isNewToReact = true; // ... or can be displayed conditionally function sayGreeting() { if (isNewToReact) { // ... or returned from functions, etc. return greeting; // displays: Hello React } else { return <div>Hi again, React</div>; } } ``` - JSX 允許我們嵌套表達式 ``` const year = 2020; // we can insert primitive JS values in curly braces: {} const greeting = <div>Hello React in {year}</div>; // trying to insert objects will result in an error ``` - JSX 允許我們嵌套元素 ``` // to write JSX on multiple lines, wrap in parentheses: () const greeting = ( // div is the parent element <div> {/* h1 and p are child elements */} <h1>Hello!</h1> <p>Welcome to React</p> </div> ); // 'parents' and 'children' are how we describe JSX elements in relation // to one another, like we would talk about HTML elements ``` - HTML 和 JSX 的語法略有不同 ``` // Empty div is not <div></div> (HTML), but <div/> (JSX) <div/> // A single tag element like input is not <input> (HTML), but <input/> (JSX) <input name="email" /> // Attributes are written in camelcase for JSX (like JS variables <button className="submit-button">Submit</button> // not 'class' (HTML) ``` - 最基本的 React 應用程式需要三樣東西： - 1. ReactDOM.render() 渲染我們的應用程序 - 2. 一個 JSX 元素（在此情況下，稱為根節點） - 3. 一個用於掛載應用程式的 DOM 元素（通常是 index.html 文件中 id 為 root 的 div） ``` // imports needed if using NPM package; not if from CDN links import React from "react"; import ReactDOM from "react-dom"; const greeting = <h1>Hello React</h1>; // ReactDOM.render(root node, mounting point) ReactDOM.render(greeting, document.getElementById("root")); ``` ### 元件和 Props - 基本 React 元件的語法 ``` import React from "react"; // 1st component type: function component function Header() { // function components must be capitalized unlike normal JS functions // note the capitalized name here: 'Header' return <h1>Hello React</h1>; } // function components with arrow functions are also valid const Header = () => <h1>Hello React</h1>; // 2nd component type: class component // (classes are another type of function) class Header extends React.Component { // class components have more boilerplate (with extends and render method) render() { return <h1>Hello React</h1>; } } ``` - 如何使用元件 ``` // do we call these function components like normal functions? // No, to execute them and display the JSX they return... const Header = () => <h1>Hello React</h1>; // ...we use them as 'custom' JSX elements ReactDOM.render(<Header />, document.getElementById("root")); // renders: <h1>Hello React</h1> ``` - 元件可以在我們的應用程式中重複使用 ``` // for example, this Header component can be reused in any app page // this component shown for the '/' route function IndexPage() { return ( <div> <Header /> <Hero /> <Footer /> </div> ); } // shown for the '/about' route function AboutPage() { return ( <div> <Header /> <About /> <Testimonials /> <Footer /> </div> ); } ``` - 資料可以通過 props 動態傳遞給元件 ``` // What if we want to pass data to our component from a parent? // I.e. to pass a user's name to display in our Header? const username = "John"; // we add custom 'attributes' called props ReactDOM.render( <Header username={username} />, document.getElementById("root") ); // we called this prop 'username', but can use any valid JS identifier // props is the object that every component receives as an argument function Header(props) { // the props we make on the component (i.e. username) // become properties on the props object return <h1>Hello {props.username}</h1>; } ``` - Props 不可直接改變（mutate） ``` // Components must ideally be 'pure' functions. // That is, for every input, we be able to expect the same output // we cannot do the following with props: function Header(props) { // we cannot mutate the props object, we can only read from it props.username = "Doug"; return <h1>Hello {props.username}</h1>; } // But what if we want to modify a prop value that comes in? // That's where we would use state (see the useState section) ``` - 如果我們想將元素/元件作為 props 傳遞給其它元件，可以用 children props ``` // Can we accept React elements (or components) as props? // Yes, through a special property on the props object called 'children' function Layout(props) { return <div className="container">{props.children}</div>; } // The children prop is very useful for when you want the same // component (such as a Layout component) to wrap all other components: function IndexPage() { return ( <Layout> <Header /> <Hero /> <Footer /> </Layout> ); } // different page, but uses same Layout component (thanks to children prop) function AboutPage() { return ( <Layout> <About /> <Footer /> </Layout> ); } ``` - 可以用三元運算子來條件顯示元件 ``` // if-statements are fine to conditionally show , however... // ...only ternaries (seen below) allow us to insert these conditionals // in JSX, however function Header() { const isAuthenticated = checkAuth(); return ( <nav> <Logo /> {/* if isAuth is true, show AuthLinks. If false, Login */} {isAuthenticated ? <AuthLinks /> : <Login />} {/* if isAuth is true, show Greeting. If false, nothing. */} {isAuthenticated && <Greeting />} </nav> ); } ``` - Fragments 是用來顯示多個元件的特殊元件，無需向 DOM 添加額外的元素 - Fragments 適合用在條件邏輯 ``` // we can improve the logic in the previous example // if isAuthenticated is true, how do we display both AuthLinks and Greeting? function Header() { const isAuthenticated = checkAuth(); return ( <nav> <Logo /> {/* we can render both components with a fragment */} {/* fragments are very concise: <> </> */} {isAuthenticated ? ( <> <AuthLinks /> <Greeting /> </> ) : ( <Login /> )} </nav> ); } ``` ### 列表和 keys - 使用 .map() 將資料列表（陣列）轉換為元素列表 ``` const people = ["John", "Bob", "Fred"]; const peopleList = people.map(person => <p>{person}</p>); ``` - .map() 也可用來轉換為元件列表 ``` function App() { const people = ['John', 'Bob', 'Fred']; // can interpolate returned list of elements in {} return ( <ul> {/* we're passing each array element as props */} {people.map(person => <Person name={person} />} </ul> ); } function Person({ name }) { // gets 'name' prop using object destructuring return <p>this person's name is: {name}</p>; } ``` - 迭代的每個 React 元素都需要一個特殊的 `key` prop - key 對於 React 來說是必須的，以便能夠追蹤每個正在用 map 迭代的元素 - 沒有 key，當資料改變時，React 較難弄清楚元素應該如何更新 - key 應該是唯一值，才能讓 React 知道如何分辨 ``` function App() { const people = ['John', 'Bob', 'Fred']; return ( <ul> {/* keys need to be primitive values, ideally a generated id */} {people.map(person => <Person key={person} name={person} />)} </ul> ); } // If you don't have ids with your set of data or unique primitive values, // you can use the second parameter of .map() to get each elements index function App() { const people = ['John', 'Bob', 'Fred']; return ( <ul> {/* use array element index for key */} {people.map((person, i) => <Person key={i} name={person} />)} </ul> ); } ``` ### 事件和事件處理器 - React 和 HTML 中的事件略有不同 ``` // Note: most event handler functions start with 'handle' function handleToggleTheme() { // code to toggle app theme } // in html, onclick is all lowercase <button onclick="handleToggleTheme()"> Submit </button> // in JSX, onClick is camelcase, like attributes / props // we also pass a reference to the function with curly braces <button onClick={handleToggleTheme}> Submit </button> ``` - 最該先學的 React 事件是 onClick 和 onChange - onClick 處理 JSX 元素上的點擊事件（也就是按鈕動作） - onChange 處理鍵盤事件（也就是打字動作） ``` function App() { function handleChange(event) { // when passing the function to an event handler, like onChange // we get access to data about the event (an object) const inputText = event.target.value; const inputName = event.target.name; // myInput // we get the text typed in and other data from event.target } function handleSubmit() { // on click doesn't usually need event data } return ( <div> <input type="text" name="myInput" onChange={handleChange} /> <button onClick={handleSubmit}>Submit</button> </div> ); } ``` ## React Hooks ### State and useState - useState 為我們提供 function component 中的本地狀態 ``` import React from 'react'; // create state variable // syntax: const [stateVariable] = React.useState(defaultValue); function App() { const [language] = React.useState('javascript'); // we use array destructuring to declare state variable return <div>I am learning {language}</div>; } ``` - 注意：此段文章中的任何 hook 都來自 React 套件，且可以單獨導入 ``` import React, { useState } from "react"; function App() { const [language] = useState("javascript"); return <div>I am learning {language}</div>; } ``` - useState 還為我們提供了一個 `setter` 函數來更新它的狀態 ``` function App() { // the setter function is always the second destructured value const [language, setLanguage] = React.useState("python"); // the convention for the setter name is 'setStateVariable' return ( <div> {/* why use an arrow function here instead onClick={setterFn()} ? */} <button onClick={() => setLanguage("javascript")}> Change language to JS </button> {/* if not, setLanguage would be called immediately and not on click */} <p>I am now learning {language}</p> </div> ); } // note that whenever the setter function is called, the state updates, // and the App component re-renders to display the new state ``` - useState 可以在單個元件中使用一次或多次 ``` function App() { const [language, setLanguage] = React.useState("python"); const [yearsExperience, setYearsExperience] = React.useState(0); return ( <div> <button onClick={() => setLanguage("javascript")}> Change language to JS </button> <input type="number" value={yearsExperience} onChange={event => setYearsExperience(event.target.value)} /> <p>I am now learning {language}</p> <p>I have {yearsExperience} years of experience</p> </div> ); } ``` - useState 可以接受 primitive value 或物件 ``` // we have the option to organize state using whatever is the // most appropriate data type, according to the data we're tracking function App() { const [developer, setDeveloper] = React.useState({ language: "", yearsExperience: 0 }); function handleChangeYearsExperience(event) { const years = event.target.value; // we must pass in the previous state object we had with the spread operator setDeveloper({ ...developer, yearsExperience: years }); } return ( <div> {/* no need to get prev state here; we are replacing the entire object */} <button onClick={() => setDeveloper({ language: "javascript", yearsExperience: 0 }) } > Change language to JS </button> {/* we can also pass a reference to the function */} <input type="number" value={developer.yearsExperience} onChange={handleChangeYearsExperience} /> <p>I am now learning {developer.language}</p> <p>I have {developer.yearsExperience} years of experience</p> </div> ); } ``` - 如果新狀態依賴於之前的狀態，我們可以在 setter 函數中使用一個函數來為我們提供之前狀態的值 ``` function App() { const [developer, setDeveloper] = React.useState({ language: "", yearsExperience: 0, isEmployed: false }); function handleToggleEmployment(event) { // we get the previous state variable's value in the parameters // we can name 'prevState' however we like setDeveloper(prevState => { return { ...prevState, isEmployed: !prevState.isEmployed }; // it is essential to return the new state from this function }); } return ( <button onClick={handleToggleEmployment}>Toggle Employment Status</button> ); } ``` ### side effects 和 useEffect - useEffect 讓我們在 function component 中執行副作用。什麼是副作用？ - 副作用是我們需要接觸外部世界的地方。例如，從 API 獲取資料或操作 DOM。 - 副作用是可能以不可預測的方式，改變我們元件狀態的操作（導致「副作用」）。 - useEffect 接受 callback function（稱為 effect 函數），預設情況下，每次重新渲染時都會運行 - useEffect 在我們的元件載入後運行，可以準確在元件的各個生命週期觸發 ``` // what does our code do? Picks a color from the colors array // and makes it the background color function App() { const [colorIndex, setColorIndex] = React.useState(0); const colors = ["blue", "green", "red", "orange"]; // we are performing a 'side effect' since we are working with an API // we are working with the DOM, a browser API outside of React useEffect(() => { document.body.style.backgroundColor = colors[colorIndex]; }); // whenever state is updated, App re-renders and useEffect runs function handleChangeIndex() { const next = colorIndex + 1 === colors.length ? 0 : colorIndex + 1; setColorIndex(next); } return <button onClick={handleChangeIndex}>Change background color</button>; } ``` - 如果不想在每次渲染後都執行 callback function，可以在第二個參數傳一個空陣列 ``` function App() { ... // now our button doesn't work no matter how many times we click it... useEffect(() => { document.body.style.backgroundColor = colors[colorIndex]; }, []); // the background color is only set once, upon mount // how do we not have the effect function run for every state update... // but still have it work whenever the button is clicked? return ( <button onClick={handleChangeIndex}> Change background color </button> ); } ``` - useEffect 讓我們能夠在 dependencies 陣列的內容改變時，才執行 - dependencies 陣列是第二個參數，如果陣列中的任何一個值發生變化，effect function 將再次運行 ``` function App() { const [colorIndex, setColorIndex] = React.useState(0); const colors = ["blue", "green", "red", "orange"]; // we add colorIndex to our dependencies array // when colorIndex changes, useEffect will execute the effect fn again useEffect(() => { document.body.style.backgroundColor = colors[colorIndex]; // when we use useEffect, we must think about what state values // we want our side effect to sync with }, [colorIndex]); function handleChangeIndex() { const next = colorIndex + 1 === colors.length ? 0 : colorIndex + 1; setColorIndex(next); } return <button onClick={handleChangeIndex}>Change background color</button>; } ``` - 可以在 useEffect 最後回傳一個函數，來取消訂閱某些效果 ``` function MouseTracker() { const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }); React.useEffect(() => { // .addEventListener() sets up an active listener... window.addEventListener("mousemove", handleMouseMove); // ...so when we navigate away from this page, it needs to be // removed to stop listening. Otherwise, it will try to set // state in a component that doesn't exist (causing an error) // We unsubscribe any subscriptions / listeners w/ this 'cleanup function' return () => { window.removeEventListener("mousemove", handleMouseMove); }; }, []); function handleMouseMove(event) { setMousePosition({ x: event.pageX, y: event.pageY }); } return ( <div> <h1>The current mouse position is:</h1> <p> X: {mousePosition.x}, Y: {mousePosition.y} </p> </div> ); } // Note: we could extract the reused logic in the callbacks to // their own function, but I believe this is more readable ``` - 使用 useEffect 撈取資料 - 請注意，如果要使用更簡潔的 async/awit 語法處理 promise，則需要建立一個單獨的函數（因為 effect callback function 不能是 async） ``` const endpoint = "https://api.github.com/users/codeartistryio"; // with promises: function App() { const [user, setUser] = React.useState(null); React.useEffect(() => { // promises work in callback fetch(endpoint) .then(response => response.json()) .then(data => setUser(data)); }, []); } // with async / await syntax for promise: function App() { const [user, setUser] = React.useState(null); // cannot make useEffect callback function async React.useEffect(() => { getUser(); }, []); // instead, use async / await in separate function, then call // function back in useEffect async function getUser() { const response = await fetch("https://api.github.com/codeartistryio"); const data = await response.json(); setUser(data); } } ``` ### 效能和 useCallback - useCallback 是一個用來提高元件性能的 hook - 如果你有一個經常重新渲染的元件，useCallback 可以防止元件內的 callback function 在每次元件重新渲染時都重新創建（導致元件重新運行） - useCallback 僅在其依賴項之一改變時重新運行 ``` // in Timer, we are calculating the date and putting it in state a lot // this results in a re-render for every state update // we had a function handleIncrementCount to increment the state 'count'... function Timer() { const [time, setTime] = React.useState(); const [count, setCount] = React.useState(0); // ... but unless we wrap it in useCallback, the function is // recreated for every single re-render (bad performance hit) // useCallback hook returns a callback that isn't recreated every time const inc = React.useCallback( function handleIncrementCount() { setCount(prevCount => prevCount + 1); }, // useCallback accepts a second arg of a dependencies array like useEffect // useCallback will only run if any dependency changes (here it's 'setCount') [setCount] ); React.useEffect(() => { const timeout = setTimeout(() => { const currentTime = JSON.stringify(new Date(Date.now())); setTime(currentTime); }, 300); return () => { clearTimeout(timeout); }; }, [time]); return ( <div> <p>The current time is: {time}</p> <p>Count: {count}</p> <button onClick={inc}>+</button> </div> ); } ``` ### Memoization 和 useMemo - useMemo 和 useCallback 非常相似，都是為了提高效能。但就不是為了暫存 callback function，而是為了暫存耗費效能的運算結果 - useMemo 允許我們「記憶」已經為某些輸入進行了昂貴計算的結果（之後就不用重新計算了） - useMemo 從計算中回傳一個值，而不是 callback 函數（但可以是一個函數） ``` // useMemo is useful when we need a lot of computing resources // to perform an operation, but don't want to repeat it on each re-render function App() { // state to select a word in 'words' array below const [wordIndex, setWordIndex] = useState(0); // state for counter const [count, setCount] = useState(0); // words we'll use to calculate letter count const words = ["i", "am", "learning", "react"]; const word = words[wordIndex]; function getLetterCount(word) { // we mimic expensive calculation with a very long (unnecessary) loop let i = 0; while (i < 1000000) i++; return word.length; } // Memoize expensive function to return previous value if input was the same // only perform calculation if new word without a cached value const letterCount = React.useMemo(() => getLetterCount(word), [word]); // if calculation was done without useMemo, like so: // const letterCount = getLetterCount(word); // there would be a delay in updating the counter // we would have to wait for the expensive function to finish function handleChangeIndex() { // flip from one word in the array to the next const next = wordIndex + 1 === words.length ? 0 : wordIndex + 1; setWordIndex(next); } return ( <div> <p> {word} has {letterCount} letters </p> <button onClick={handleChangeIndex}>Next word</button> <p>Counter: {count}</p> <button onClick={() => setCount(count + 1)}>+</button> </div> ); } ``` ### Refs 和 useRef - Refs 是所有 React 組件都可用的特殊屬性。允許我們在元件安裝時，創建針對特定元素/元件的引用 - useRef 允許我們輕鬆使用 React refs - 我們在元件開頭呼叫 useRef，並將回傳值附加到元素的 ref 屬性來引用它 - 一旦我們創建了一個引用，就可以用它來改變元素的屬性，或者可以呼叫該元素上的任何可用方法（比如用 .focus() 來聚焦） ``` function App() { const [query, setQuery] = React.useState("react hooks"); // we can pass useRef a default value // we don't need it here, so we pass in null to ref an empty object const searchInput = useRef(null); function handleClearSearch() { // current references the text input once App mounts searchInput.current.value = ""; // useRef can store basically any value in its .current property searchInput.current.focus(); } return ( <form> <input type="text" onChange={event => setQuery(event.target.value)} ref={searchInput} /> <button type="submit">Search</button> <button type="button" onClick={handleClearSearch}> Clear </button> </form> ); } ``` ## 進階 Hook ### Context 和 useContext - 在 React 中，盡量避免創建多個 props 來將資料從父元件向下傳遞兩個或多個層級 ``` // Context helps us avoid creating multiple duplicate props // This pattern is also called props drilling: function App() { // we want to pass user data down to Header const [user] = React.useState({ name: "Fred" }); return ( // first 'user' prop <Main user={user} /> ); } const Main = ({ user }) => ( <> {/* second 'user' prop */} <Header user={user} /> <div>Main app content...</div> </> ); const Header = ({ user }) => <header>Welcome, {user.name}!</header>; ``` - Context 有助於將 props 從父組件向下傳遞到多個層級的子元件 ``` // Here is the previous example rewritten with Context // First we create context, where we can pass in default values const UserContext = React.createContext(); // we call this 'UserContext' because that's what data we're passing down function App() { // we want to pass user data down to Header const [user] = React.useState({ name: "Fred" }); return ( {/* we wrap the parent component with the provider property */} {/* we pass data down the computer tree w/ value prop */} <UserContext.Provider value={user}> <Main /> </UserContext.Provider> ); } const Main = () => ( <> <Header /> <div>Main app content...</div> </> ); // we can remove the two 'user' props, we can just use consumer // to consume the data where we need it const Header = () => ( {/* we use this pattern called render props to get access to the data*/} <UserContext.Consumer> {user => <header>Welcome, {user.name}!</header>} </UserContext.Consumer> ); ``` - useContext hook 可以移除這種看起來很怪的 props 渲染模式，同時又能在各種 function component 中隨意使用 ``` const Header = () => { // we pass in the entire context object to consume it const user = React.useContext(UserContext); // and we can remove the Consumer tags return <header>Welcome, {user.name}!</header>; }; ``` ### Reducers 和 useReducer - Reducers 是簡單、可預測的（純）函數，它接受一個先前的狀態物件和一個動作物件，並回傳一個新的狀態物件。例如： ``` // let's say this reducer manages user state in our app: function reducer(state, action) { // reducers often use a switch statement to update state // in one way or another based on the action's type property switch (action.type) { // if action.type has the string 'LOGIN' on it case "LOGIN": // we get data from the payload object on action return { username: action.payload.username, isAuth: true }; case "SIGNOUT": return { username: "", isAuth: false }; default: // if no case matches, return previous state return state; } } ``` - Reducers 是一種強大的狀態管理模式，用於流行的 Redux 狀態管理套件（這套很常與 React 一起使用） - 與 useState（用於本地元件狀態）相比，Reducers 可以通過 useReducer hook 在 React 中使用，以便管理我們應用程序的狀態 - useReducer 可以與 useContext 配對來管理資料並輕鬆地將資料傳遞給元件 - useReducer + useContext 可以當成應用程式的整套狀態管理系統 ``` const initialState = { username: "", isAuth: false }; function reducer(state, action) { switch (action.type) { case "LOGIN": return { username: action.payload.username, isAuth: true }; case "SIGNOUT": // could also spread in initialState here return { username: "", isAuth: false }; default: return state; } } function App() { // useReducer requires a reducer function to use and an initialState const [state, dispatch] = useReducer(reducer, initialState); // we get the current result of the reducer on 'state' // we use dispatch to 'dispatch' actions, to run our reducer // with the data it needs (the action object) function handleLogin() { dispatch({ type: "LOGIN", payload: { username: "Ted" } }); } function handleSignout() { dispatch({ type: "SIGNOUT" }); } return ( <> Current user: {state.username}, isAuthenticated: {state.isAuth} <button onClick={handleLogin}>Login</button> <button onClick={handleSignout}>Signout</button> </> ); } ``` ### 編寫 custom hooks - 創建 hook 就能輕鬆在元件之間重用某些行為 - hook 是一種比以前的 class component 更容易理解的模式，例如 higher-order components 或者 render props - 根據需要，隨時可以自創一些 hook ``` // here's a custom hook that is used to fetch data from an API function useAPI(endpoint) { const [value, setValue] = React.useState([]); React.useEffect(() => { getData(); }, []); async function getData() { const response = await fetch(endpoint); const data = await response.json(); setValue(data); }; return value; }; // this is a working example! try it yourself (i.e. in codesandbox.io) function App() { const todos = useAPI("https://todos-dsequjaojf.now.sh/todos"); return ( <ul> {todos.map(todo => <li key={todo.id}>{todo.text}</li>)} </ul> ); } ``` ### Hooks 規則 - 使用 React hooks 有兩個核心規則，要遵守才能正常運作： - 1. Hooks 只能在元件開頭呼叫 - Hooks 不能放在條件、迴圈或嵌套函數中 - 2. Hooks只能在 function component 內部使用 - Hooks 不能放在普通的 JavaScript 函數或 class component 中 ``` function checkAuth() { // Rule 2 Violated! Hooks cannot be used in normal functions, only components React.useEffect(() => { getUser(); }, []); } function App() { // this is the only validly executed hook in this component const [user, setUser] = React.useState(null); // Rule 1 violated! Hooks cannot be used within conditionals (or loops) if (!user) { React.useEffect(() => { setUser({ isAuth: false }); // if you want to conditionally execute an effect, use the // dependencies array for useEffect }, []); } checkAuth(); // Rule 1 violated! Hooks cannot be used in nested functions return <div onClick={() => React.useMemo(() => doStuff(), [])}>Our app</div>; } ``` --- 以上是快速整理，希望對您有幫助！
Github 是開發人員互相分享的寶庫。可以在上面找到任何與軟體工程有關的東西。就跟一般礦山一樣，要懂得採礦，才能得到有價值的礦物。 我一直在尋找 github 上面的寶庫，以下列出五個優質寶庫： - 原文出處：https://dev.to/wizdomtek/5-github-repositories-every-developer-should-know-1p93 # 1. Professional Programming 整理了大量經典書籍、優質網站的專案。 閱讀相關內容會有點花時間，但如果你想要持續提升自己，那這專案很適合你。 https://github.com/charlax/professional-programming # 2. Web Dev For Beginners 這是由 Microsoft 的 Azure Cloud Advocates 團隊，提供的 12週、24週線上課程。通通關於 JavaScript、CSS 和 HTML 基礎知識。每節課都包括課前和課後測驗、內容說明、解決方案、作業等。這種以寫專案為主的教學法，讓您一邊開發、一邊學習，是一種讓有效學習新技能的方法。 https://github.com/microsoft/Web-Dev-For-Beginners # 3. The art of command line 命令列是一門藝術，每個開發人員都有自己的使用習慣。最有用的指令是 man，可以用來查詢各種指令。 這個專案列出了各種常用指令與說明，值得一讀。 https://github.com/jlevy/the-art-of-command-line # 4. Project Based Learning 以專案開發為主的一系列學習資源。由一群熱心分享的工程師所整理。內含多種程式語言。 動手開發是學習程式設計的最好方法。不斷解決問題時，同時學習了知識。因為有了目標，大腦的記憶也更有效率。 https://github.com/practical-tutorials/project-based-learning # 5. Every Programmer Should Know 無論您有多熟練，您對技術的了解可能永遠都不夠。 聽起來很刺耳，但這句話是真的。技術世界太廣闊了，不可能了解一切。但這不是停止學習的理由。 瀏覽此專案，可以掌握很多新知識。 如果您想學習一些新鮮有趣的東西，可以將它當成學習工具。 https://github.com/mtdvio/every-programmer-should-know --- 以上，歡迎有空逛逛這些資源，祝您不斷變強。
身為網站工程師，很多時候需要查詢語法、關鍵字之類的東西！ 這邊整理了多份超方便的 cheatsheet 給您使用！ - 原文出處：https://dev.to/suprabhasupi/cheatsheet-for-web-developers-1opg # 1️⃣ HTML Cheatsheet 線上互動式 HTML 備忘單，包含範例程式碼以及各種 web 開發人員工具、生成器。 - https://htmlcheatsheet.com/ # 2️⃣ CSS Reference 有條理、好吸收的 Web 教學網站，包含大量 HTML、CSS、JavaScript、SQL、Python、PHP、Bootstrap、Java 等等的範例程式碼。 - https://cssreference.io/ # 3️⃣ Git Sheet 包含最重要和最常用的 Git 指令，參考起來很方便 - https://gitsheet.wtf/ # 4️⃣ OverAPI OverAPI.com 是一個收集所有備忘單的網站，有超多 cheatsheets 可以參考！ - https://overapi.com/ # 5️⃣ Dev Hints 整理很多優質的 ES6、SASS 等等備忘單，方便查詢 - https://devhints.io/ # 6️⃣ Cheatography Cheatography 整理 5047 個備忘單和 25 種程式語言，有超多內容可以逛逛看！ - https://cheatography.com/
你的轉職路上，還缺少一份自學作業包！寫完這幾包，直接拿作品去面試上班！
本論壇另有附設一個 LINE 新手發問＆交流群組！歡迎加入討論！
