React

1.

Проектирование и разработка веб-приложений. Лекция 3.
React
Компоненты. Рендеринг. Состояния. Библиотеки.
Москва, 2024

2.

React
Особенности
Области применения
Методы поиска элементов
JSX
Обработка кода реактом
Компоненты
Состояния
Повестка дня
Map
События
Запуск
Библиотеки

3.

Зачем React?
React - библиотека для создания пользовательских интерфейсов. С
помощью созданных интерфейсов реализуется последовательное
исполнения функций.
3

4.

Особенности React
Виртуальный DOM
Разметка и относящаяся к ней логика находятся рядом и связаны друг с
другом. Это упрощает дальнейшую работу с кодом.
Самостоятельные компоненты импортируются отдельно. Это значит, что
можно очень легко их переиспользовать.
Больше не нужно использовать идентификаторы для обращения к DOMэлементам, что также делает код более легко поддерживаемым.
Состояние компонента изолировано: нет никакой возможности
модифицировать значение извне, если мы явно такое не задумывали.
Благодаря этому поток данных в приложении становится более
предсказуемым, что упрощает разработку и отладку.
4

5.

Когда используется?
Для групповых проектов,
предрасположенных к расширению
Legacy-проектам, которым предстоит
пройти через рефакторинг.
Не для одностраничных приложений
React в целом потребляет много ресурсов.
5

6.

Поиск элементов
<ul>
<li>Этот</li>
getElementById(id)
querySelectorAll(css)
querySelector(css)
<li>тест</li>
</ul>
<ul>
<li>полностью</li>
<li>пройден</li>
getElementsByTagName(tag
)
</ul>
getElementsByName(name)
let elements = document.querySelectorAll('ul > li:last-child');
getElementsByClassName
(className)
<script>
for (let elem of elements) {
alert(elem.innerHTML); // "тест", "пройден"
}
</script>
6

7.

JSX
JSX — расширение языка JavaScript.
JSX производит «элементы» React.
const name = ‘Леонтий';
const element = <h1>Здравствуй, {name}!</h1>;
const element = <h1>Привет, мир!</h1>;
7

8.

export const Context = createContext(null);
Render-инг
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Context.Provider value={{
Для рендеринга React-элемента,
сперва нужно передать DOM-элемент
в ReactDOM.createRoot(), далее
верните React-элемент в root.render()
user: new UserStore(),
client: new ClientStore(),
employee: new EmployeeStore(),
studios: new StudioStore(),
orders: new OrderStore(),
Корневой узел
service: new ServiceStore(),
service_execution: new ServiceExecutionStore()
}}>
<App />
</Context.Provider>
8
);

9.

Компоненты
Для чего нужны
Вместо того, чтобы
искусственно разделить
технологии, помещая
разметку и логику в разные
файлы, React разделяет
ответственность с помощью
слабо связанных единиц,
называемых «компоненты»,
которые содержат и разметку,
и логику.
9

10.

Компоненты
Зависимости
Когда React встречает
встроенный элемент,
он собирает все JSXатрибуты и дочерние
элементы в один объект
и передаёт их нашему
компоненту. Этот объект
называется «пропсы» (props).
class Welcome extends React.Component {
render() {
return <h1>Привет, {this.props.name}</h1>;
}
}
10

11.

Компоненты
Элементы
const divStyle = {
color: 'blue',
backgroundImage: 'url(' + imgUrl + ')',
};
function HelloWorldComponent() {
return <div style={divStyle}>Привет, мир!</div>;
}
className
style
function createMarkup() {
return {__html: 'Первый &middot; Второй'};
}
dangerouslySetInnerHTML
(innerHTML )
function MyComponent() {
return <div dangerouslySetInnerHTML={createMarkup()} />;
}
<div className='layer animation' id='layer1'>
<h1 id='href0'>Containers Legalize</h1>
</div>
11

12.

Состояния
Варианты
Состояние
контролируется
и доступно только
конкретному
компоненту.
12

13.

Состояния
Жизненный цикл
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}
constructor(props): конструктор, в
котором происходит начальная
инициализация компонента
componentWillUnmount() {
clearInterval(this.timerID);
}
static getDerivedStateFromProps(props,
state): вызывается непосредственно
перед рендерингом компонента.
tick() {
this.setState({
date: new Date()
});
}
render() {
return (
<div>
<h1>Привет, мир!</h1>
<h2>Сейчас {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
render(): рендеринг компонента
componentDidMount(): вызывается после
рендеринга компонента. Здесь можно
выполнять запросы к удаленным
ресурсам
}
componentWillUnmount(): вызывается
перед удалением компонента из DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Clock />);
13

14.

Состояния
Хуки
Хуки — это функции,
с помощью которых вы можете
«подцепиться» к состоянию
и методам жизненного цикла
React из функциональных
компонентов.
useState
useEffect
useContext
14

15.

MobX
MobX - это "проверенная в боях" библиотека,
которая делает управление состоянием простым
и масштабируемым за счёт функциональноobserver
реактивного программирования (TFRP).
makeAutoObservable
15

16.

Map
Map - функция перебора массива.
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
console.log(doubled);
Этот код выведет [2, 4, 6, 8, 10] в консоль.
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<li>{number}</li>
);
return (
<ul>{listItems}</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<NumberList numbers={numbers} />);
16

17.

onClick
События
Виды
onSubmit
onCopy
onFocus
onChange
onInvalid
onLoad
onMouseEnter
onSelect
onScroll
17

18.

События
HTML
<button onclick="activateLasers()">
Обработка
Активировать лазеры
</button>
React
<button onClick={activateLasers}>
Активировать лазеры
</button>
<button onClick={(e) => this.deleteRow(id, e)}>Удалить строку</button>
18

19.

Запуск
my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
└── serviceWorker.js
└── setupTests.js
npm init react-app my-app
http://localhost:3000
Требования:
Yarn или npm
Сборщик и компилятор (уже включены)
Node.js
Редактор исходного кода
19

20.

Библиотеки
Зависимости
mobx/mobx-react-lite
bootstrap/react-bootstrap
react-dom
react-router-dom
npm install react-bootstrap bootstrap
.
import { Button } from 'react-bootstrap'
axios
<Button variant=‘primary'>
Нажми меня
</Button>
jwt-decode
20

21.

const user = {
name: 'Hedy Lamarr',
imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
imageSize: 90,
};
Пример
export default function Profile() {
return (
<>
<h1>{user.name}</h1>
<img
className="avatar"
src={user.imageUrl}
alt={'Photo of ' + user.name}
style={{
width: user.imageSize,
height: user.imageSize
}}
/>
</>
);
21
}

22.

Задание №1
Написать одностраничное резюме на React:
1) 5 граф с данными: ФИО (посередине колонки) и дата
рождения, образование, навыки (в виде списка), опыт
работы, о себе.
2) У каждой графы есть заголовок с иконкой, причём эта
комбинация должна быть подчёркнута и на одном
уровне. Расстояние между - 3% от подчёркивания.
3) В правом верхнем углу на расстоянии 5 px от границ
страницы вставить фото 80х120.
4) Под фото разместить графу контакты и ограничить её
рамкой.
22

23.

Задание №2
С помощью React создать форму создания героя.
1 разработчик:
1. Создать форму из 3 полей: никнейм (не менее 3 и не более 10 символов), выбор расы в виде Radio-кнопок в строку, поле с выпадающим меню для выбора класса.
Сверху над полем отображать его название. Поле с названием объединить в рамку.
2. Создать кнопку тёплого цвета для отправки первых данных. Кнопка должна располагаться посередине относительно полей формы. А внутри предложение
«продолжить». При нажатии на кнопку данные должны с помощью события onChange записываться в объект useState, если они валидны. Если поля не заполнены
или заполнены неверно, необходимо вывести красным шрифтом запись о каждом некорректно заполненным поле.
3. Под формой с появляющимися далее предметами нарисовать кнопку продолжения. Написать функцию для проверки выбранных предметов, если из больше или
меньше трёх - пользователю необходимо также вывести красный текст с ошибкой.
4. Кнопка сброса должна убрать выделение с предметов, чтобы их можно было выбрать заново.
2 разработчик:
1. Создать форму с выбором доступных для героя предметов. Набор предметов зависит от расы и класса игрока. То есть при подтверждении должна вызываться функция
для отбора подходящих лутов. Напишите эту функцию.
2. Доступные предметы должны отобразиться пользователю в виде кнопок, которые он может нажать, снизу должна быть инструкция. Нажатые кнопки меняют цвет
(считаясь выбранными), а снизу вместо надписи «выберите экипировку» должна появиться кнопка сброса выбора. Слева от этих кнопок должна быть информация и
герое.
3. После сохранения данных о предметах, они должны добавить в useState. Далее ниже на странице должна появиться карточка (рамка) с новым профилем игрока: картинка
героя, снизу никнейм, раса и класс. Картинка-иконка героя должна меняться в зависимости от класса, расы и предметов героя. Напишите соответствующую функцию для
генерации.
23

24.

Задание №3
С помощью React создать форму с функциями валидации.
1 вариант:
1. Создать форму из 2 числовых поля (одно не менее 5 цифр, другое максимально из 8), поле с мультивыбором (checkbox), 1
строковое и поле со временем для заполнения (указать тип поля). Сверху над полем отображать его название. А внутри
правила заполнения. Поле с названием объединить в рамку.
2. Создать кнопку зелёного цвета для отправки. Кнопка должна располагаться посередине относительно полей формы.
3. При нажатии на кнопку данные должны с помощью состояния useEffect записываться в объект, если они валидны. После
чего выводиться на экран пользователю в любом виде (alert, innerHTML, на др. странице). Если поля не заполнены или
заполнены неверно, необходимо вывести красным шрифтом запись о каждом некорректно заполненным поле.
2 вариант:
1. Создать форму из 2 текстовых полей (одно не менее 3 символов, другое максимально из 20), поля с
вариантами выбора, 1 числового поля и поля в виде даты для заполнения (указать тип поля). Каждое поле с
новой строки посередине страницы. Внутри поля отображать его название (placeholder).
2. При вводе пользователем данных в поле, они должны сразу сохраняться в переменную состояния useState,
и при неправильном заполнении отображать ошибку снизу от кнопки.
3. Создать кнопку отправки данных также посередине с зелёным фоном. При нажатии должно выводиться
сообщение о незаполнение полей, если таковые имеются или об успешном сохранении данных.
24

25.

На этом всё