React 基礎：使用 JavaScript 更新使用者介面

在本章中，我們將開始使用 JavaScript 和 DOM 方法來為專案添加一個 h1 標籤，從而建構我們的專案。

開啟你的程式碼編輯器並建立一個新的 index.html 檔案。在 HTML 檔案中，加入以下程式碼：

index.html

<html>
  <body>
    <div></div>
  </body>
</html>

然後給 div 一個唯一的 id，以便稍後可以定位它。

index.html

<html>
  <body>
    <div id="app"></div>
  </body>
</html>

要在 HTML 檔案中編寫 JavaScript，請添加一個 script 標籤：

index.html

<html>
  <body>
    <div id="app"></div>
    <script type="text/javascript"></script>
  </body>
</html>

現在，在 script 標籤內，你可以使用 DOM 方法 getElementById() 來通過 id 選擇 <div> 元素：

index.html

<html>
  <body>
    <div id="app"></div>
    <script type="text/javascript">
      const app = document.getElementById('app');
    </script>
  </body>
</html>

你可以繼續使用 DOM 方法來建立一個新的 <h1> 元素：

index.html

<html>
  <body>
    <div id="app"></div>
    <script type="text/javascript">
      // 選擇 id 為 'app' 的 div 元素
      const app = document.getElementById('app');
 
      // 建立一個新的 H1 元素
      const header = document.createElement('h1');
 
      // 為 H1 元素建立一個新的文字節點
      const text = '開發。預覽。部署。';
      const headerContent = document.createTextNode(text);
 
      // 將文字附加到 H1 元素
      header.appendChild(headerContent);
 
      // 將 H1 元素放入 div 中
      app.appendChild(header);
    </script>
  </body>
</html>

為了確保一切正常運作，請在瀏覽器中開啟你的 HTML 檔案。你應該會看到一個顯示「開發。預覽。部署。」的 h1 標籤。

HTML 與 DOM 的區別

如果你在瀏覽器開發者工具中查看 DOM 元素，你會注意到 DOM 包含了 <h1> 元素。頁面的 DOM 與原始碼（即你建立的原始 HTML 檔案）是不同的。

這是因為 HTML 代表的是初始頁面內容，而 DOM 代表的是更新後的頁面內容，這些內容是由你編寫的 JavaScript 程式碼所改變的。

使用純 JavaScript 更新 DOM 非常強大但也很冗長。你已經編寫了所有這些程式碼來添加一個帶有文字的 <h1> 元素：

index.html

<script type="text/javascript">
  const app = document.getElementById('app');
  const header = document.createElement('h1');
  const text = '開發。預覽。部署。';
  const headerContent = document.createTextNode(text);
  header.appendChild(headerContent);
  app.appendChild(header);
</script>

隨著應用程式或團隊規模的增長，以這種方式建構應用程式可能會變得越來越具有挑戰性。

使用這種方法，開發者需要花費大量時間編寫指令來告訴電腦如何做事情。但如果能描述你想顯示什麼，並讓電腦來決定如何更新 DOM，豈不是更好？

命令式與宣告式程式設計

上面的程式碼是命令式程式設計的一個好例子。你正在編寫如何更新使用者介面的步驟。但在建構使用者介面時，宣告式方法通常更受歡迎，因為它可以加快開發速度。開發者不需要編寫 DOM 方法，而是能夠宣告他們想顯示什麼（在本例中是一個帶有文字的 h1 標籤）。

換句話說，命令式程式設計就像給廚師一步一步的指示來製作披薩。宣告式程式設計就像訂購披薩而不關心製作披薩的步驟。🍕

React 是一個流行的宣告式函式庫，你可以用它來建構使用者介面。

React：一個宣告式 UI 函式庫

作為開發者，你可以告訴 React 你希望使用者介面發生什麼變化，React 會代表你找出如何更新 DOM 的步驟。

在下一節中，我們將探討如何開始使用 React。

其他資源：

HTML 與 DOM 的區別

宣告式 UI 與命令式的比較

使用 JavaScript 更新使用者介面

HTML 與 DOM 的區別

命令式與宣告式程式設計

React：一個宣告式 UI 函式庫

On this page