ReactJS - Web Components: Hướng dẫn cho người mới bắt đầu

Xin chào các bạn đang học lập trình! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của ReactJS và Web Components. Là một giáo viên máy tính gần gũi, tôi sẽ hướng dẫn bạn qua hành trình này, từng bước một. Đừng lo lắng nếu bạn mới bắt đầu học lập trình - chúng ta sẽ bắt đầu từ những基础知识 và dần dần nâng cao. Hãy lấy một tách cà phê (hoặc trà, nếu bạn thích), và cùng nhau bắt đầu!

ReactJS - Web Components

Web Components là gì?

Trước khi chúng ta nhảy vào sử dụng Web Components trong React, hãy hiểu xem Web Components thực sự là gì. Hãy tưởng tượng bạn đang xây dựng một ngôi nhà (website của chúng ta) bằng những mảnh Lego (mã của chúng ta). Web Components giống như những mảnh Lego đặc biệt mà bạn có thể tạo ra một lần và sử dụng lại nhiều lần trong những ngôi nhà khác nhau (website) mà không cần phải xây dựng lại chúng mỗi lần.

Web Components là một bộ các API của nền tảng web cho phép bạn tạo ra các phần tử tùy chỉnh có thể tái sử dụng. Chúng bao gồm các chức năng của riêng mình, giúp chúng dễ dàng chia sẻ giữa các dự án và khung công tác khác nhau.

Tại sao nên sử dụng Web Components trong React?

Bạn có thể tự hỏi, "Tại sao tôi nên phiền toái với Web Components khi tôi đang sử dụng React?" Đó là một câu hỏi tuyệt vời! React rất tuyệt vời cho việc xây dựng giao diện người dùng, nhưng đôi khi bạn có thể muốn sử dụng một thành phần không phụ thuộc vào khung công tác hoặc chia sẻ thành phần của bạn với những nhà phát triển không sử dụng React. Đây chính là lúc Web Components tỏa sáng!

Bắt đầu: Thiết lập dự án React của bạn

Hãy bắt đầu bằng cách thiết lập một dự án React mới. Đừng lo lắng, tôi sẽ hướng dẫn bạn từng bước!

Mở terminal (đừng sợ, nó chỉ là một cách để giao tiếp với máy tính của bạn).
Chạy lệnh sau:

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

Lệnh này sẽ tạo một ứng dụng React mới và di chuyển bạn vào thư mục dự án. Đó giống như đặt nền móng cho ngôi nhà Lego của chúng ta!

Tạo thành phần Web Component đầu tiên

Bây giờ, hãy tạo thành phần Web Component đầu tiên của chúng ta. Chúng ta sẽ tạo một thành phần thẻ chào mừng đơn giản.

Tạo một tệp mới gọi là GreetingCard.js trong thư mục src và thêm mã sau:

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);

Hãy phân tích này:

Chúng ta tạo một lớp GreetingCard kế thừa từ HTMLElement. Điều này giống như tạo một bản mẫu cho mảnh Lego đặc biệt của chúng ta.
Trong constructor, chúng ta tạo một shadow DOM. Hãy tưởng tượng này như một phòng riêng cho thành phần của chúng ta nơi các phong cách của nó sẽ không泄漏 ra và ảnh hưởng đến phần còn lại của trang.
Phương thức connectedCallback được gọi khi thành phần của chúng ta được thêm vào trang. Tại đây, chúng ta thiết lập cấu trúc HTML và phong cách cho thẻ của chúng ta.
Cuối cùng, chúng ta đăng ký thành phần mới của mình với customElements.define. Điều này告诉 trình duyệt, "Hey, khi bạn thấy thẻ <greeting-card>, hãy sử dụng bản mẫu này để tạo nó!"

Sử dụng Web Component trong React

Bây giờ chúng ta đã có thành phần Web Component, hãy sử dụng nó trong ứng dụng React của chúng ta. Mở tệp src/App.js và thay thế nội dung của nó bằng:

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;

Đây là những gì đang xảy ra:

Chúng ta导入 GreetingCard thành phần (điều này đăng ký nó với trình duyệt).
Trong thành phần App của chúng ta, chúng ta sử dụng thẻ <greeting-card> như bất kỳ phần tử HTML nào khác.
Chúng ta truyền một thuộc tính name cho thành phần của chúng ta, mà nó sử dụng để cá nhân hóa lời chào.

Chạy ứng dụng của bạn

Đã đến lúc xem tạo tác của chúng ta trong hành động! Trong terminal của bạn, chạy:

npm start

Điều này sẽ khởi động ứng dụng React của bạn. Mở trình duyệt và truy cập http://localhost:3000. Bạn nên thấy thẻ chào mừng hiển thị trên trang!

Thêm tính tương tác cho Web Component của bạn

Hãy làm cho thẻ chào mừng của chúng ta trở nên tương tác hơn. Chúng ta sẽ thêm một nút để thay đổi lời chào khi nhấp.

Cập nhật tệp GreetingCard.js của bạn:

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);

Trong phiên bản cập nhật này:

Chúng ta đã thêm một mảng các lời chào và một phương thức để chuyển đổi giữa chúng.
Phương thức render bây giờ xử lý việc tạo nội dung HTML.
Chúng ta đã thêm một nút vào thẻ và một bộ监听器 để thay đổi lời chào khi nhấp.

Kết luận

Chúc mừng! Bạn đã tạo thành công thành phần Web Component đầu tiên và sử dụng nó trong ứng dụng React. Đây chỉ là phần nổi của tảng băng khi nói đến sức mạnh của Web Components và React cùng nhau.

Nhớ rằng, việc học lập trình giống như xây dựng bằng Lego - bắt đầu từ những基础知识, và sớm bạn sẽ tạo ra những cấu trúc tuyệt vời. Hãy tiếp tục thực hành, 保持好奇心, và đừng sợ thử nghiệm!

Dưới đây là bảng tóm tắt các phương thức chính chúng ta đã sử dụng trong thành phần Web Component của mình:

Phương thức	Mô tả
constructor()	Khởi tạo thành phần và thiết lập shadow DOM
connectedCallback()	Được gọi khi thành phần được thêm vào DOM
render()	Tạo nội dung HTML cho thành phần
changeGreeting()	Cập nhật lời chào hiển thị trong thành phần

Chúc các bạn may mắn, những nhà phát triển web tương lai!

Credits: Image by storyset

Hướng Dẫn Trước:

ReactJS - Chế độ Nghiêm ngặt

Hướng Dẫn Tiếp Theo:

ReactJS - Trình chọn ngày