Ваш першы кампанент

Кампаненты: будаўнічыя блокі UI

У інтэрнэце HTML дазваляе нам ствараць структураваныя дакументы, выкарыстоўваючы ўбудаваны набор тэгаў, напрыклад <h1> і <li>:

<article>
  <h1>Мой першы кампанент</h1>
  <ol>
    <li>Кампаненты: будаўнічыя блокі UI</li>
    <li>Аб’яўленне кампанента</li>
    <li>Выкарыстанне кампанента</li>
  </ol>
</article>

Дадзеная разметка паказвае гэты артыкул <article>, яго загаловак <h1> і (скарочаны) змест як упарадкаваны спіс <ol>. Такая разметка ў спалучэнні з CSS для стылізаціі і JavaScript для дадавання інтэрактыўнасці хаваецца ў кожнай бакавой панэлі, аватары, мадальным меню, выпадаючым спісе — у кожнай частцы карыстальніцкага інтэрфейсу, якую вы бачыце ў інтэрнэце.

React дазваляе камбінаваць разметку, CSS і JavaScript у карыстальніцкія «кампаненты» — прыдатныя да паўторнага выкарыстання элементы інтэрфейсу для вашай праграмы. Код зместу вышэй, можна пераўтварыць у кампанент <TableOfContents />, які можна рэндэрыць на кожнай старонцы. «Пад капотам» ён па-ранейшаму выкарыстоўвае тыя ж тэгі HTML, такія як <article>, <h1> і г.д.

Гэтак жа, як і HTML тэгі, кампаненты можна камбінаваць, упарадкоўваць і ўкладаць адзін у аднаго для стварэння цэлых старонак. Напрыклад, старонка дакументацыі, якую вы зараз чытаеце, складаецца з кампанентаў React:

<PageLayout>
  <NavigationHeader>
    <SearchBar />
    <Link to="/docs">Дакументацыя</Link>
  </NavigationHeader>
  <Sidebar />
  <PageContent>
    <TableOfContents />
    <DocumentationText />
  </PageContent>
</PageLayout>

Па меры росту вашага праекта, вы заўважыце, што многія з вашых старонак можна стварыць, паўторна выкарыстоўваючы ўжо гатовыя кампаненты, што паскарае распрацоўку. Наш змест вышэй можа быць дададзены на любы экран з дапамогай тэга <TableOfContents />! Можна нават хутка запусціць свой праект з дапамогай тысяч кампанентаў з адкрытым зыходным кодам, якія былі створаны супольнасцю React, напрыклад Chakra UI і Material UI.

Аб’яўленне кампанента

Раней пры стварэнні вэб-старонак распрацоўшчыкі размячалі свой кантэнт, а затым дадавалі інтэрактыўнасць з дапамогай JavaScript. Гэта выдатна працавала, бо інтэрактыўнасць у інтэрнэце была проста прыемнай дробяззю. Сёння ж гэта абавязковая частка для многіх сайтаў і ўсіх праграм. React ставіць інтэрактыўнасць на першае месца, але пры гэтым выкарыстоўвае тую ж самую тэхналогію: React кампанент — гэта JavaScript функцыя, якую вы можаце прыпудрыць разметкай. Вось як гэта выглядае (вы можаце рэдагаваць прыклад ніжэй):

А вось як стварыць кампанент:

Крок 1: Экспартаваць кампанент

Прэфікс export default — гэта стандартны сінтаксіс JavaScript (не з’яўляецца спецыфікай React). Ён дазваляе пазначыць галоўную функцыю ў файле, каб потым яе можна было імпартаваць з іншых файлаў. (Больш падрабязна пра імпартаванне можна пачытаць у раздзеле «Імпартаванне і экспартаванне кампанентаў»!)

Крок 2: Аб’явіць функцыю

З дапамогай function Profile() { } вы аб’яўляеце JavaScript функцыю з назвай Profile.

Крок 3: Дадаць разметку

Кампанент вяртае тэг <img /> з атрыбутамі src і alt. Тэг <img /> выглядае як HTML, але насамрэч пад капотам гэта JavaScript! Гэты сінтаксіс называецца JSX, і ён дазваляе вам устаўляць разметку ў JavaScript.

Аператар return можа быць запісаны ў адзін радок, як у гэтым кампаненце:

return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Кэтрын Джонсан" />;

Але калі ўся ваша разметка не знаходзіцца ў тым жа радку, што і ключавое слова return, то вы павінны заключыць яе ў дужкі:

return (
  <div>
    <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Кэтрын Джонсан" />
  </div>
);

Выкарыстанне кампанента

Цяпер, калі вы аб’явілі свой кампанент Profile, вы можаце ўкладаць яго ў іншыя кампаненты. Напрыклад, вы можаце экспартаваць кампанент Gallery, які выкарыстоўвае некалькі кампанентаў Profile:

Што бачыць браўзер

Звярніце ўвагу на розніцу ў рэгістры:

• Тэг <section> пішацца ў ніжнім рэгістры, таму React ведае, што мы спасылаемся на тэг HTML.
• Тэг <Profile /> пачынаецца з вялікай літары P, таму React ведае, што мы хочам выкарыстоўваць наш кампанент пад назвай Profile.

А Profile змяшчае яшчэ нават больш HTML: <img />. У рэшце, вось што бачыць браўзер:

<section>
  <h1>Выбітныя навукоўцы</h1>
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Кэтрын Джонсан" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Кэтрын Джонсан" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Кэтрын Джонсан" />
</section>

Укладанне і арганізацыя кампанентаў

Кампаненты — гэта звычайныя JavaScript функцыі, таму вы можаце мець некалькі кампанентаў у адным файле. Гэта зручна, калі кампаненты адносна невялікія або цесна звязаны адзін з адным. Калі файл становіцца перапоўненым, вы заўсёды можаце перанесці Profile у асобны файл. Хутка вы даведаецеся, як гэта зрабіць на старонцы пра імпартаванне.

Паколькі кампаненты Profile рэндэрыцца ўнутры Gallery (нават некалькі разоў!), мы можам сказаць, што Gallery з’яўляецца бацькоўскім кампанентам, які рэндэрыць кожны кампанент Profile як «даччыны». Гэта частка магіі React: вы можаце аб’явіць кампанент адзін раз, а потым выкарыстоўваць яго ў любой колькасці месцаў і колькі хочаце разоў.

export default function Gallery() {
  // 🔴 Ніколі не аб’яўляйце кампанент унутры іншага кампанента!
  function Profile() {
    // ...
  }
  // ...
}

export default function Gallery() {
  // ...
}

// ✅ Аб’яўляйце кампаненты на верхнім узроўні
function Profile() {
  // ...
}