Лекция8

1. Введение в React

Веб-компоненты
Основы JSX
Функциональные компоненты
Классовые компоненты
Связывание свойств компонента
Передача значений с помощью props
Хуки состояния компонента

2.

Веб-компоненты
Компонентное программирование – это современный подход
к созданию переиспользуемых, инкапсулированных UIэлементов в веб-разработке.
Веб-компоненты – совокупность стандартов, которая позволяет
создавать новые, пользовательские HTML-элементы со своими
свойствами, методами, инкапсулированными DOM и стилями.
https://learn.javascript.ru/web-components
Веб-компоненты – это набор стандартов, которые позволяют
создавать переиспользуемые, инкапсулированные элементы
пользовательского интерфейса, работающие в любом
современном браузере.

3.

Веб-компоненты
Преимущества компонентов
• Современный стандарт для создания пользовательских
HTML-элементов.
• Работают в любом браузере.
• Позволяют писать переиспользуемые, изолированные
UI-блоки.
• Не зависят от фреймворков (React, Vue и др.).
Состоят из:
• Пользовательских HTML-элементов (Custom Elements).
• Теневого DOM (Shadow DOM) – изоляция стилей и
структуры.
• HTML-шаблонов (HTML templates) – шаблоны для разметки.

4.

Введение в React
React – это библиотека JavaScript для разработки
компонентов пользовательского интерфейса
(UI-компонентов).
Разработчики: Джордан Валке и Томас Эгер (Facebook)
Первый выпуск: 2013 г.
Официальный сайт: https://reactjs.org/
https://ru.react.js.org/ - русскоязычная поддержка сайта
https://react.dev/learn - документация

5.

Введение в React
Преимущества React
• «Реактивный» подход в работе с DOM: обновление только
тех частей веб-страницы, которые изменились в ее
виртуальном представлении.
• Быстрый отклик пользовательского интерфейса.
• Упрощение разработки веб-страниц за счет использования
созданных ранее компонент.
• Сокращение объема кода (использование JSX).
• Обширная поддержка сообществом разработчиков.
Недостатки:
1. Необходимость использования сторонних библиотек.
2. Трудности восприятия кода из-за смешения компонентов
react и элементов html.

6.

Введение в React
90-е годы:
HTML
XML
CSS – стилизация страниц
Появление веб-серверов
Развитие серверных языков программирования
Появление JavaScript – добавление интерактивности
DHTML – динамический HTML
Flash-анимация (Adobe)
Фреймы – составная HTML-страница
ASP (Active Server Pages) – внедрение скриптов в HTML-код
2000 – наше время:
ASP.NET
AJAX
Silverlight
HTML5 – обновленный стандарт HTML
CMS – конструкторы сайтов
SPA – одностраничные приложения
Компонентный подход, плоский дизайн, адаптивность…

7.

Основы JSX
JSX (JavaScript XML) – специальный XML-подобный синтаксис
JavaScript, упрощающий написание кода для создания
компонентов react.
Во время компиляции JSX транслируется в нативный (чистый,
ванильный) код JavaScript.
Для преобразования JSX в нативный JS библиотека react
использует транспилятор babel.
Нативный JavaScript:
Синтаксис JSX:
const my_element =
const my_element =
React.createElement(
<Header className="title">
Header,
<H1 className="elem1">Hi!</H1>
{ className: "title" },
</Header>;
React.createElement(
H1,
{ className: "elem1" },
"Hi!"
)
);

8.

Простое создание компонента
1. Подключаем на страницу внешние (либо скачиваем локально) ссылки
на необходимые библиотеки (react, react-dom, babel):
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/reactdom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
2. Создаем корневой компонент для отображения компонентов React.
<div id="main"></div>
3. Создаем родительский компонент, помещаем его в корневой и
отрисовываем с помощью метода render:
<script type="text/babel">
const main = ReactDOM.createRoot(document.getElementById("main"));
const MyComponent = () => <p>Всем привет!</p>;
main.render( <div><MyComponent /></div> );
</script>

9.

Основы JSX
Особенности создания react компонента
• В скрипте обязателен атрибут с указанием на использование
синтаксиса JSX: type="text/babel"
• Каждый компонент должен иметь родительский компонент.
• Имя компоненты начинается с большой буквы.
• Все компоненты JSX обязательны к закрытию.
• Для отрисовки компонентов на странице необходим метод
render().

10.

Функциональные компоненты
Для создания функциональных компонент используют JavaScript
функции.
const MyComponent1 = () => <h2>Компонент react</h2>;
const MyComponent2 = () => { return <button> OK </button>; };
const MyComponent3 = () =>
<header className="hdr">
<h1 className="hello">Привет! </h1>
</header>;
function MyComponent4() {
return <img width="200" src="image/logo.jpg" />
}
main.render(
<div><MyComponent2 /></div>,
document.getElementById('main')
);

11.

Классовые компоненты
При создании классовых компонент необходимо указать, что его
прототипом является компонент react: extends React.Component и
обязателен метод render().
const MyClassComponent1 =
class MyComponent extends React.Component {
render() { return <h1>Привет!</h1> }
};
class MyClassComponent2 extends React.Component {
render = () => <h1>И тебе привет!</h1>
};
ReactDOM.render(
<div><MyClassComponent1 /></div>,
document.getElementById('main')
);

12.

Связывание свойств компонента
Свойства компонентов можно связывать, например, со
значением переменной, элементами массива или свойствами
объекта.
Для ссылки на эти значения используют фигурные скобки: {
name.attributeName }.
const personName = ["Shrek", "Donkye"];
const photo = ["./images/shrek.jpg", "./images/donkey.jpg"];
const Person1 = () => (
<div>
<h1>{ personName[0] }</h1>
<img src={ photo[0] } />
</div>);
main.render(<React.Fragment><Person1/></React.Fragment>);

13.

Связывание свойств компонента
Пример использования свойств объекта в компоненте:
const harry = {
harryName: "Harry",
friends: ["Hermiona", "Ron"]
};
const Character = () =>
<h1>
Главный герой: { harry.harryName } <br />
Друзья: { harry.friends[0]}, { harry.friends[1]}
</h1>;

14.

Передача значений с помощью props
Для связывания значений элементов со значениями
компонентов можно использовать передачу свойств через
props. В этом случае компонент становится универсальным.
function Hello(props) {
return <h1>Привет, { props.user }!</h1>;
}
const Person = <Hello user="Лида" />;

15.

Передача значений с помощью props
Пример передачи свойств массива в props с перечислением
значений с помощью map:
const personName = ["Shrek", "Donkye"];
const photo = ["./images/shrek.jpg", "./images/donkey.jpg"];
const Person = (props) =>
(<div>
<h1>{ props.listName }</h1>
<img src={ props.listPhoto } />
</div>);
const MyComponent = () => personName.map((user, key) =>
<Person key={key} listName={user} listPhoto={photo[key]} />);
main.render(<React.Fragment><MyComponent/></React.Fragment>);

16.

Хуки состояния компонента
Хук (крючок) – это специальная функция, которая позволяет
использовать (подцеплять) возможности React.
Хук useState предоставляет функциональным компонентам
доступ к состоянию React.
const Like = () => {
//объявляем переменную состояния (likeCount),
//первоначальное состояние likeCount=0
const [likeCount, setIndex] = React.useState(0);
const plusLike = () => setIndex(likeCount + 1);
};
return (
<React.Fragment>
<img onClick={ plusLike } src="./images/like.png" />
<span>{ likeCount }</span>
</React.Fragment>)
Результат: