ReactJS - Web Components：初學者指南

Hello there, 對開發充滿熱情的同學們！今天，我們將踏上一段令人興奮的旅程，探索ReactJS和Web Components的世界。作為你們友善的鄰居計算機老師，我會帶領你們一步一步地完成這次冒險。別擔心你們是編程新手——我們會從最基礎的知識開始，然後逐步提升。所以，倒一杯咖啡（或者如果你喜歡，也可以是茶），我們來一起深入學習吧！

ReactJS - Web Components

Web Components是什麼？

在我們跳進React中使用Web Components之前，讓我們先來了解Web Components到底是什麼。想像你正在用樂高積木（我們的代碼）建造一個房子（我們的網站）。Web Components就像是可以一次創建並在不同的房子（網站）中反覆使用的特殊樂高部件，而不需要每次都重新建造它們。

Web Components是一組網絡平台API，它們允許你創建可重用的自定義元素。它們將其功能封裝起來，使它們可以輕鬆地在不同的項目和框架之間共享。

為什麼在React中使用Web Components？

現在，你可能會想，“既然我在使用React，為什麼還要麻煩使用Web Components？”這個問題問得好！React非常適合构建用戶界面，但有時你可能會想使用一個與框架無關的組件，或者與不使用React的開發者共享你的組件。這正是Web Components發揮作用的時候！

開始：設定你的React專案

讓我們從設定一個新的React專案開始。別擔心，我會逐步指導你！

打開你的終端（別害怕，這只是與你的計算機進行文字交流的一種方式）。
執行以下命令：

npx create-react-app my-web-components-app
cd my-web-components-app

這會創建一個新的React應用並將你移入專案目錄。這就像為我們的樂高房子奠定基礎！

創建你的第一個Web Component

現在，讓我們創建我們的第一個Web Component。我們將制作一個簡單的問候卡組件。

在src目錄中創建一個名為GreetingCard.js的新文件並添加以下代碼：

class GreetingCard extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}

connectedCallback() {
this.shadowRoot.innerHTML = `
<style>
.card {
border: 2px solid #ccc;
border-radius: 8px;
padding: 16px;
margin: 16px;
font-family: Arial, sans-serif;
}
h2 {
color: #333;
}
</style>
<div class="card">
<h2>Hello, ${this.getAttribute('name')}!</h2>
<p>Welcome to the world of Web Components!</p>
</div>
`;
}
}

customElements.define('greeting-card', GreetingCard);

讓我們來解析一下：

我們創建了一個名為GreetingCard的類，它繼承自HTMLElement。這就像為我們的特殊樂高部件創建一個藍圖。
在構造函數中，我們創建了一個影子DOM。想像這是一個我們組件的私人空間，它的樣式不會泄漏出來影響頁面的其他部分。
connectedCallback方法在我們的組件被添加到頁面時調用。在這裡，我們設定了我們卡片的HTML結構和樣式。
最後，我們使用customElements.define註冊我們的新組件。這告訴瀏覽器，“嘿，當你看到一個<greeting-card>標籤時，使用這個藍圖來創建它！”

在React中使用Web Component

現在我們有了Web Component，讓我們在React應用中使用它。打開src/App.js並將其內容替換為：

import React from 'react';
import './GreetingCard';

function App() {
return (
<div className="App">
<h1>My Web Components App</h1>
<greeting-card name="React Developer"></greeting-card>
</div>
);
}

export default App;

這裡發生了什麼：

我們導入了我們的GreetingCard組件（這樣就將其註冊到了瀏覽器）。
在我們的App組件中，我們像使用任何其他HTML元素一樣使用<greeting-card>標籤。
我們給我們的組件傳遞了一個name屬性，它用來個性化問候語。

運行你的應用

該看看我們的創作了！在終端中，運行：

npm start

這將啟動你的React應用。打開瀏覽器並訪問http://localhost:3000。你應該會在頁面上看到你的問候卡！

為你的Web Component添加互動性

讓我們讓我們的問候卡更具互動性。我們將添加一個按鈕，點擊時會改變問候語。

更新你的GreetingCard.js文件：

class GreetingCard extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.greetings = ['Hello', 'Bonjour', 'Hola', 'Ciao', 'Konnichiwa'];
this.currentGreeting = 0;
}

connectedCallback() {
this.render();
this.shadowRoot.querySelector('button').addEventListener('click', () => this.changeGreeting());
}

changeGreeting() {
this.currentGreeting = (this.currentGreeting + 1) % this.greetings.length;
this.render();
}

render() {
this.shadowRoot.innerHTML = `
<style>
.card {
border: 2px solid #ccc;
border-radius: 8px;
padding: 16px;
margin: 16px;
font-family: Arial, sans-serif;
}
h2 {
color: #333;
}
button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
<div class="card">
<h2>${this.greetings[this.currentGreeting]}, ${this.getAttribute('name')}!</h2>
<p>Welcome to the world of Web Components!</p>
<button>Change Greeting</button>
</div>
`;
}
}

customElements.define('greeting-card', GreetingCard);

在這個更新版本中：

我們添加了一個問候語數組和一個方法來循環它們。
render方法現在負責創建HTML內容。
我們在卡片中添加了一個按鈕並為其添加了一個事件監聽器，當點擊時會調用changeGreeting方法。

結論

恭喜你！你剛剛在React應用中創建並使用了你自己的第一個Web Component。這只是Web Components和React一起使用的冰山一角。

記住，學習編程就像用樂高積木建造——從基礎開始，很快你就能創造出令人驚艷的結構。持續練習，保持好奇心，並不怕嘗試！

這裡是一個我們在Web Component中使用過的關鍵方法的總結：

方法	描述
constructor()	初始化組件並設置影子DOM
connectedCallback()	當組件被添加到DOM時調用
render()	為組件創建HTML內容
changeGreeting()	更新組件中顯示的問候語

未來的網頁開發者，快樂編程吧！

Credits: Image by storyset