Путь к изучению React

231 Pages·2019·0.958 MB·Russian

by  Robin Wieruch и Alexey Pyltsyn

Путь к изучению React
Ваше путешествие по освоению обычного, но
прагматичного React
Robin Wieruch и Alexey Pyltsyn
Этакнигапредназначенадляпродажинаhttp://leanpub.com/the-road-to-learn-react-russian
Этаверсиябылаопубликованана2019-03-31
ЭтокнигасLeanpubbook.Leanpubпозволяетавторамииздателямучаствоватьвтак
называемомLeanPublishing-процессе,прикоторомэлектроннаякнигастановится
доступначитателямещёдоеёзавершения.Этопомогаетсобратьотзывыипожеланиядля
скорейшегоулучшениякниги.Мыпризываемавторовпубликоватьсвоиработыкакможно
раньшеичаще,постепенноулучшаякачествоиобъёмматериала.Темболее,чтоснашими
удобнымиинструментамиэтотпроцесспревращаетсявудовольствие.
©2018-2019RobinWieruchиAlexeyPyltsyn
Твитните эту книгу!
Пожалуйста,помогитеRobinWieruchиAlexeyPyltsynвраспространенииинформациио
книгевTwitter!
Предлагаемыйтвитдляэтойкниги:
Ясобираюсьизучать#ReactJsвместес«ПутькизучениюReact»от@rwieruch
Присоединяйтеськмоемупутешествию￿ https://roadtoreact.com
Предлагаемыйхештегдляэтойкниги#ReactJs.
Узнайте,чтодругиелюдипишутобэтойкниге,кликнувнассылкунастранцупоискапо
этомухештегувTwitter:
#ReactJs
Оглавление
Предисловие . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . i
Обавторе . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ii
Отзывы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iii
Образованиедлядетей . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . v
Частозадаваемыевопросы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . vi
Журнализменений . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . viii
Какчитатькнигу? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . x
Вызов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi
Обэтомпереводе . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii
Небольшаяпредыстория . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiv
Немногоопереводчике . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv
Немногооредакторе . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvi
Соглашения,принятыевпереводе . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii
Вдобрыйпуть . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .xviii
ВведениевReact . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Привет,менязовутReact. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Требования . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
nodeиnpm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Установка . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Установкабезконфигурации . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
ВведениевJSX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
constиletвES6 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
ReactDOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Горячаяперезагрузка. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
КомплексныйJavaScriptвJSX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
СтрелочныефункцииES6 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
КлассыES6 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
ОГЛАВЛЕНИЕ
ОсновыReact . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Внутреннеесостояниекомпонента . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
ИнициализацияобъектовES6 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Однонаправленныйпотокданных. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Привязки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Обработчиксобытий. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Взаимодействиясформамиисобытиями . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
ДеструктуризацияES6 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Контролируемыекомпоненты . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Разделениекомпонентов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Компонуемыекомпоненты . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Повторноиспользуемыекомпоненты. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Объявлениякомпонентов. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Стилизациякомпонентов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
ПолучениереальныхданныхсAPI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
Методыжизненногоцикла. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
Получениеданных . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
ОператоррасширенияES6 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Отрисовкапоусловию . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
Поискнасторонеклиентаинасторонесервера . . . . . . . . . . . . . . . . . . . . . . . . 103
Получениеданныхсразбивкойнастраницы . . . . . . . . . . . . . . . . . . . . . . . . . . 108
Кешклиента . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
Обработкаошибок . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
ИспользованиеAxiosвместоFetch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
Организацияитестированиекода . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130
МодулиES6:импортиэкспорт . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
ОрганизациякодаспомощьюмодулейвES6 . . . . . . . . . . . . . . . . . . . . . . . . . . 135
ТестированиеснимкамиспомощьюJest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
МодульноетестированиеспомощьюEnzyme . . . . . . . . . . . . . . . . . . . . . . . . . 147
ИнтерфейскомпонентаспомощьюPropTypes . . . . . . . . . . . . . . . . . . . . . . . . . 150
ОтладкаспомощьюинструментовразработчикаReact . . . . . . . . . . . . . . . . . . . 155
ПродвинутыеReact-компоненты . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
СсылканаDOM-элемент . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
Загрузка… . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
Компонентывысшегопорядка . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167
Продвинутаясортировка . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
УправлениесостояниемвReactизаегопределами . . . . . . . . . . . . . . . . . . . . . . 185
Подъёмсостояния . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
Пересмотр:setState() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
Укрощениесостояния . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198
ОГЛАВЛЕНИЕ
Заключительныешагикразвёртываниювпродакшене . . . . . . . . . . . . . . . . . . 201
Командаeject. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202
Деплойприложения . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
Краткийобзор . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Предисловие
ПутькизучениюReact(TheRoadtolearnReact)научитвасосновамReact.Входеизучениявы
создадите реальное приложение, используя обычный React без сложного инструментария.
Вам будет объяснено всё, начиная от настройки проекта и заканчивая развёртыванием
его на сервере. Книга содержит дополнительные ссылки для изучения и упражнения в
конце каждого раздела глав. После прочтения книги вы сможете создавать собственные
приложениянаReact.Материалкнигипостояннообновляетсямноюисообществом.
ВкнигеПутькизучениюReact яхочуизложитьосновы,преждечемвыначнётепогружение
вобширнуюэкосистемуReact.Вкнигемаловниманияуделяетсяинструментамивнешнему
управлению состоянием, но зато есть много информации о React. Она объясняет общие
концепции, типовые решения и лучшие практики, используемые при разработке React-
приложенийдляработывреальноммире.
Вынаучитесьсоздавать собственноеприложениена React, котороесодержиттакиевозмож-
ности, как постраничная навигация, кеширование на стороне клиента и такие пользова-
тельские взаимодействия, как поиск и сортировка. Кроме того, в процессе чтения книги вы
перейдётесJavaScriptES5наJavaScriptES6.Янадеюсь,чтоэтакнигаотразитмойэнтузиазм
поповодуReactиJavaScriptипоможетвамначатьихизучение.
Об авторе
Робин Вирух (Robin Wieruch) — немецкий разработчик программного обеспечения и веб-
приложений,которыйзанимаетсяобучениемипреподаваниемпрограммированияJavaScript.
Послеполучениястепенимагистравобластиинформатики,онпродолжаетучитьсякаждый
день. Его опыт в мире стартапа, где он много использовал JavaScript во время работы и
свободноговремени.Этодалоемувозможностьучитьдругихлюдейэтимтемам.
В течение нескольких лет Робин тесно сотрудничал с большой командой инженеров в
компании Small improvements¹ над работой крупномасштабного приложения. Компания
создаёт SaaS-продукт, позволяющий клиентам создавать культуру обратной связи в своей
компании.ПодкапотомприложениенафронтендеработалонаJavaScript,вкачествебекенда
использовалсяязыкJava.НафронтендеперваяитерациябыланаписананаJavaсиспользова-
ниемWicketFrameworkиjQuery.КогдапервоепоколениеSPAсталопопулярным,компания
перешланаAngular1.xдляфронтендаприложения.ПослеиспользованияAngularвтечение
болеедвухлетсталоясно,чтоAngularнелучшеерешениедляинтенсивноговзаимодействия
с состоянием в те дни. Именно поэтому компания сделала окончательный переход на React
иRedux,чтопозволилоприложениюуспешноработатьвбольшихмасштабах.
Во время своей работы в компании Робин регулярно писал статьи о веб-разработке на
своём сайте. Он получал отличные отзывы от людей о своих статьях, что в конечном счёте
позволило улучшить его стиль письма и обучения. Статья за статьёй, Робин вырос в своей
способности учить других. В его первой статье было слишком много лишнего, что услож-
нило её понимание для студентов, но со временем он улучшил эту статью, сосредоточив
вниманиенапреподаваниитолькооднойтемы.
ВнастоящеевремяРобинзанимаетсясобственнымделом,обучаядругихлюдей.Онсчитает
своей полноценной деятельностью видеть, как его студенты процветают, давая им чёткие
цели и короткий цикл обратной связи. Это то, чему бы вы научились, работая в компании,
предоставляющей обратную связь, не так ли? Но без достаточной практики, он не смог бы
обучать других. Именно поэтому он уделяет своё оставшееся время на программирование.
Вы можете найти более подробную информацию о Робине и о способах его поддержки и
работыснимнаегосайте².
¹https://www.small-improvements.com/
²https://www.robinwieruch.de/about
Отзывы
Естьмногоотзывов³,оценок⁴иотзывов⁵окниге,подтверждающиееёкачество.Ятакгоржусь
этим,потомучтояникогданеожидалтакоймощнойобратнойсвязи.Есливампонравится
данная книга, я бы с удовольствием хотел получить вашу оценку или обзор. Это помогает
мнерассказатьокниге.Нижеприведёнкраткийотрывокизэтиххорошихотзывов:
МухаммадКашиф(MuhammadKashif)⁶:«”ПутькизучениюReact”—этоуникальнаякнига,
которую я рекомендую любому студенту или профессионалу, интересующемуся обучением
основам React до продвинутого уровня. Она наполнена содержательными советами и ме-
тодами, которые трудно найти в другом месте, и замечательное использование примеров
и ссылок на примеры проблем, у меня есть 17-летний опыт разработки веб-приложений и
десктопныхприложений,идочтенияэтойкнигиуменябылипроблемысобучениемReact,
ноэтакнигадействуеткакмагия».
АндреВаргас(AndreVargas)⁷:«”ПутькизучениюReact”РобинаВируха—такаяпотрясаю-
щая книга! Большинство из того, что я узнал о React и даже ES6, было получено с помощью
неё!»
Николас Хант-Уокер (Nicholas Hunt-Walker), инструктор Python в школе программи-
рования в Сиэтле⁸: «Это одна из самых хорошо написанных и содержательных книг по
программированию,скоторойякогда-либоработал.ТвёрдоевведениевReactиES6».
ОстинГрин(AustinGreen)⁹:«Спасибо,оченьпонравиласькнига.Идеальноесочетаниедля
изученияReact,ES6иконцепцийпрограммированиявысшегоуровня».
Николь Фергюсон (Nicole Ferguson)¹⁰ : «В эти выходные я прохожу курс обучения Робина
Вируха,ияпочтичувствуювинузато,чтотакмноговеселья».
Каран (Karan)¹¹: «Закончил чтение “Путь к изучению React”. Лучшая книга для новичка в
миреReactиJS.ЭлегантноеознакомлениесES.Респект!:)»
ЭрикПриоу(EricPriou)¹²:«”ПутькизучениюReact”РобинаВируха—обязательноечтение.
ЧистотаикраткостьдляизученияReactиJavaScript».
Начинающий разработчик: «Я только что закончил книгу как неопытный разработчик,
спасибо за работу над ней. Мне было легко изучать её, и я уверен, что в ближайшие дни
³https://roadtoreact.com/
⁴https://www.goodreads.com/book/show/37503118-the-road-to-learn-react
⁵https://www.amazon.com/dp/B077HJFCQX
⁶https://twitter.com/appsdevpk/status/848625244956901376
⁷https://twitter.com/andrevar66/status/853789166987038720
⁸https://twitter.com/nhuntwalker/status/845730837823840256
⁹https://twitter.com/AustinGreen/status/845321540627521536
¹⁰https://twitter.com/nicoleffe/status/833488391148822528
¹¹https://twitter.com/kvss1992/status/889197346344493056
¹²https://twitter.com/erixtekila/status/840875459730657283
Отзывы iv
я начну разработку нового приложения с нуля. Книга была намного лучше официального
учебноговведенияReact.js,которыйяпробовалраньше(инемогзакончитьиз-заотсутствия
подробностей).Упражнениявкаждойглавебылиоченьполезными».
Студент:«Лучшаякнига,чтобыначатьизучатьReactJS.Разработкапроектадвигаетсявместе
с изучаемыми концепциями, которые помогают понять предмет. Я нашёл “Code and learn”
каклучшийспособосвоитьпрограммирование,иэтакнигаточноследуетэтому.
Томас Локни (Thomas Lockney)¹³: «Довольно солидное введение в React, которое не пыта-
ется быть всеобъемлющим. Я просто хотел понять, что это такое, и данная книга дала мне
именноэто.Янеследилзавсемималенькимисносками,чтобыузнатьоновыхвозможностях
ES6,которыеяпропустил(“Ябынесказал,чтояскучалпоэтому,Боб”—отсылка¹⁴изсериала
“Офисноепространство”).Нояуверен,чтотеизвас,ктоостанавливалсяиприлежноследил
заними,вероятно,узнаютнамногобольше,чемто,чемуучиткнига.».
¹³https://www.goodreads.com/review/show/1880673388
¹⁴http://quotegeek.com/quotes-from-movies/office-space/4848/