Увядзеньне ў JSX

Разгледзім гэтае аб’яўленьне зьменнай:

const element = <h1>Hello, world!</h1>;

Гэты забаўны тэгавы сынтаксіс не зьяўляецца ні радком, ні HTML.

Ён называецца JSX і зьяўляецца пашырэньнем сынтаксісу JavaScript. Мы рэкамэндуем выкарыстоўваць яго з React, каб апісваць тое, як павінен выглядаць інтэрфэйс карыстальніка (UI). JSX можа нагадаць вам шаблённую мову, але ён ідзе з поўнай моцай JavaScript.

JSX прадукуе “элемэнты” React. Мы будзем дасьледаваць іх рэндэрынг (перавод, візуалізацыю) у DOM у наступным разьдзеле. Ніжэй, вы можаце знайсьці асновы JSX, неабходныя, каб пачаць.

Чаму JSX?

React’у ўласьцівы той факт, што лёгіка рэндэрынгу неад’емна спалучана зь іншай UI лёгікай: як апрацоўваюцца падзеі (events), як зь цягам часу зьмяняецца стан (state), і як падрыхтоўваюцца даныя (data) да вываду на экран.

Замест таго, каб штучна разьдзяляць тэхналёгіі, разьмяшчаючы разьметку й лёгіку ў розных файлах, React разьдзяляе сфэры ўплыву па слабазьвязаных адзінках, званых “кампанэнтамі”, якія зьмяшчаюць абедзьве тэхналёгіі. Мы вернемся да кампанэнтаў у далейшым разьдзеле, але калі вы яшчэ не адчулі зручнасьці зьмяшчаць разьметку ў JS, то гэтая лекцыя можа пераканаць вас.

React не патрабуе выкарыстаньня JSX, але большасьць людзей знаходзіць гэта карысным, дзякуючы нагляднасьці пры працы з UI унутры коду JavaScript. Таксама гэта дазваляе React паказваць больш карысныя паведамленьні пра памылкі ды папярэджаньні.

Хопіць пра гэта, давайце пачнем!

Выразы, убудаваныя ў JSX

У прыведзеным ніжэй прыкладзе мы аб’яўляем пераменную, якая называецца name, а затым выкарыстоўваем яе ўнутры JSX, абгарнуўшы ў фігурныя дужкі:

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

Вы можаце зьмясьціць любы дапушчальны выраз JavaScript у фігурных дужках у JSX. Напрыклад, 2 + 2, user.firstName, ці formatName(user) зьяўляюцца дапушчальнымі выразамі JavaScript.

У прыведзеным ніжэй прыкладзе мы ўкладаем вынік выкліку функцыі JavaScript, formatName(user), у элемэнт <h1>.

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

Паспрабуйце на CodePen.

Дзеля зручнасьці чытаньня мы падзялілі JSX на некалькі радкоў. Хоць гэта й не абавязкова, але пры гэтым мы таксама рэкамэндуем абгортваць яго ў дужкі, каб пазьбегнуць пастак аўтаматычнае ўстаўкі кропкі з коскай.

JSX — гэта таксама выраз

Пасьля кампіляцыі, выразы JSX становяцца звычайнымі выклікамі функцый JavaScript і вызначаюць аб’екты JavaScript.

Гэта значыць, што вы можаце выкарыстоўваць JSX унутры апэратараў if ды цыклаў з for, прысвойваць яго пераменным, прымаць яго ў якасьці аргумэнтаў і вяртаць яго з функцыяў:

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

Заданьне атрыбутаў з дапамогай JSX

Вы можаце выкарыстоўваць двукосьсі, каб пазначаць радковыя літаралі ў якасьці атрыбутаў:

const element = <div tabIndex="0"></div>;

Таксама вы можаце выкарыстаць фігурныя дужкі, каб уставіць выраз JavaScript у атрыбут:

const element = <img src={user.avatarUrl}></img>;

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

Увага:

Паколькі JSX бліжэй да JavaScript, чым да HTML, React DOM выкарыстоўвае пагадненьне camelCase (вярблюджай) уласьцівасьці найменьняў замест атрыбутных імёнаў HTML.

Напрыклад, class становіцца className у JSX, а tabindex становіцца tabIndex.

Указаньне дзяцей (Children) у JSX

Калі тэг пусты, то вы можаце закрыць яго непасрэдна з дапамогай />, як у XML:

const element = <img src={user.avatarUrl} />;

Тэгі JSX могуць зьмяшчаць дзяцей:

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

JSX прадухіляе ін’екцыйныя атакі

Гэта надае бясьпечнасьці, калі ўставіць карыстацкі ўвод (user input) у JSX:

const title = response.potentiallyMaliciousInput;
// Гэта надае бясьпеку:
const element = <h1>{title}</h1>;

Па змаўчаньні, React DOM усьцерагаецца любых убудаваных у JSX значэньняў перад іх рэндэрынгам (візуалізацыяй). Такім чынам, гэта гарантуе, што вы ніколі ня зможаце нічога ўвесьці, што не прапісана відавочна ў вашай прыкладной праграме. Ўсё канвэртуецца ў радок, перш чым будзе рэндэрыцца. Гэта дапамагае прадухіліць XSS (cross-site-scripting — міжсайтава-сцэнарныя) атакі.

JSX прадстаўляе аб’екты

Babel кампілюе JSX у выклікі React.createElement().

Гэтыя два прыклады ідэнтычныя:

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

React.createElement() выконвае некалькі праверак, каб дапамагчы вам пісаць код без памылак, але па сутнасьці ён стварае аб’ект падобны гэтаму:

// Заўвага: гэтая структура спрошчаная
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

Гэтыя аб’екты называюцца “React-элемэнты”. Вы можаце ўважаць іх за апісаньні таго, што вы хочаце бачыць на экране. React чытае гэтыя аб’екты і выкарыстоўвае іх для пабудовы DOM і падтрыманьня яго ў актуальным стане.

Мы будзем дасьледаваць рэндэрынг React-элемэнтаў у DOM у наступным разьдзеле.

Карысная парада:

Мы рэкамэндуем выкарыстоўваць азначэньне мовы “Babel” для абранага вамі рэдактара, каб і код ES6 і код JSX былі правільна падсьвечаныя. Гэты сайт выкарыстоўвае сумяшчальную зь імі колеравую схему Oceanic Next.