 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
const GREETINGS = [
    "Whalecome!",
    "All hands on deck!",
    "Charting the course ahead!",
];

module.exports = async (req, res) => {
    res.send({
        greeting: GREETINGS[ Math.floor( Math.random() * GREETINGS.length )],
    });
};

如果您尚未儲存檔案，請儲存。如果您重新整理瀏覽器，應該會看到新的問候語。如果您持續重新整理，應該會看到所有訊息都出現。

變更預留位置文字

當您查看應用程式時，您會看到預留位置文字只是「新增項目」。您現在將使其更具描述性和趣味性。您也將對應用程式的樣式進行一些變更。

開啟 `client/src/components/AddNewItemForm.jsx` 檔案。這提供了將新項目新增到待辦事項清單的元件。

將 `Form.Control` 元素的 `placeholder` 屬性修改為您想要顯示的任何內容。

33
34
35
36
37
38
39
<Form.Control
    value={newItem}
    onChange={(e) => setNewItem(e.target.value)}
    type="text"
    placeholder="What do you need to do?"
    aria-label="New item"
/>

儲存檔案並返回瀏覽器。您應該會看到變更已熱載入到您的瀏覽器中。如果您不喜歡它，可以隨意調整它，直到它看起來恰到好處為止。

Screenshot of the to-do app with an updated placeholder in the add item text field"

變更背景顏色

在您將應用程式視為最終完成之前，您需要改善顏色。

開啟 client/src/index.scss 檔案。
將 background-color 屬性調整為您喜歡的任何顏色。提供的程式碼片段是柔和的藍色，與 Docker 的航海主題相呼應。
如果您使用 IDE，則可以使用整合的顏色選擇器來選擇顏色。否則，您可以隨意使用線上顏色選擇器。
3 4 5 6 7
body { background-color: #99bbff; margin-top: 50px; font-family: 'Lato'; }
每次儲存都應該讓您立即在瀏覽器中看到變更。持續調整，直到它是您最完美的設定。

這樣就完成了。恭喜您更新了您的網站。

摘要

在繼續之前，請花點時間思考一下這裡發生的事情。在短短幾分鐘內，您就能夠

在零安裝的情況下啟動一個完整的開發專案。容器化的環境提供了開發環境，確保您擁有所需的一切。您不必直接在您的機器上安裝 Node、MySQL 或任何其他依賴項。您只需要 Docker Desktop 和程式碼編輯器。
進行變更並立即看到它們。這是可能的，因為 1) 在每個容器中執行的程式都在監控檔案變更並做出回應，以及 2) 檔案與容器化環境共享。

Docker Desktop 支援所有這些以及更多功能。一旦您開始使用容器思維，您就可以建立幾乎任何環境，並輕鬆地與您的團隊共享。

後續步驟

現在應用程式已更新，您已準備好學習如何將其打包為容器映像並將其推送至 registry，特別是 Docker Hub。

建置並推送您的第一個映像檔