JSX в глибину

Примітка перекладача: Ми знаємо про JSX здебільшого завдяки відомій бібліотеці для побудови інтерфейсів React. Ця стаття є вільним перекладом статті з офіційного сайту React «JSX in Depth».

JSX — це розширення синтаксису JavaScript, яке виглядає як XML. Ви можете використовувати просту трансформацію синтаксису JSX в React.

Чому JSX?

Ви не зобов'язані використовувати JSX разом з React. Ви можете використовувати лише JS. Однак, ми радимо використовувати JSX тому, що у нього лаконічний та звичний синтаксис для визначення деревовидних структур з атрибутами.

Він більш звичний для випадкових розробників, таких наприклад як дизайнери.

XML має перевагу в збалансованих відкриваючих та закриваючих тегах. Це допомагає зробити великі дерева легшими для читання аніж функції чи літерали об'єктів.

Це не змінює семантику JavaScript.

HTML Tags vs. React Components

React може рендерити теги HTML (рядки), або компоненти React (класи).

Щоб відрендерити тег HTML, використовуйте назву імені тегу в нижньому регістрі:

var myDivElement = <div>;
React.render(myDivElement, document.body);

Щоб відрендерити компонент React (Component) в локальну змінну використовуйте верблюжу нотацію (camel notation) з великої літери:

var MyComponent = React.createClass({/*...*/});
var myElement = <mycomponent someproperty="{true}">;
React.render(myElement, document.body);

По великих чи рядкових літерах JSX визначає, що перед ним клас або HTML тег:

Зауваження: Оскільки JSX це JavaScript, атрибути, як от class чи for не схвалюються. замість них React DOM компоненти очікують className та htmlFor.

Трансформація

React JSX трансформує XML-подібний синтаксис в JavaScript. XML елементи, атрибути та дочірні елементи трансформуються в аргументи React.createElement

var Nav;
// На вході (JSX):
var app = <nav color="blue">;
// На виході (JS):
var app = React.createElement(Nav, {color:"blue"});

Зауважимо, що для того, щоб використовувати <nav>, змінна Nav повинна знаходитись в області видимості (scope).

JSX також дозволяє вказувати дочірні вузли використовуючи XML синтаксис:

var Nav, Profile;

// На вході (JSX):
var app = <nav color="blue"><profile>click</profile></nav>;

// На виході (JS):
var app = React.createElement(
  Nav,
  {color:"blue"},
  React.createElement(Profile, null, "click")
);

JSX вважатиме назву змінної в якості displayName, якщо displayName буде undefined:

// Ввід (JSX):
var Nav = React.createClass({ });
// Вивід (JS):
var Nav = React.createClass({displayName: "Nav", });

Скористайтесь Babel REPL щоб спробувати JSX та побачити як це інтерпретується в звичайний JavaScript, також HTML to JSX converter, щоб конвертувати ваш існуючий HTML в JSX.

Якщо ви хочете використовувати JSX, гайд Getting Started підкаже як легко розпочати.

Зауваження: Вирази JSX завжди обчислюються в ReactElement. Актуальна реалізація може варіюватися в деталях.

Простори імен компонентів

Якщо ви будуєте компонент, котрий має багато дочірних, наприклад форма, ви могли зіткнутись з чимось на зразок багатьох описів змінних:

// Незручний блок оголошених змінних
var Form = MyFormComponent;
var FormRow = Form.Row;
var FormLabel = Form.Label;
var FormInput = Form.Input;

var App = (
  <form>
    <formrow>
      <formlabel>
      <forminput>
    </forminput></formlabel></formrow>
  </form>
);

Щоб зробити це простішим, Простори імен компонентів (namespaced components) дозволяють вам використовувати один компонент, що має інші компоненти в якості атрибутів:

var Form = MyFormComponent;

var App = (
  <form>
    <form.row>
      <form.label>
      <form.input>
    </form.input></form.label></form.row>
  </form>
);

Щоб зробити це, вам потрібно лише створити ваш субкомпонент "sub-components" в якості атрибуту головного компоненту:

var MyFormComponent = React.createClass({ ... });

MyFormComponent.Row = React.createClass({ ... });
MyFormComponent.Label = React.createClass({ ... });
MyFormComponent.Input = React.createClass({ ... });

JSX опрацює ці властивості під час компіляції вашого коду.

var App = (
  React.createElement(Form, null,
    React.createElement(Form.Row, null,
      React.createElement(Form.Label, null),
      React.createElement(Form.Input, null)
    )
  )
);

Зауваження: Ця функція доступна починаючи з v0.11 та вище.

JavaScript вирази

Вирази в атрибутах

Щоб використовувати вирази JavaScript в значеннях атрибутів огорніть вираз в пару фігурних дужок {} замість лапок "".

// Ввід (JSX):
var person = <person ''}="" :="" ?="" name="{window.isLoggedIn" window.name="">;
// Вивід (JS):

var person = React.createElement(
  Person,
  {name: window.isLoggedIn ? window.name : ''}
);

Дочірні вирази

JavaScript вирази можуть бути використані для відображення вкладених вузлів:

// Ввід (JSX):
var content = <container>{window.isLoggedIn ? <nav> : <login>};
// Вивід (JS):
var content = React.createElement(
  Container,
  null,
  window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
);

Коментарі

Всередину JS виразів в JSX можна додавати коментарі, оскільки коментарі це JS вираз. Тільки будьте обережними додаючи {} навколо коментарів, коли знаходитесь у внутрішній дочірній секції тегу. Нижче показано, як правильно це зробити:

var content = (
  <nav>
    {/* дочірний коментар, слід огорнути в {}*/}
    <person ''}="" *="" :="" ?="" name="{window.isLoggedIn" window.name="" багато="" в="" коментар="" кінці="" рядка="" рядковий="">
  </person></nav>
);

Зауваження: JSX схожий на HTML, але не ідентичний до нього. Дивіться підводні камені JSX, щоб дізнатись про інші відмінності.