Глава 24. Добавление React к существующему веб-сайту 371
Если в контейнере уже присутствует тот же элемент содержимого, выведенный пре-
дыдущим вызовом функции render(), этот элемент содержимого будет обновлен.
Указанная функция будет вызвана после вывода или обновления элемента содержи-
мого. Она не должна ни принимать параметров, ни возвращать результата.
Далее приведен пример вывода спойлера, содержащего сведения о фреймворке
React и основанного на компоненте Spoiler (см. разд. 24.2). При этом подразумева-
ется, что код этого компонента хранится в файле spoiler.js, а таблица стилей, задаю-
щая его оформление, — в файле styles.css.
<html lang="ru">
<head>
...
<link rel="stylesheet" href="spoiler.css">
<script src="spoiler.js"></script>
</head>
<body>
<div id="cont1"></div>
</body>
<script>
const cont1 = document.getElementById('cont1');
ReactDOM.render(
React.createElement(
Spoiler,
{ title: 'React', isOpened: true },
React.createElement('p', null, 'Популярный веб-фреймворк.')
),
cont1
);
</script>
</html>
24.4. Другие полезные инструменты
для работы с содержимым React
Объект React хранит две полезные функции, которые могут пригодиться при работе
с содержимым React:
cloneElement() — создает точную копию указанного элемента содержимого, до-
бавляет к нему заданные пропы и обработчики событий, новые потомки и возвра-
щает эту копию в качестве результата:
React.cloneElement(<элемент содержимого>[,
<пропы и обработчики событий>=null[,
<потомок 1>, <потомок 2>, . . . , <потомок n>]])
Пропы и обработчики событий указываются в том же формате, что и у метода
createElement().
Заключение
На этом книга о веб-фреймворке React и программировании веб-приложений с его
применением закончена. Мы подробно изучили сам фреймворк, дополнительные
библиотеки, существенно облегчающие разработку, различные полезные приемы
программирования, инструменты для отладки, процесс публикации готовых при-
ложений, рендеринг на стороне сервера и даже инструменты, позволяющие встро-
ить React-приложения в уже существующие веб-страницы. И, наконец, написали
вполне функциональное и практически полезное React-приложение для ведения
списка планируемых дел, которое можно использовать как основу для создания
более развитых и специализированных решений.
React — это невероятное сочетание простоты в освоении, скорости и компактности.
Вы, уважаемые читатели, как хотите, но автору нравится эта библиотека!
Судя по всему, фреймворку уготована долгая жизнь. Появившись в 2011 году как
внутренняя разработка корпорации Facebook, став достоянием публики в 2013-м,
React лишь наращивал популярность. Многие конкурирующие с ним фреймворки
появились, на мгновение блеснули на небосклоне и канули в Лету, а React все так
же гордо занимает заслуженное первое место.
Каково будущее этого фреймворка? Безусловно, он будет развиваться, обзаводясь
новыми впечатляющими функциональными возможностями, становясь все быст-
рее, компактнее и удобнее. Также можно сказать, что все большую роль в нем бу-
дут играть компоненты-функции — ведь уже сейчас многие дополнительные биб-
лиотеки реализуют свои программные инструменты в виде хуков, используемых
исключительно в компонентах этого рода (к числу таких библиотек можно отнести,
например, React Router). Не исключено, что спустя несколько версий компоненты-
классы будут объявлены устаревшими и нерекомендованными к применению, а
позже, возможно, их поддержка вообще будет удалена из React.
Так или иначе, сейчас имеет смысл потратить некоторое время на изучение React.
Количество проектов, реализованных с его применением, растет, равно как и коли-
чество свободных вакансий React-программистов. Так что спешите занять их —
иначе вас опередят!
В табл. З.1 приведен перечень дополнительных интернет-ресурсов, посвященных
React. Они очень помогут вам в изучении этого замечательного фреймворка.
376 Заключение
Таблица З.1. Перечень интернет-ресурсов по теме книги и смежным темам
Интернет-адрес Описание
https://ru.reactjs.org/
Домашний сайт React, его русская редакция. Документация,
https://create-react-app.dev/ включая вводный курс для начинающих, новости, блог
https://nodejs.org/en/ разработчиков, сведения о поддержке, ряд ссылок на другие
https://docs.npmjs.com/ тематические ресурсы
https://telegram.me/react_js Домашний сайт инструментальной утилиты create-react-app,
http://t.me/react_ru которая служит для создания React-проектов
Домашний сайт Node.js — среды исполнения
JavaScript-программ
Документация по npm — пакетному менеджеру, поставляемому
в составе Node.js и предназначенному для установки
дополнительных библиотек и инструментальных программ
Два русскоязычных Telegram-канала, посвященных React
И, напоследок, для ознакомления — три веб-фреймворка, конкурирующие с React,
но не настолько популярные:
Preact (https://preactjs.com/) — альтернатива React, более компактная (про-
граммное ядро в сжатом виде занимает всего 3 Кбайт), но более низкоуровневая.
Принципы программирования аналогичны таковым у React. Неплохая альтерна-
тива, если требуется высокая скорость запуска приложения;
Vue.js (https://vuejs.org/) — более высокоуровневый фреймворк, построенный
согласно архитектуре «контроллер — шаблон — оформление». Код каждого
компонента делится на три части: собственно программная логика (контроллер),
представление, записанное на HTML с вкраплениями специального макроязыка
(шаблон), и таблица стилей, которая пишется на обычном CSS (оформление).
Хороший выбор для тех, кто любит все раскладывать по полочкам. Фреймворк
постепенно набирает популярность;
Angular (https://angular.io/) — наиболее высокоуровневый, полнофункциональ-
ный фреймворк. Включает в себя все, что необходимо для разработки даже
очень сложных приложений: функциональность компонентов, средства навига-
ции, валидации, поддержку анимации, инструменты для взаимодействия с бэкен-
дом и многое другое из того, что в React реализуется в сторонних библиотеках.
Также основан на архитектуре «компонент — шаблон — оформление». Лучший
выбор для программирования сложных решений, однако несколько громоздок,
сложен в освоении и требует тщательного планирования.
Что ж, на этом — все! Автор прощается с вами, уважаемые читатели, и напоследок
желает успехов в таком увлекательном деле, как веб-программирование.
Владимир Дронов
ПРИЛОЖЕНИЕ
Описание электронного архива
Электронный архив, сопровождающий книгу, можно скачать с FTP-сервера изда-
тельства «БХВ» по адресу: ftp://ftp.bhv.ru/9785977596831.zip. Ссылка на него дос-
тупна и со страницы книги на сайте https://bhv.ru/.
Список папок и файлов, имеющихся в архиве:
config — папка с конфигурационным файлом для веб-сервера Apache HTTP
Server, необходимым для публикации React-приложения (подробности —
в разд. 22.3.1.1);
server — папка с программным кодом серверной программы, выполняющей рен-
деринг React-приложения на стороне сервера (была описана в разд. 23.1.1);
server-with-routing — папка с программным кодом серверной программы, выпол-
няющей рендеринг React-приложения, в котором реализована навигация, на сто-
роне сервера (см. разд. 23.2);
todos — папка с программным кодом учебного веб-приложения для ведения спи-
ска планируемых дел, разрабатываемого во вводном курсе (главы 1 и 2);
readme.txt — текстовый файл с описанием электронного архива и инструкциями
по запуску учебного веб-приложения.
Предметный указатель
@ Bounce 305
BrowserRouter 203
@babel/register 360
C
_
cascade 308
__REDUX_DEVTOOLS_EXTENSION__() 344 caseSensitive 201, 207, 214
__REDUX_DEVTOOLS_EXTENSION_ cast() 302
children 125, 126
COMPOSE__() 344 Children 128
className 206, 315, 320
A cloneElement() 371
collapse 309
abort() 271 columnIndex 319, 322, 323
actions 263 columnWidth 319, 323
addCase() 254 combineReducers() 227
addDefaultCase() 257 compact() 300
addMatcher() 256 component 280, 288, 293
align 322 Component 115
any 195 componentDidCatch() 330
appear 307, 309 componentDidMount() 129
applyMiddleware() 233 componentDidUpdate() 130
areMergedPropsEqual 246 componentStack 330
areOwnPropsEqual 245 componentWillUnmount() 131
areStatePropsEqual 246 condition 266
areStatesEqual 245 configureStore() 259
arg 270 connect() 239
array 192 connectAdvanced() 246
array() 299 Consumer 166
arrayOf() 194 context 166, 239, 244
as 275 contextType 166
count 307
B count() 128
countCount 319
Babel 27 createAction() 252
basename 202 createAsyncThunk() 264
big 304 createContext() 165
bindActionCreators() 225 createDispatchHook() 251
bool 192 createElement() 369
boolean() 298 createPortal() 134
bottom 304, 305 createReducer() 254, 257
createRef() 135
Предметный указатель 379
createSelector() 230, 272 forever 307
createSelectorHook() 251 form 289, 293
createSlice() 261 Form 275
createStore() 219 Formik 273, 302
createStoreHook() 251 forwardRef 244, 247
current 135 forwardRef() 173
fraction 307
D Fragment 117
fulfilled 267
dangerouslySetInnerHTML 111 funс 192
data 314, 319
date() 298 G
default() 296
defaultProps 122 generatePath() 206
delay 306 getDefaultMiddleware() 260
devTools 260 getDerivedStateFromError() 330
dirty 284 getDerivedStateFromProps() 133
dispatch 242, 265 getDisplayName 248
dispatch() 222 getFieldProps() 288
dispatchConditionRejection 267 getSnapshotBeforeUpdate() 131
displayName 116, 167 getState 265, 267
DocumentTitle 324 getState() 221
duration 306 Google Firebase 54
Google Firebase SDK 61
E
H
element 193, 200
elementType 193 handleBlur() 287
email() 297 handleChange() 287
enableReinitialize 274 handleReset() 287
end 213, 214 handleSubmit() 287
enhancers 260 hash 210
ensure() 297, 299 HashRouter 201
error 270, 289 HeadShake 310
ErrorMessage 280 height 314, 319
errors 284, 290, 301 horizontalScrollDirection 321
etimatedColumnWidth 323 htmlFor 107
etimatedItemSize 318 hydrate() 363
etimatedRowHeight 323
exact() 195 I
excludeEmptyString 297
extraReducers 262 id 351
ignore-styles 360
F import() 326
in 309, 311
Fade 303 index 212, 314
fallback 327 initialError 289
field 289 initialErrors 282
Field 275, 289 initialScrollLeft 320
FieldArray 291 initialScrollOffset 315
FixedSizeGrid 318 initialScrollTop 320
FixedSizeList 313 initialState 262
Flash 310 initialStatus 274
Flip 304 initialTouched 282, 289
for 107 initialValue 289
forceUpdate() 134 initialValues 273
forEach() 128 innerElementType 315, 320
380 Предметный указатель
innerRef 275, 316, 321 mountOnEnter 309
insert() 292 move() 292
instanceOf() 194
integer() 298 N
isActive 206
isDefaultPrevented() 159 name 261, 275, 280, 289, 291
isPropagationStopped() 159 nativeEvent 159
isRequired 195 Navigate 207
isScrolling 314, 319 NavLink 206
isSubmitting 284, 290 negative() 298
isValid 284 nextReducer() 229
isValid() 301 node 192
isValidating 284, 290 notOneOf() 296
isValidElement() 372 npx 19
isValidSync() 302 nullable() 296
itemCount 314 number 191
itemData 315, 319 number() 297
itemKey 315, 319
itemSize 314, 318 O
J object 192
object() 300
Jello 310 objectOf() 194
JSX 25, 106 of() 299
Jump 310 onBlur 289
onChange 289
K oneOf() 193, 296
oneOfType() 193
key 113, 129 onItemRendered 315, 320
onlyChild() 128
L onRender 351
onReveal 308
layout 314 onScroll 316, 321
lazy() 327 onSubmit 278
left 304 opposite 307
length() 296, 299 outerElementType 315, 320
lessThan() 298 outerRef 316, 321
LightSpeed 306 Outlet 212
Link 205 overscanColumnCount 320
lowercase() 297 overscanColumnStartIndex 320
overscanColumnStopIndex 320
M overscanCount 315
overscanRowCount 320
map() 128 overscanRowStartIndex 320
match() 254 overscanRowStopIndex 320
matcher 258 overscanStartIndex 315
matches() 297 overscanStopIndex 315
matchPath() 214
max() 297, 298, 299 P
memo() 151, 152
message 297 params 215
meta 289 path 200, 214
methodName 248 pathname 210
middleware 259 pattern 215
min() 296, 298, 299 payload 218
mirror 307 pending 267
moreThan() 298 pop() 292
Предметный указатель 381
positive() 298 rowIndex 319, 322, 323
preloadedState 260 RubberBand 310
prepare 261
Profiler 351 S
props 121, 128
propTypes 190, 191 scrollDirection 316
Provider 166, 239 scrollLeft 321, 322
Pulse 310 scrollOffset 316
pure 244 scrollTo() 317, 322
PureComponent 140 scrollToItem() 317, 322
push() 292 scrollTop 321, 322
scrollUpdateWasRequested 316, 321
R search 210
serve 356
React 368 setErrors() 286
React Developer Tools 334 setFieldError() 286
React Document Title 324, 366 setFieldTouched() 286
React Redux 238 setFieldValue() 285
React Reveal 303, 366 setState() 35, 123
React Router 198 setStatus() 286
React Window 313 setSubmitting() 287
ReactDOM 368 setTouched() 286
ReactRouterDOM 369 setValues() 285
reducer 258, 259, 261, 262 Shake 310
reducers 261 shape() 194, 300
Redux 216 shouldComponentUpdate() 130
Redux DevTools 344 shouldForceUpdate 324
Redux DevTools Extension 344 shouldHandleStateChanges 247
Redux Thunk 236 signal 266
Redux Toolkit 252 Slide 305
ref 135, 136, 173 Spin 310
refProp 312 spy 307
rejected 268 ssrFadeout 366
rejectWithValue 266 ssrReveal 366
remove() 292 state 123, 205, 208, 209, 210
render 281 StaticRouter 365
render() 94, 116, 370 status 284, 290
renderCountProp 248 store 239
renderToString() 362 StrictMode 332
replace 205, 208, 209 string 191
replace() 292 string() 296
requestId 265, 270 style 111, 207, 314, 315, 319, 320
required() 296 submitCount 285, 290
Reselect 229 submitForm() 286
resetAfterColumnIndex() 323 subscribe() 223
resetAfterIndex() 318 Suspense 327
resetAfterIndices() 323 swap() 292
resetAfterRowIndex() 323 Swing 310
resetForm() 286, 290 symbol 192
rewind() 366 SyntheticEvent 159
right 304
Roll 305 T
Rotate 305
round() 298 Tada 310
Route 200 thunkMiddleware() 236
Routes 201 timeout 306
rowCount 319 title 324
rowHeight 319, 322
382 Предметный указатель
to 205, 208, 209 validateField() 285
toArray() 128 validateForm() 285
top 304 validateOnBlur 282
touched 284, 289, 290 validateOnChange 282, 291
trim() 297 validateOnMount 282
truncate() 298 validateSync() 301
type 128, 217, 275 ValidationError 301
validationSchema 302
U value 166, 289
values 284, 290
unmountComponentAtNode() 372 VariableSizeGrid 322
unmountOnExit 309 VariableSizeList 318
unshift() 292 verticalScrollDirection 321
unwrap() 270 visibleColumnStartIndex 320
uppercase() 297 visibleColumnStopIndex 320
url() 297 visibleRowStartIndex 320
URL-параметр 49, 204 visibleRowStopIndex 320
useCallback() 153 visibleStartIndex 315
useContext() 166 visibleStopIndex 315
useDispatch() 250
useEffect() 147 W
useIsScrolling 315, 320
useLayoutEffect() 149 wait 308
useLocation() 210 Web Vitals 350
useMatch() 215 Webpack 27
useMemo() 152 when 308, 311
useNavigate() 208 width 314, 319
useParams() 205 withReveal() 311
useRef() 150 Wobble 310
useSelector() 248
useState() 145 Y
useStore() 251
uuid() 297 Yup 294
V Z
validate 279, 281 Zoom 305
validate() 301
Веб-страница приложения 89, 92
Б Веб-фреймворк клиентский 12
Виртуальная DOM 114
Бандл 27 Воздействие 217
Бэкенд 11 Временная диаграмма 339
Выброс 358
В Выпуск 212
Валидатор 190 Г
Валидация 81, 181
Веб-приложение 11 Гиперссылка активная 45, 206
◊ бессерверное 54 Гость 80
◊ одностраничное 12, 21 График продолжительности рендеринга 340
◊ серверное 57
Предметный указатель 383
Д Метод
◊ волшебный 69, 129
Документ 73 ◊ жизненного цикла 129
◊ корневой 73 Модуль стартовый 22, 94
Монитор кода 97
Ж Монтирование 69, 116
Жизненный цикл 129, 147 Н
З Навигация 42, 198
◊ многоуровневая 211
Загрузка по запросу 326 Нагрузка 165
К О
Ключ 113 Обновление 116
Кнопка: гамбургер 46 ◊ лишнее 138
Колбэк-реф 136 Обозначение бренда 26
Коммит 338 Объект
Коммутатор 42, 199 ◊ простой 23
Композиция 182 ◊ служебный 23
Компонент 21 ◊ состояния 35, 123
◊ вложенный 22 ◊ хранения 177
◊ высшего порядка 182 Отправитель воздействий 225
◊ класс 23, 115 Отслеживание кода 98
◊ приложения 21 Ошибка
◊ раздела 212 ◊ критическая 98
◊ связанный 238 ◊ некритическая 99
◊ функциональный 143
◊ функция 27, 143 П
◊ целевой 42, 199
◊ чистый 139 Папка проекта 18, 88
◊ экран 21 Передача пропов тегам 121
Контекст 165 Переменная окружения 93, 101
Перенаправление 52, 199
Л ◊ рефа 173
Переходник 236
Линтер 96 Подъем данных 31, 163, 170
Пользователь текущий 63
М Портал 134, 161
Посредник 231
Маршрут 42, 199 Построитель веб-форм 273
◊ вложенный 211 Потомок 22
◊ корневой 211 Потребитель контекста 166
◊ параметризованный 49, 204 Предохранитель 330
◊ родительский 211 Преобразователь 216, 218
◊ совпавший 42, 199 ◊ составной 227
Маршрутизатор 43, 199 ◊ среза 227
Массив элементов управления 291 Провайдер
Мемоизация 151 ◊ контекста 165
Меню навигации 26, 46 ◊ хранилища 239
Местоположение 210 Проект 18, 88
◊ текущее 210 ◊ серверный 55
Проп 27, 108, 120, 144, 163
Профилировщик 337
384 Предметный указатель
Путь 42, 74, 198 Тег
◊ текущий 42, 199 ◊ компонента 28
◊ целевой 45 ◊ корневой 25, 116
◊ шаблонный 42, 199 Транслятор 27
Р У
Разделение кода 326 Условный вывод 112
Размонтирование 129
Расширитель хранилища 233 Ф
Рендеринг 116
◊ на стороне сервера 359 Фабрика
◊ первоначальный 116 ◊ методов 178
◊ повторный 116 ◊ функций 178
Рендер-проп 171 Файл
Реф 135 ◊ окружения 101
◊ объектный 135 ◊ окружения локальный 101
◊ функциональный 136 Фрагмент 117
Родитель 22 Фронтенд 11
С Х
Сборщик 27 Хранилище 216, 219
Сброс стилей 95 Хук 147
Связка 27, 96
Селектор 217, 221 Ч
Слот 126
Слушатель 217, 223 Чанк 96
Снимок 75
Создатель воздействия 225 Ш
Сосед 22
Состояние 22, 34, 122 Шаблон 89
◊ хранилища 216
Спойлер 100 Э
Спуск данных 27, 163
◊ простой 164 Экран 12, 21
◊ сквозной 164 ◊ главный 199
Срез 227 Элемент управления
Статус веб-формы 274 ◊ активный 177
Строгий режим 332 ◊ контролируемый 179
СУБД документная 73 ◊ неконтролируемый 176
Схема 294 ◊ пассивный 176
◊ посещенный 281
Т
Я
Таблица стилей
◊ компонента 140 Якорь 31
◊ приложения 95
The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.
Книга посвящена программированию веб-приложений на языке JavaScript с применением популярного веб-фреймворка React. Дается вводный курс, наглядно, по шагам описывающий разработку несложного веб-приложения — списка запланированных дел. Описываются базовые инструменты: создание и настройка React-проекта, написание компонентов, язык JSX, передача данных между компонентами и создание веб-форм. Рассматриваются полезные дополнительные библиотеки: React Router (навигация), Redux, React Redux и Redux Toolkit (централизованное хранилище данных), Formik (быстрая разработка веб-форм), Yup (валидация), React Reveal (анимационные эффекты) и др. Рассказывается о разделении кода, обработке ошибок, средствах отладки, публикации готового веб-приложения и рендеринге на стороне сервера.
Электронный архив на сайте издательства содержит код описанного в книге веб-приложения и другие полезные файлы.
Discover the best professional documents and content resources in AnyFlip Document Base.
Search