在這個短教程中，我們將使用React建立一個非常簡單的計數器的例子，應用之前介紹的許多概念和理論。 讓我們在Codepen上進行這個例子。我們首先從fork一個React template pen開始。 在Codepen中，我們不需要導入React和ReactDOM，因為它們已經在範圍內添加了。 我們將計數顯示在一個div中，並添加幾個按鈕來增加這個計數： const Button = ({ increment }) => { return <button>+{increment}</button> } const App = () => { let count = 0 return ( <div> <Button increment={1} /> <Button increment={10} /> <Button increment={100} /> <Button increment={1000} /> <span>{count}</span> </div> ) } ReactDOM.render(<App />, document.getElementById('app')) 現在，讓我們通過添加onClickFunction屬性，增加讓我們通過點擊按鈕來改變計數的功能： const Button = ({ increment, onClickFunction }) => { const handleClick = () => { onClickFunction(increment) } return <button onClick={handleClick}>+{increment}</button> } const App = () => { let count = 0 const incrementCount = increment => { //TODO } return ( <div> <Button increment={1} onClickFunction={incrementCount} /> <Button increment={10} onClickFunction={incrementCount} /> <Button increment={100} onClickFunction={incrementCount} /> <Button increment={1000} onClickFunction={incrementCount} /> <span>{count}</span> </div> ) } ReactDOM....

什麼是服務器端渲染？如何使用React進行服務器端渲染？ 服務器端渲染，也被稱為SSR，是指JavaScript應用程序能夠在服務器上渲染，而不是在瀏覽器中渲染。 我們為什麼需要這樣做？ 它可以讓您的網站在首次加載時更快，這對於良好的用戶體驗非常重要。 對於SEO來說至關重要：搜索引擎無法（尚未？）有效且正確地索引僅在客戶端渲染的應用程序。儘管Google在索引方面進行了最新的改進，但還有其他搜索引擎，而且Google在任何情況下都不是完美的。此外，Google青睞加載速度快的站點，而需要客戶端加載對於速度來說並不理想。 當人們在社交媒體上分享您網站的頁面時，它非常好用，因為他們可以輕鬆收集到所需的元數據以便分享鏈接（圖片、標題、描述等）。 沒有服務器端渲染，您的服務器只是發送一個沒有正文的HTML頁面，僅帶有一些腳本標記，然後由瀏覽器用於渲染應用程序。客戶端渲染的應用程序在首次頁面加載後的任何後續用戶交互方面都很出色。服務器端渲染允許我們在客戶端渲染應用程序和後端渲染應用程序之間找到最佳點：頁面在服務器端生成，但一旦加載完成後所有與頁面的交互都由客戶端處理。 然而，服務器端渲染也有缺點： 可以說，服務器端渲染的簡單證明非常簡單，但隨著應用程序的複雜性增加，服務器端渲染的複雜性也會增加。 服務器端渲染一個大型應用程序可能需要相當多的資源，並且在負載過重時，甚至可能提供比客戶端渲染更慢的體驗，因為您有一個單一的瓶頸。 以下是服務器端渲染React應用程序所需的非常簡單的示例： SSR的設置可能會變得非常複雜，大多教程都會從一開始就包含Redux、React Router和許多其他概念。 要理解SSR的工作原理，讓我們從實施一個概念證明的基礎知識開始。 如果您只想查看提供SSR的庫，可以跳過這一段，不必擔心進行基礎工作。 為了實現基本的SSR，我們將使用Express。 如果您對Express不熟悉，或者需要進行一些補充，請查看我的免費Express手冊：https://flaviocopes.com/page/ebooks/ 警告：服務器端渲染的複雜性可能會隨著應用程序的複雜性增加而增加。這只是渲染基本React應用程序所需的最低設置。對於更複雜的需求，您可能需要進行更多的工作，或者還可以檢查React的SSR庫。 我假設您使用create-react-app開始了一個React應用程序。如果您只是嘗試，請使用npx create-react-app ssr來安裝一個。 在終端中進入主要應用程序文件夾，然後運行以下命令： npm install express 應用程序目錄中有一組文件夾。創建一個名為server的新文件夾，然後進入其中並創建一個名為server.js的文件。 根據create-react-app的規定，應用程序位於src/App.js文件中。我們將加載該組件，並使用ReactDOMServer.renderToString()將其渲染為字符串，該方法由react-dom提供。 您可以獲取./build/index.html文件的內容，並將默認情況下應用程序鉤住的標記<div id="root"></div>替換為${ReactDOMServer.renderToString()}。build文件夾中的所有內容都將以靜態方式由Express提供。 import path from 'path' import fs from 'fs' import express from 'express' import React from 'react' import ReactDOMServer from 'react-dom/server' import App from '../src/App' const PORT = 8080 const app = express() const router = express.Router() const serverRenderer = (req, res, next) => { fs....

學習在JavaScript中使用兩種現代技術來處理陣列和物件。 你可以使用spread運算子 ...來展開陣列、物件或字串。 讓我們從一個陣列的例子開始。給定 const a = [1, 2, 3] 你可以使用以下方式創建一個新的陣列 const b = [...a, 4, 5, 6] 你也可以使用以下方式創建一個陣列的複製 const c = [...a] 這對於物件也同樣適用。使用以下方式克隆一個物件： const newObj = { ...oldObj } 對於字串，spread運算子會創建一個包含字串中每個字符的陣列： const hey = 'hey' const arrayized = [...hey] // ['h', 'e', 'y'] 這個運算子有一些非常有用的應用。其中最重要的一個是在非常簡單的方式下將陣列用作函數參數： const f = (arg1, arg2) => {} const a = [1, 2] f(...a) （在過去，你可以使用 f.apply(null, a) 來實現這一點，但這不太好看和易讀） rest元素在處理陣列解構時非常有用： const numbers = [1, 2, 3, 4, 5] [first, second, ....

當使用useState定義的狀態變量是一個具有屬性的對象時，如何更新它可能有些困惑。 你不能只是更新對象，否則組件將不會重新渲染。 我找到的一種模式涉及創建一個帶有一個屬性的臨時對象，並使用對象解構來從現有的兩個對象中創建一個新對象： const [quizAnswers, setQuizAnswers] = useState({}) ... const updatedValue = {} updatedValue[quizEntryIndex] = answerIndex setQuizAnswers({ ...quizAnswers, ...updatedValue }) 同樣的技巧也可以用於刪除屬性： const copyOfObject = { ...quizAnswers } delete copyOfObject['propertyToRemove'] setQuizAnswers({ ...copyOfObject })

如果您從未建立過Vue.js應用程式，我將帶您透過建立一個Vue應用程式的任務，並了解其運作方式。我們即將建立的應用程式已經完成，並且這是Vue CLI的預設應用程式。 第一個範例 在Codepen上查看 第二個範例：Vue CLI的預設應用程式 本地使用Vue CLI 使用CodeSandbox 文件結構 index.html src/main.js src/App.vue src/components/HelloWorld.vue 運行應用程式 如果您從未建立過Vue.js應用程式，我將帶您透過建立一個Vue應用程式的任務，並了解其運作方式。 第一個範例 首先，我們將使用最基本的Vue範例。 您需要建立一個包含以下內容的HTML檔案： <html> <body> <div id="example"> <p>{{ hello }}</p> </div> <script src="https://unpkg.com/vue"></script> <script> new Vue({ el: '#example', data: { hello: 'Hello World!' } }) </script> </body> </html> 然後在瀏覽器中打開它。這就是您的第一個Vue應用程式！該頁面應該顯示一個“Hello World！”的訊息。 我將腳本標籤放在body的末尾，以便在DOM加載後按順序執行。 這段程式碼的作用是，我們實例化了一個新的Vue應用程式，將其連結到#example元素作為其模板（通常使用CSS選擇器來定義，但也可以傳遞HTMLElement）。 然後，它將該模板與data對象關聯。data是一個特殊的對象，用於存放我們希望Vue渲染的數據。 在模板中，特殊的{{ }}標記表示它是模板中的某一部分是動態生成的，其內容應從Vue應用程式數據中查找。 在Codepen上查看 您可以在Codepen上查看此範例： https://codepen.io/flaviocopes/pen/YLoLOp 碼筆與使用普通HTML檔案的方法有些不同，您需要在Pen設定中配置它以指向Vue庫的位置： 第二個範例：Vue CLI的預設應用程式 讓我們提升一點等級。我們即將建立的下一個應用程式是已經完成的Vue CLI預設應用程式。 什麼是Vue CLI？它是一個命令行工具，可以通過為您搭建應用程式框架並提供樣例應用程式來加快開發速度。 您可以通過兩種方式獲取此應用程式。 本地使用Vue CLI 第一種方式是在您的電腦上安裝Vue CLI，然後運行以下命令： vue create <enter the app name> 使用CodeSandbox 第二種方式是前往https://codesandbox....

我想在每次我在包含在存儲庫中的 Git 子模組上進行提交時，在 Netlify 上重新構建我的網站。 不幸的是，Netlify 不會默認這樣做，只有主要存儲庫被“監視”以進行新的提交。 所以我這樣做了。 我進入部署設置，在“部署提醒”中，我點擊了“添加部署提醒”。 ！ 保存後，我得到了一個唯一的 URL，我可以調用，類似於 https://api.netlify.com/build_hooks/UNIQUE_STRING。 然後，在子模組存儲庫中創建了一個 GitHub Action： name: 在 Netlify 上觸發重新部署 on: push: branches: [ "main" ] jobs: build: name: 執行 POST 請求 runs-on: ubuntu-latest steps: - name: Curl 請求 shell: bash env: UNIQUE_STRING: ${{ secrets.NETLIFY_BUILD_HOOK_UNIQUE_STRING }} run: curl -X POST -d {} https://api.netlify.com/build_hooks/$UNIQUE_STRING 將上述的 Netlify UNIQUE_STRING 值添加到存儲庫 “設置 -> 秘密 -> 操作” 中的 NETLIFY_BUILD_HOOK_UNIQUE_STRING 操作秘密。 提交 Action，部署應該已經在運行： ！

為何我認為在程式設計中選擇乏味的技術堆疊很重要 前幾天有一個人問了我一個問題。這個人想要開始寫部落格，並決定用 Angular 作為前端，自己建立一個部落格平台。 我回答他，如果目標是寫部落格，那麼他必須放棄這個想法，使用現成的解決方案。 我想他不喜歡我的回答，因為我沒有收到回覆，但我想表達的意思是：如果你想要創建一個部落格並且認真對待寫作，那麼你應該使用最乏味和可靠的工具。絕對不要在部落格基礎架構上浪費時間，如果你想進行一些認真的寫作。 技術必須退居次要，你只需要專注於內容。 否則，你會花費大部分的空閒時間來調整部落格平台（除了你之外沒有人在乎這些），而不是寫作內容。沒有人在乎部落格架構。 如果你想要製作一個視頻，你會先編寫一個 YouTube 的克隆嗎？它能夠同時處理1億個訪客嗎？這讓我想起那些想寫視頻遊戲並開始建立物理引擎的人，最終卻沒能完成遊戲。 我使用 Hugo，一個靜態網站生成器。 Hugo 對我來說是最好的，因為它專注於部落格和 Markdown。它很乏味。它的模板語言很乏味。當我需要微調一些東西時，我會睡著。我很喜歡它。 Hugo 最好的特點在於它快速，我認為這主要得益於使用了 Go。如今看來，這似乎是一個乏味的特點。 “看看 Gatsby，它好華麗！” Gatsby（這只是一個例子，我並沒有反對它）對我來說已經太華麗了，即使它是個很棒的技術。為什麼？因為它讓你太過關注技術而忽略了結果。作為一個開發者，你可能覺得這很棒，但事實並非如此。React、GraphQL，這些都有點太令人興奮了。 這讓我想起了 Redux，那些對於具有“時間旅行”示範的人感到興奮的人，這是在日常編碼中非常有用的功能（開玩笑）。人們為了使用華麗的技術而過度複雜化他們的應用程式。 讓我們以預取為例。當靜態網站已經足夠快時，我們真的需要預取嗎？我們的部落格訪客有要求嗎？這樣做有什麼缺點？可能會出問題嗎？ 記住墨菲定律：“任何可能出錯的事情終將出錯” 我曾經和一位使用 Gatsby 開始撰寫部落格的人交談過，他意識到他們並沒有啟用服務器端渲染，即使他們認為已經啟用了。這使得該部落格幾乎對 Google 不可見（是的，我知道他們有時執行 JavaScript，但你就容忍我，堅持使用乏味的服務器端渲染）。 在一個普通的部落格中，每位用戶平均只會瀏覽1.1 / 1.2個頁面。這意味著大部分用戶只會經過 Google 來到你的網站上，快速瀏覽一下然後離開。你真的需要預取所有的鏈接嗎？為什麼要浪費那麼多的數據和資源？ 讓我們停止批評 Gatsby，我真的很喜歡它作為創建網站和應用程式的工具。 我的觀點是，為了開始一個簡單的部落格，你可能不需要它80%的功能。使用一個更簡單的工具，一個專為部落格而設計的工具，絕對不要自己寫。 這也適用於更複雜的應用程式。你應該使用你已經使用了10年的技術，還是應該去嘗試你不了解但大家都講得很好的潮流技術？你應該使用 Rails 還是 Elixir？我應該使用 TypeScript 還是 Reason 編寫我的下一個應用程式？C、Go還是Rust？ 我們浪費了大量的時間，從舊的庫跳到新的庫，從舊的框架跳到新的框架。想想 jQuery、Backbone和Ember，以及它們之前和之後出現的無數框架。想想 AngularJS 和 Angular。想想 Laravel 掀起 PHP 世界的風潮之前的所有 PHP 框架。記得 NoSQL 的“革命”讓我們重新考慮使用 MySQL，轉而使用更花哨和更靈活的數據庫系統？事實上，SQL 仍然強勢。 “只需使用 MySQL，乏味的技術革命就在這裡” Marty Weiner，Reddit CTO，2016 大多數開發人員認為是行業標準的工具是由 Google 和 Facebook 等大型公司建立的，它們對於它們的需求來說是完美的。一個小團隊或獨立開發人員可能也有相同的需求，但這有多大可能性呢？是因為同儕壓力和炒作而驅使的嗎？還是因為營銷的影響？...

數位多用電表是一個方便的工具，是您入門時所需的少數工具之一。 有許多種多用電表，從很便宜的一些（大約10美元），像這個便宜購買的多用電表，但質感也很便宜： （圖片） 除非您要從事非常專業的應用，但您不需要從這開始，您可以花不到30美元買一個很棒的多用電表。 我花了30美元買的這個非常好： （圖片） 這兩者之間的大小和建造質量之間有很大的差異： （圖片） 您還可以看到一個有一個“10A”插座，而另一個有一個“20A”插座。這意味著其中一個可以在斷開保險絲之前測量最高20安培的電流，另一個則是一半。 大一點的那個mA插座可以測量高達500mA的電流，而小一點的則是200mA。 此外，一個特殊的電纜還可以測量溫度。它還有一個燈光等等。 一個數位多用電表可以測量電壓（電壓表）、電流（電流表）、電阻（歐姆表）、容量、頻率等等。 它集成了許多工具。 我將向您展示如何測量前三種東西。 如何測量電壓 讓我們從測量電壓開始。拿一個電池，選擇“V”符號： （圖片） 將黑色連接器連接到“COM”，公共接地，紅色連接器連接到“V”符號，然後將電纜的另一端連接到“+”和“-”電池端口： （圖片） （圖片） 如何測量電阻 現在讓我們看看如何測量電阻。 將兩條電纜連接到電阻的兩端，並在多用電表上選擇“Ω”符號： （圖片） 這是一個220Ω的電阻。 這是同樣的測量結果在較便宜的多用電表上的圖片： （圖片） 請注意，以前我們不需要設置刻度，它會自動確定。在這裡，如果電阻對於刻度來說太低或太高，您需要在“200”、“2000”、“20k”、“200k”、“2000k”之間調節，看看哪一個給您一個有意義的結果。 例如，在這裡，我選擇了“20k”刻度，我得到了顯示為“0.22”。在這種情況下，“20k”表示它可以測量高達“20kΩ”。在這種情況下，0.22表示它是1kΩ的0.22倍： （圖片） 稍微有點令人困惑，對吧？這不是最理想的，所以我建議您選擇能夠自動確定刻度的多用電表。 如何測量電流 我首先展示了如何測量電壓和電阻，因為它們的工作方式類似：連接器平行於我們要測量的元件。 測量電流是不同的。我們需要將多用電表與電流串聯，讓電流通過它。 此外，根據您的多用電表，您可能需要更改電纜的進入點。在這種情況下，我使用輸入＃4測量電壓和Ω，但使用輸入＃1測量電流（和輸入＃2的大量電流）： （圖片） 要測量電流，讓我們構建一個小電路。在這種情況下，我有一個點接電位器點亮一個LED。 （圖片） 兩條電纜將LED的負極連接到關閉電路的引線上，以接地。這很重要：您不能通過直接將多用電表連接到其電纜來測量通過元件的電流。您需要使多用電表成為電路的一部分。 （圖片） 多用電表的作用就像一根電線。 在多用電表上，您可以選擇電流測量的刻度。我們設置為“mA”，但可以切換到“µA”，以使用微安代而不是毫安： （圖片） 您得到了“753µA”，這相當於“0.753mA”。 這是使用黃色多用電表進行的相同測量，這種情況下，用於測量小電流的插口與我們用於電壓和電阻的插口相同： （圖片）

Docker Desktop 应用程序非常方便地通过图形界面操作容器。 您并不需要使用它，您也可以使用命令行工具操作。 docker ps 命令可以列出当前正在运行的容器: 这与运行 docker container ls 命令相同。 在这个例子中，容器名称为 node-app，ID 为 739037a911e0，由镜像 examplenode 创建，创建时间为 4分钟前，启动时间为 4分钟，并且主机机器的端口80映射到容器端口3000，使用的是TCP协议。 当您知道容器的 ID 时，可以通过运行以下命令停止容器： docker container stop <ID> 容器停止后，可以使用 docker container ls -a 命令查看它： 您可以使用 docker container rm 命令删除它： docker container rm <ID> 您可以使用 docker inspect 命令查看容器的所有详细信息： 另一个非常有用的命令是 docker info，它可以提供有关当前 Docker 安装状态的大量信息，包括容器和镜像的数量。

使用以下命令可以列出您已下載或安裝的所有鏡像： docker images -a 執行這個命令的結果如下所示： 您可以使用 docker rmi 命令並指定要刪除的鏡像名稱來移除一個鏡像。這將刪除該鏡像。 執行以下命令可以移除當前測試和開發中的一些已成為懸空狀態（未標記）的鏡像，以釋放磁碟空間： docker images -f dangling=true 執行結果如下所示： 使用以下命令可以清除這些鏡像： docker rmi $(docker images -f dangling=true -q) 此命令只會刪除已放置在容器中的懸空鏡像，即使它們目前未運行。 docker system prune -a 是另一個常用的刪除鏡像的方法，它也會移除未被任何容器引用的鏡像，這可能會刪除您想保留的鏡像，即使只是為了回滾到鏡像的先前版本。 如果您想清除所有鏡像，可以使用以下命令： docker rmi $(docker images -a -q) 這在您進行首次測試和 Docker 實驗時可能非常有用。