ReactJS - Web Components: руковод novičkam

Привет, будущие разработчики! Сегодня мы отправимся в увлекательное путешествие в мир ReactJS и Web Components. Как ваш доброжелательный соседский компьютерный учитель, я здесь, чтобы провести вас через это приключение шаг за шагом. Не волнуйтесь, если вы новички в программировании - мы начнем с самых азов и будем подниматься вверх. Так что возьмите себе杯咖啡 (или чай, если это ваш выбор) и погружайтесь с нами!

Что такое Web Components?

Прежде чем мы перейдем к использованию Web Components в React, давайте поймем, что они собой представляют. Представьте, что вы строите дом (наш веб-сайт) из кирпичиков Lego (наш код). Web Components - это как особые кирпичики Lego, которые вы создаете один раз и используете снова и снова в разных домах (веб-сайтах), не rebuild них каждый раз.

Web Components - это набор API веб-платформы, которые позволяют вам создавать повторно используемые пользовательские элементы. Они экранируют свою функциональность, делая их легко shareable между различными проектами и фреймворками.

Почему использовать Web Components в React?

Теперь вы можете задаться вопросом: "Зачем мне возиться с Web Components, если я использую React?" Отличный вопрос! React великолепен для создания пользовательских интерфейсов, но иногда вам может понадобиться использовать компонент, который является framework-agnostic или делиться своими компонентами с разработчиками, не использующими React. Именно здесь Web Components показывают свои возможности!

Начало: Настройка вашего проекта React

Давайте начнем с создания нового проекта React. Не волнуйтесь, я проведу вас через каждый шаг!

1. Откройте ваш терминал (не бойтесь, это всего лишь текстовый способ общения с вашим компьютером).
2. Выполните следующую команду:

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

Это создаст новый проект React и перейдет в директорию проекта. Это как laying the foundation для нашего дома Lego!

Создание вашего первого Web Component

Теперь давайте создадим наш первый Web Component. Мы сделаем простой компонент для祝贺ительного письма.

Создайте новый файл под названием GreetingCard.js в папке src и добавьте следующий код:

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>Привет, ${this.getAttribute('name')}!</h2>
<p>Добро пожаловать в мир Web Components!</p>
</div>
`;
}
}

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

Давайте разберем это:

1. Мы создаем класс GreetingCard, который extends HTMLElement. Это как создание чертежа для нашего special Lego piece.
2. В конструкторе мы создаем shadow DOM. Представьте это как private room для нашего компонента, где его стили не будут просачиваться и влиять на остальную часть страницы.
3. Метод connectedCallback вызывается, когда наш компонент добавляется на страницу. Здесь мы устанавливаем структуру HTML и стили для нашей карты.
4. Наконец, мы регистрируем наш новый компонент с помощью customElements.define. Это говорит браузеру: "Эй, когда ты видишь тег <greeting-card>, используй этот чертеж, чтобы создать его!"

Использование Web Component в React

Теперь, когда у нас есть наш Web Component, давайте используем его в нашем приложении React. Откройте src/App.js и замените его содержимое на следующее:

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

function App() {
return (
<div className="App">
<h1>Мое приложение с Web Components</h1>
<greeting-card name="React Разработчик"></greeting-card>
</div>
);
}

export default App;

Вот что происходит:

1. Мы импортируем наш компонент GreetingCard (это register его в браузере).
2. В нашем компоненте App мы используем тег <greeting-card>, как любой другой HTML-элемент.
3. Мы передаем атрибут name нашему компоненту, который он использует для personaliziruem greeting.

Запуск вашего приложения

Пора увидеть наше творение в действии! В вашем терминале выполните:

npm start

Это запустит ваше приложение React. Откройте браузер и перейдите на http://localhost:3000. Вы должны увидеть вашу greeting card на странице!

Добавление интерактивности в ваш Web Component

Давайте сделаем нашу greeting card немного более интерактивной. Мы добавим кнопку, которая изменяет祝贺ение при нажатии.

Обновите ваш файл GreetingCard.js:

class GreetingCard extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.greetings = ['Привет', '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>Добро пожаловать в мир Web Components!</p>
<button>Изменить祝贺ение</button>
</div>
`;
}
}

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

В этой обновленной версии:

1. Мы добавили массив祝贺ений и метод для их cycle.
2. Метод render теперь обрабатывает создание HTML-контента.
3. Мы добавили кнопку на карту и event listener для изменения祝贺ения при нажатии.

Заключение

Поздравляю! Вы только что создали свой первый Web Component и использовали его в приложении React. Это всего лишь вершина айсберга, когда дело доходит до силы Web Components и React вместе.

Помните, обучение программированию похоже на строительство из Lego - начните с основ и вскоре вы начнете создавать удивительные структуры. Продолжайте практиковаться, будьте любопытны и не бойтесь экспериментировать!

Вот таблица, резюмирующая ключевые методы, которые мы использовали в нашем Web Component:

Метод	Описание
constructor()	Инициализирует компонент и настраивает shadow DOM
connectedCallback()	Вызывается, когда компонент добавляется в DOM
render()	Создает HTML-контент для компонента
changeGreeting()	Обновляет祝贺ение, отображаемое в компоненте

Счастливого кодирования, будущие веб-разработчики!

Credits: Image by storyset