Апісанне UI

React — гэта JavaScript бібліятэка для рэндэрынгу інтэрфейсу карыстальніка (UI). UI пабудаваны з маленькіх адзінак, такіх як кнопкі, тэксты, відарысы. React дазваляе камбінаваць іх у прыдатныя да паўторнага выкарыстання кампаненты, якія можна ўкладаць адзін у аднаго. Ад вэб-сайтаў да мабільных праграм — усё на экране можа быць разбітае на кампаненты. У гэтай главе вы даведаецеся як ствараць і змяняць кампаненты React, а таксама як паказваць іх па-рознаму ў залежнасці ад умоў.

In this chapter

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

Праграмы React пабудаваны з ізаляваных кавалкаў UI, якія называюцца кампанентамі. Кампанент React — гэта функцыя JavaScript, у якую вы можаце дадаць разметку. Кампанент можа быць маленькім, як кнопка, або вялікім, як цэлая старонка. Вось, напрыклад, кампанент Gallery, які рэндэрыць тры кампаненты Profile:

function Profile() { return ( <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" /> ); } export default function Gallery() { return ( <section> <h1>Выбітныя навукоўцы</h1> <Profile /> <Profile /> <Profile /> </section> ); }

Ready to learn this topic?

Звярніцеся да старонкі «Ваш першы кампанент» каб даведацца як аб’яўляць і выкарыстоўваць кампаненты React.

Імпарт і экспарт кампанентаў

Вы можаце аб’явіць некалькі кампанентаў у адным файле, але ў вялікіх файлах можа быць складана арыентавацца. Каб вырашыць гэтую праблему, вы можаце экспартаваць кампанент ва ўласны файл, а потым імпартаваць яго з іншага файла:

import Profile from './Profile.js'; export default function Gallery() { return ( <section> <h1>Выбітныя навукоўцы</h1> <Profile /> <Profile /> <Profile /> </section> ); }

Ready to learn this topic?

Звярніцеся да старонкі «Імпарт і экспарт кампанентаў» каб даведацца як падзяляць кампаненты па ўласных файлах.

Напісанне разметкі з дапамогай JSX

Кожны кампанент React — функцыя JavaScript, якая можа змяшчаць разметку, якую React будзе рэндэрыць у браўзеры. Кампаненты React выкарыстоўваюць пашырэнне сінтаксісу, якое называецца JSX каб апісваць разметку. Разметка JSX вельмі падобная да HTML, але яна больш строгая і можа паказваць даныя дынамічна.

Не любая HTML разметка будзе працаваць, калі ўставіць яе ў кампанент React:

export default function TodoList() { return ( // Гэта не будзе працаваць! <h1>Спіс задач Хедзі Ламар</h1> <img src="https://i.imgur.com/yXOvdOSs.jpg" alt="Hedy Lamarr" class="photo" > <ul> <li>Вынайсці новыя святлафоры <li>Адрэпетаваць сцэну з фільма <li>Палепшыць тэхналогію спектра </ul> ); }

Калі ў вас ёсць існуючая разметка ў HTML, вы можаце скарыстацца канвертарам:

export default function TodoList() { return ( <> <h1>Спіс задач Хедзі Ламар</h1> <img src="https://i.imgur.com/yXOvdOSs.jpg" alt="Hedy Lamarr" className="photo" /> <ul> <li>Вынайсці новыя святлафоры</li> <li>Адрэпетаваць сцэну з фільма</li> <li>Палепшыць тэхналогію спектра</li> </ul> </> ); }

Ready to learn this topic?

Звярніцеся да старонкі «Напісанне разметкі з дапамогай JSX» каб даведацца як пісаць правільную JSX-разметку.

JavaScript у JSX з дапамогай фігурных дужак

JSX дазваляе пісаць разметку, падобную да HTML унутры файлаў JavaScript, тым самым захоўваючы логіку і змесціва побач. Часам можа спатрэбіцца дадаць крыху логікі JavaScript або звярнуцца да дынамічных даных знутры разметкі. У падобнай сітуацыі можна выкарыстоўваць фігурныя дужкі ўнутры JSX каб «адчыніць акенца» ў JavaScript:

const person = { name: 'Грэгорыа І. Зара', theme: { backgroundColor: 'black', color: 'pink' } }; export default function TodoList() { return ( <div style={person.theme}> <h1>Спіс задач {person.name}</h1> <img className="avatar" src="https://i.imgur.com/7vQD0fPs.jpg" alt="Gregorio Y. Zara" /> <ul> <li>Палепшыць відэатэлефон</li> <li>Падрыхтаваць лекцыі па аэранаўтыцы</li> <li>Папрацаваць над рухавіком на спірце</li> </ul> </div> ); }

Ready to learn this topic?

Звярніцеся да старонкі «JavaScript у JSX з дапамогай фігурных дужак» каб даведацца як выкарыстоўваць даныя з JavaScript у JSX.

Перадача пропсаў у кампанент

Для камунікацыі між сабой кампаненты React выкарыстоўваць пропсы. Кожны бацькоўскі кампанент можа перадаваць некаторую інфармацыю даччыным, задаючы ім пропсы. Пропсы падобныя на атрыбуты ў HTML, але ў іх вы можаце перадаваць любыя JavaScript значэнні, уключаючы аб’екты, масівы, функцыі і нават JSX!

import { getImageUrl } from './utils.js' export default function Profile() { return ( <Card> <Avatar size={100} person={{ name: 'Кацуко Сарухасі', imageId: 'YfeOqp2' }} /> </Card> ); } function Avatar({ person, size }) { return ( <img className="avatar" src={getImageUrl(person)} alt={person.name} width={size} height={size} /> ); } function Card({ children }) { return ( <div className="card"> {children} </div> ); }

Ready to learn this topic?

Звярніцеся да старонкі «Перадача пропсаў у кампанент» каб даведацца як перадаваць і чытаць пропсы.

Умоўны рэндэрынг

Часта можа ўзнікаць патрэба паказваць у кампанентах розныя рэчы ў залежнасці ад пэўных умоў. У React вы можаце пісаць умовы для рэндэрынгу JSX з дапамогай JavaScript, выкарыстоўваючы ўмоўныя аператары if, && або ? :.

У прыкладзе ніжэй JavaScript аператар && выкарыстоўваецца, каб паказваць птушку ў залежнасці ад умовы:

function Item({ name, isPacked }) { return ( <li className="item"> {name} {isPacked && '✔'} </li> ); } export default function PackingList() { return ( <section> <h1>Спіс рэчаў Салі Райд у дарогу</h1> <ul> <Item isPacked={true} name="Скафандр" /> <Item isPacked={true} name="Шалом з залатым лістком" /> <Item isPacked={false} name="Фота Тэм" /> </ul> </section> ); }

Ready to learn this topic?

Звярніцеся да старонкі «Умоўны рэндэрынг» каб даведацца розніцу паміж рознымі спосабамі ўмоўнага рэндэрынгу.

Рэндэрынг спісаў

Вам можа спатрэбіцца паказваць некалькі аднолькавых кампанентаў, базуючыся на пэўных даных. Вы можаце выкарыстоўваць filter() і map() з JavaScript у React каб фільтраваць і ператвараць вашыя даныя з масіваў у кампаненты.

Кожны элемент масіву абавязкова мае мець унікальны key (ключ). Найчасцей вы можаце выкарыстоўваць ID з базы даных у якасці key. Ключы дазваляюць React адсочваць месцазнаходжанне кожнага элемента, нават калі спіс змяняецца.

import { people } from './data.js'; import { getImageUrl } from './utils.js'; export default function List() { const listItems = people.map(person => <li key={person.id}> <img src={getImageUrl(person)} alt={person.name} /> <p> <b>{person.name}:</b> {' ' + person.profession + ' '} вядомы(-ая) {person.accomplishment} </p> </li> ); return ( <article> <h1>Навукоўцы</h1> <ul>{listItems}</ul> </article> ); }

Ready to learn this topic?

Звярніцеся да старонкі «Рэндэрынг спісаў» каб даведацца як рэндэрыць спісы кампанентаў і як выбіраць ключ.

Захоўванне кампанентаў чыстымі

Некаторыя JavaScript функцыі называюцца чыстымі. Чыстыя функцыі:

Займаюцца сваёй справай. Яны не змяняюць аб’екты або пераменныя, якія існавалі да выкліку функцыі.
Вяртаюць прадказальны вынік. Пры аднолькавых уваходных даных чыстая функцыя заўсёды вяртае аднолькавы вынік.

Калі вы будзеце строга адпавядаць дадзеным прынцыпам, вы зможаце пазбегнуць шэрагу незразумелых хіб і непрадказальных паводзін па меры росту вашай кодавай базы. Вось прыклад кампанента, які не з’яўляецца чыстым:

Вы можаце зрабіць гэты кампаненты чыстым, перадаўшы пропс замест змянення знешняй пераменнай:

function Cup({ guest }) { return <h2>Кубачак чаю для госця №{guest}</h2>; } export default function TeaSet() { return ( <> <Cup guest={1} /> <Cup guest={2} /> <Cup guest={3} /> </> ); }

Ready to learn this topic?

Азнаёмцеся са старонкай «Захоўванне кампанентаў чыстымі» каб даведацца як пісаць кампаненты ў выглядзе чыстых прадказальных функцый.

Наступныя крокі

Пачніце са старонкі «Ваш першы кампанент» каб пачаць чытанне главы старонка за старонкай!

Калі дадзеная тэма вам ужо знаёмая, прапануем прачытаць пра Дадаванне інтэрактыўнасці.

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