Апісанне UI

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

Праграмы 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.

Read More

---

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

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

import Profile from './Profile.js';

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

Ready to learn this topic?

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

Read More

---

Напісанне разметкі з дапамогай 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-разметку.

Read More

---

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.

Read More

---

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

Для камунікацыі між сабой кампаненты 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?

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

Read More

---

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

Часта можа ўзнікаць патрэба паказваць у кампанентах розныя рэчы ў залежнасці ад пэўных умоў. У 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?

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

Read More

---

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

Вам можа спатрэбіцца паказваць некалькі аднолькавых кампанентаў, базуючыся на пэўных даных. Вы можаце выкарыстоўваць 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?

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

Read More

---

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

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

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

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

let guest = 0;

function Cup() {
  // ДРЭННА: код змяняе пераменную, якая існуе па-за функцыяй!
  guest = guest + 1;
  return <h2>Кубачак чаю для госця №{guest}</h2>;
}

export default function TeaSet() {
  return (
    <>
      <Cup />
      <Cup />
      <Cup />
    </>
  );
}

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

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?

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

Read More

---

Карыстальніцкі інтэрфейс у выглядзе дрэва

React выкарыстоўвае дрэвы для мадэліравання адносін паміж кампанентамі і модулямі.

Дрэва рэндэрынгу React — гэта адлюстраванне бацькоўскіх і даччыных адносін паміж кампанентамі.

Кампаненты, якія знаходзяцца ў верхняй частцы дрэва, каля каранёвага кампанента, лічацца кампанентамі верхняга ўзроўню. Кампаненты без даччыных кампанентаў з’яўляюцца ліставымі кампанентамі. Такая класіфікацыя кампанентаў карысная для разумення патоку даных і прадукцыйнасці рэндэрынгу.

Мадэліраванне адносін паміж модулямі JavaScript — гэта яшчэ адзін карысны спосаб зразумець вашу праграму. Мы называем гэта «дрэвам залежнасці модуляў».

Дрэва залежнасцяў часта выкарыстоўваецца інструментамі зборкі для аб’яднання ўсяго адпаведнага JavaScript кода для спампоўвання і адлюстравання кліентам. Вялікі памер пакета пагаршае карыстальніцкі досвед узаемадзеяння з праграмамі напісанымі з дапамогай React. Разуменне дрэва залежнасцяў модуля дапамагае вырашаць такія праблемы.

Ready to learn this topic?

Азнаёмцеся са старонкай «Карыстальніцкі інтэрфейс у выглядзе дрэва» каб даведацца як ствараць дрэвы рэндэрынгу і дрэва залежнасцяў модуля для праграмы React і як гэтыя ментальныя мадэлі дапамагаюць палепшыць карыстальніцкі досвед і прадукцыйнасць.

Read More

---

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

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

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