Представяне на JSX

Разгледайте тази декларация на променлива:

const element = <h1>Здравей, свят!</h1>;

Този забавен синтаксис не е нито низ, нито HTML.

Той се нарича JSX и е синтактично разширение на JavaScript. Препоръчваме да го използвате с React, когато описвате как трябва да изглежда потребителският интерфейс. JSX може да ви напомня за шаблонен език, но идва с всички възможности на JavaScript.

JSX произвежда React “елементи”. Ще разгледаме рендирането им в DOM в следващия раздел. По-долу можете да намерите основите на JSX, необходими за да започнете.

Защо JSX?

React приема факта, че логиката за рендирането е без съмнение в съчетание с друга логика на потребителския интерфейс: как се обработват събитията, как се променя състоянието във времето и как се подготвят данните за показване.

Вместо изкуствено разделяне на технологии чрез поставяне на markup и логика в отделни файлове, React разделя отговорностите чрез свободно свързани единици, наречени “компоненти”, които съдържат и двете. Ще се върнем към компонентите в следващата секция, но ако все още не ви е удобно да поставяте markup в JS, тази презентация може да ви убеди в това.

React не изисква използването на JSX, но повечето хора го намират за полезен като визуална помощ при работа с потребителски интерфейс в JavaScript код. Той също така позволява на React да показва по-полезни предупреждения и съобщения за грешки.

След като уточнихме това, нека да започнем!

Вграждане на изрази в JSX

В примера по-долу, ние декларираме променлива, наречена name, и след това я използваме в JSX, като я обгърнем във фигурни скоби:

const name = 'Иван Атанасов';
const element = <h1>Здравей, {name}</h1>;

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

Можете да поставите всeки валиден JavaScript израз в къдравите скоби в JSX. Например, 2 + 2, user.firstName или formatName(user) са валидни JavaScript изрази.

В примера по-долу вграждаме резултата от извикването на JavaScript функцията formatName (user) в елемент <h1>.

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

const user = {
  firstName: 'Иван',
  lastName: 'Атанасов'
};

const element = (
  <h1>
    Здравей, {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>Здравей, {formatName(user)}!</h1>;
  }
  return <h1>Здравей, Непознат.</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.

Указване на деца с JSX

Ако даден таг е празен, можете да го затворите незабавно с />, като в XML:

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

JSX таговете могат да съдържат деца:

const element = (
  <div>
    <h1>Здравей!</h1>
    <h2>Хубаво е че си тук.</h2>
  </div>
);

JSX предотвратява атаки чрез инжектиране

В JSX е безопасно да се използва информация въведена от потребителя:

const title = response.potentiallyMaliciousInput;
// Това е безопасно:
const element = <h1>{title}</h1>;

По подразбиране, React DOM escapes всички стойности, вградени в JSX, преди да ги рендира. По този начин се гарантира, че никога не можете да инжектирате нещо, което не е изрично написано във вашето приложение. Всичко се преобразува в низ, преди да се визуализира. Това помага да се предотвратят XSS (cross-site-scripting) атаки.

JSX представя обекти

Babel компилира JSX до React.createElement() извиквания.

Тези два примера са идентични:

const element = (
  <h1 className="greeting">
    Здравей, свят!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Здравей, свят!'
);

React.createElement() извършва няколко проверки, за да ви помогне да пишете безпроблемен код, но в крайна сметка създава обект като този:

// Забележка: тази структура е опростена
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Здравей, свят!'
  }
};

Тези обекти се наричат ​​“React елементи”. Може да мислите за тях като за описания на това, което искате да видите на екрана. React чете тези обекти и ги използва, за да построи DOM и да го поддържа актуализиран.

Ще разгледаме визуализирането на React елементи в DOM в следващия раздел.

Съвет:

Препоръчваме ви да използвате “Babel” езикова дефиниция за редактора, който сте избрали, така че и ES6 и JSX кодът да е с правилен syntax highlighting.