Компаненты React 101: стварэнне павтарнае і прыемлівыя часткі UI
Дазнаецеся, чаму разбіўка інтэрфейсаў на маленькія компоненты React павышае ўзаемнае викорыстоўванне, чытальнасць і саавершанню працы кольківі, а пасля створыце свой першы функцыйнальны компонент.
Знайомая ситуацыя для кожнага разраба фронтэнду
Уявіце сабе: гэта ваша першая недзеля ў новай стартап-компаніі.
Ваш менеджер падыходзіць да вашага стола і кажа вам,
"Главная стороніца павинна быць готовая да пятніцы."
Вы ачынаеце дизайн у Figma.
У ёму є такія разделы:
- Меню навігацыі ў верхней частцы
- Вялікі банер
- Раздел для пошуку
- Практычныя прыклады продуктав
- Раздел з атестаціямі клёпакоў
- Таблыца цэнаў
- Раздел з часта задаваемымі запитамі
- Форма для падпіску на навінную
- Футер сайту
Задача здаецца досыта простай.
Вы ствараеце адну HTML-файл і пачынаеце ствараць кожны раздел по чаргаў.
До пятніцы все гатова.
Усё працюе нормальна.
Вы дужа задоволены.
Праўільна, месяц пасля — продукт вырос.
Команда з маркетынгу хочаць новаг дизайна банера.
Дзялэгі перерабляюць паліцу навігацыі.
Команда з розрабоцтва продукту хочаць дапаможнаг раздзелу з цэнамі.
Атрыбуты адзінакоў тепер трэба завантажваць дынамічна.
Неўзабаве гэты файл вырас да 2 000 ліній.
Пошук адзінаг кантакта прыводзіць да падобных пошукоў у лабірынтэ коду.
І ўсё горша — незначныя змены ў адной частцы стораніцы можу разбіць ўсё іншае, або ж неякраз супакойна звязанае.
Чы гэта здаецца вам знайомым?
Самэ гэта проблема падштовхнула разрабоўцоў да іншаг падходу да стварэння інтэрфейсаў.
Замест таго, каб ствараць адну вялічыню-стораніцу, што, якщо ёё склadaць з многа маленькіх, можна перызначваць частак?
У React гэтыя часткі называюцца Компанентамі.
Чаму адзіны вялічынный файл руйнуюцца
Уявіце сабэчын веб-сторанку, створаную способамі з даўніх часоў.
Homepage.html
---------------------------------------------------
Navigation
Hero Section
Featured Products
About Us
Testimonials
Pricing
FAQ
Newsletter
Footer
---------------------------------------------------
Кожны элемент сторанкі знаходзіцца ў тым жа файле.
Калі проект расте, вы заўважыце:
- Размах файла продовжвае зростаць.
- Работа ў команде становіцца складней.
- Няма можлівасці перызнаць што-небудзь.
- Багі пачынаюць з’являцца частае.
- Тырчанне коду стае вялікай навантажэнням.
Тепер паглядзіце, як React адмаўляецца той жа сторанку.
App
│
├── Navbar
├── Hero
├── Products
│ ├── ProductCard
│ ├── ProductCard
│ └── ProductCard
├── Testimonials
├── FAQ
└── Footer
Уместо таго, каб усё паклаціць у адны файл, кожны раздел стае самастоятельной ейкавай часткаю.
Эты тэпат званы архітектурай на базе компанентаў.
Апісаванне React-компаненту
У сваім сэрцы компанент — гэта проста перызнаемая частка інтэрфейсу.
Можна супакаваць яго як функцыю JavaScript, якая вяртае кантэнт у формате JSX.
У зямест на тое, каб упакаваць цэлую сторанку ў адні файл, яе разбіваюць на меншыя, спецыялізаваныя часткі.
Кожная частка виконвае толькі адну задачу.
Напрыклад:
Панель навігацыі стае самастоятным компонентам.
Футер — ўжо іншым компонентам.
Карточка товара — ўсё іншым компонентам.
Раздел з прафілем пользователя таксама стае компонентам.
Потым гэтыя компоненты складаюцься разам, ствараючы цэлую прыкладнасць.
Рэзультатам яе є кодавая база, якая значна лёгчая для чытання, тэставання і падтрымкі з часам.
Змена спосабу мышлення пра інтэрфейс
Гэта адна з найважлівейшых змян у мышленні, якія вам даведзецца перайняць пад час вивучэння React.
Перастаньце думаць пра цэлыя сторанкі.
Пачніце думаць пра адзінаковыя часткі.
У зямест таго, каб спытацца:
"Як мне стварыць галоўную сторанку?"
Паскудзіце такое запытанне:
"Каліяе меньшыя элементы складаюцца ўгадзе гэтую стартовую сторону?"
Калі гэта разумеўце стане ясным, React пачынае здавацца набагато інтуўітывным.
Параўнанне з павсядзеннай жыццю
Падумаце пра складанне горада з LEGO.
Вы ж не будете кожны раз, калі патрабуецца цеглы, лепіць абсалютна новую.
У замен вы беразеце тыя цеглы, якія ўжо у вас є.
Дзеякія цеглы ствараюць стэны.
Іншыя становяцца вікнамі.
Іншыя ўтвараюць дахі.
Складаючы і перамешваючы гэтыя тыя ж віднаўляемыя цеглы, вы можете пабудаваць безліч разных будынкаў.
Компаненты React працуюць абсалютна такім жа спосабам.
Одны компанент Button можа з’явіцца:
- На экране входу
- У вікні Modal
- На сторанцы адплата
- У палітрэ навігацыі
Вы ствараеце яго толькі аднажды.
Потым вы простаўляеце яго там, дзе ён патрэбны.
Гэта і ўсё тое, што даўнаяго прыносяць Компаненты.
Прычыны існавання модэлю Компанентаў у React
React выкарыстоўвае Компаненты, таму што яны спрыяюць рашэнню рэальных, практычных проблем.
1. Можлівасць павторнага выкарыстоўвання
Створыце яго адназначна.
Выварачвайце яго без канца.
Уместо таго, каб двацять разоў перзначаць код таго ж кантакту, вы задаеце адзін Компанент Button і прыўязываеце яго там, дзе ён патрэбны ў всім прыкладніку.
2. Чытаемасць
Разглядзім два сцэнарыя паўза-паўза.
Адны файл, які налічвае 2 000 ліній.
Працоўна з...
Дваццаць адзінаковых файлоў, кожны з якіх мае адну, ясную месца прызначэння.
Калькамі да чаго з іх вы хацелі б вернуцца чераз шасць месцаў?
Меньшыя Компаненты проста лёгкія для розумення.
3. Адтрыманнасць
Уявіце сцэнарыю, калі ваша компанія вирашае зменіць колер галоўнай кнопкі.
Якбы вы не раздзелілі свой інтерфейс на компаненты, такая змяна значыла б неабходнасць пошуку та рэдагавання дзесяткаў файлаў.
Але за дапамогою аднаго відновімога компаненту кнопкі вы робіце змяны ў адным месцы.
Кожны экран, які викорыстоўвае гэтую кнопку, мгнова прадаё новы відказ.
4. Спавялення команды
Уявіце пяцьх разработчыкаў, працуючых над аднай і той жа базай коду.
Одна людзь займаецца навігацыяй.
Іншы працюе над роздзелам галоўнай аптавы.
Трэці стварае карточкі продуктав.
Чэтырты працюе над ніжней часткай сторанкі.
Задача пярога разработчыка — аб’еднанне всіх эых частакаў.
Паколькі кожная функцыя знаходзіцца у сваём сабе компаненте, ніхто не павінен перакрываць чужую работу або чакаць, пакуль файл стане вольным.
Самэ гэтае паралельнае ведачэнне ўработы яшчэ больш падкрэслвае значэнне Компанентоў у командах з разработкі ў рэальным свете.
Функцыянальныя Компаненты
Кодавые базы сучасных проектаў на React практычна абоўсюды выкорыстоўваюць функцыянальныя Компаненты.
По суті, функцыянальны Компанент — гэта проста функцыя на JavaScript, якая вяртае JSX.
Ось найпростейшая версія, якую можна напісаць:
function Welcome() {
return <h1>Hello, React!</h1>;
}
На першы погляд, гэта выглядае як звычная функцыя на JavaScript — таму што такая ён і є.
Тое, што яе адрознівае, — гэта тое, што замест таго, каб вярнуць чысла або строку, яна вяртае JSX, і React выкарыстоўвае гэты JSX, каб вырашыць, што паказаць на экране.
Разберамо ўсё па шагах:
function Welcome()
Тут мы прызначаем функцыю пад назвай Welcome.
Зверніце увагу на великую літеру „W“ на пачатку назвы.
React спецыяльна стежыць за тым, калі першая літера ў напісе ў верхньам регистре, каб з’ясаваць, чы хутчэй трэба спрацоўваць функцыю як Компонент.
Далей ідзе гэты рядок:
return <h1>Hello, React!</h1>;
Задача функцыі — вярнуць JSX.
Таму кожны раз, калі React атрыбутуе Welcome, показываецца самэў гэты загалоўкі.
Усё проста так.
Вы ўжо створылі свой першы Компонент.
Стварэнне вашага першага Компонента
Калі проект пачынае растаць, разработчыкі зазвычай даюць кожнаму Компоненту свой сабэйны файл.
Тыповая структура папак можа выглядаць так:
src
├── App.jsx
└── components
└── Welcome.jsx
У Welcome.jsx знаходзіцца наступны код:
function Welcome() {
return <h1>Welcome to React!</h1>;
}
export default Welcome;
Раздзелэнне Компонентаў на адны файлы дапамагае падтрымваць чыстасцю кодавой базы і значна спроствае ўправлінне яёю па меры росту.
Экспорт Компонентаў
Можа, вас цікавіць мета гэтага рядка:
export default Welcome;
Спачатку вы проста ўвайшлі надзеяны, можна перыяўтараць компанент.
Даколькі ён знаходзіцца толькі ў сваёй сабе файле, нічога іншага ў вашай аплікацыі не можа да яго дасягнуць.
Экспорт — гэта тое, што дазволяе яго викорыстоўваць у іншых месцах.
Гэта трохі падобнае да публікацыі рукапіса.
Калі ён выйдзе у свет, кожны можа яго взяць і прачытаць.
Тая ж логіка дапраўдзяецца і тут — калі вы экспортуеце компанент, будзь-які іншы файл у вашам проекте можа яго імпортуваць і адначасова викорыстоўваць.
Існуюць іншыя спосабы экспорту компанентоў, пра якія мы пагаварым у наступных частках гэтай серыі, але export default — гэта стандартны выбар, калі вы толькі пачынаеце.
Імпорт компанентоў
Давайце запрашымо Welcome у App.jsx і адначасова викорыстоўмо яго.
import Welcome from "./components/Welcome";
Гэтыя рэчы па сутнасці ўказваюць React:
«З’явіце компонент
Welcomeз гэтага файла, каб я мог ужыць яго проста тут.»
Калі яго імпортуецца, його адрасаванне не выклікае жадных працоў:
function App() {
return (
<>
<Welcome />
</>
);
}
Пагляньце атрымлівей на гэты фрагмент сынтаксу:
<Welcome />
Хоць Welcome спачатку быў звычным функцыяй JavaScript, мы можамі ўжываць яго так сама, як натыўны тэг HTML.
Гэта адна з найэлегантнейшых сторон работы з React — вашыя спецыяльныя функцыі ператвараюцца на повторна вжываемыя елементы інтерфейсу.
Як React бачыць компонент
Калі React зустрэчае гэты рядок:
<Welcome />
я он не тлумачыць яго як маркап.
У замест на гэтае, тое, што відбываецца пад капотам, выглядае больш-менш так:
Call the Welcome() function
↓
Receive JSX
↓
Convert JSX
↓
Update the Virtual DOM
↓
Render the UI
Проста кажучы, кожны компонент ў сутнасі являе сабою вызов функцыі, якая вяртае частку інтерфейсу.
Калі гэяядзенне стане зрозумелым, компаненты больш не будуць атрымавацца як якаясь спецыяльная магія.
Правілы называння
Є калькі правіл называння, якія варта запам’ятаваць.
Хорашыя назвы:
- Navbar
- Footer
- Hero
- ProductCard
- UserProfile
Назвы, якіх трэба уваҞліватца:
- navbar
- footer
- component
- abc
У чым прычына?
React выкарыстоўвае правілы напісання, каб адзначыць вашыя спецыяльныя компаненты ад вбудованных тагаў HTML.
Паглядзіце гэты прыклад:
<Navbar />
React спрыяе гэтаму як дахоўке пахаду на вашы сабествораны компанент.
Параўняйце з гэтым:
<div>
які React адначыта як стандартны, вбудованы элемент HTML.
Выбір чыстых, адкладных назваў таксама прыносіць практычныя выгоды, калі іншы разработчыкі пазней павінны чытаць і розумець ваш код.
Ключовыя моманты
Цікава стислае падсумованне таго, што мы вучыліся даўна.
- Компонент — это самодостатні, можна перадаўальны фрагмент UI.
- Стварэнне додатку на React па сутнасці значыць проста складанне і аб’еднаванне компонентам.
- Функцыянальныя компоненты — это звычайныя функціі JavaScript, якія вяртаюць JSX.
- Разбіўка додатку на компоненты павышае чытаемасць, можна перадаўальнасць і дагляд за нім у далекай перспективе.
- Якша спроектаваны компонент нацэнены на выпаленне адной задачы.
- Звычайная практыка — хаваць кожны компонент у своім файле і імпортуваць яго там, дзе ён патрэбен.
- Застосаванне великіх літер — гэта спосаб, яким React адразняе вашыя спецыяльныя компоненты ад звычайных элементаў HTML.
Супакойлена літэратура
- Стварэнне ментальнага модэля для React: супрацоўка з рэкансіліяцыяй, станам і хукамі — Дазвольце вам зразумець прычыны, якія стояць за асновнымі концэптамі React — рэкансіліяцыяй, компонентамі, пропамі, станам і хукамі — каб развіць інтуўіцыю заместа запамятоввання API.
- Супрацоўка з станамі інтэрфейсу ў рэальным свете за дапамой умовнага атрыбутавання ў React — Дазвольце вам дазнацца, як ствараць інтэрфейсы для аутантыкацыі, ролей, прав, стану завантажэння, памылак і порожньага стану ў React за дапамой практычных шаблонаў умовнага атрыбутавання.
catch () выклікае SyntaxError у JavaScript — Дазнаюцесь, чаму порожняй список параметраў у функцыі catch цэлкам наражае на проблемы парсаванне коду ў JavaScript, а таксама пазнаём два правільныя з граматычнай точкі зору спосабы напісання блока catch без параметраў.