В рамках моего пути к изучению ReactJS я узнал о JSX и о том, как он работает. Чтобы попытаться сделать это яснее для себя, я решил записать то, что я узнал. Я понял, что то, что я написал, может сделать это немного понятнее для кого-то другого, поэтому я разместил это здесь, на Medium.

JSX — это XML-подобное синтаксическое расширение ECMAScript, используемое ReactJS. Он не предназначен для реализации в веб-браузерах, а для переноса препроцессорами в стандартный ECMAScript. Вы можете не использовать JSX при использовании React, но JSX делает код React намного более элегантным.

JSX очень похож на HTML. Элементы JSX могут иметь атрибуты, аналогичные HTML (var p1 = ‹p id="example"›‹/p›), но элементы JSX обрабатываются как выражения JavaScript. Это означает, что элемент JSX может быть сохранен в переменной, передан в функцию, сохранен в объекте, и этот список можно продолжить. Выражения JSX могут быть вложены, как HTML. Это означает, что когда элементы JSX вложены друг в друга, они должны быть заключены в один элемент, иначе код не будет работать. Если выражение JSX занимает более одной строки, оно должно быть заключено в круглые скобки.

var paragraphs = ( 
    <div id=”this-is-the-outermost-element”> 
        <p>I am wrapped in the div.</p> 
        <p>I too am wrapped in the div.</p> 
    </div> 
);

В HTML принято использовать «класс» в качестве имени атрибута, но в JSX вы должны использовать «Имя класса». Слово «класс» является зарезервированным словом в JavaScript. При отображении JSX атрибуты «ClassName» автоматически отображаются как атрибуты «класса».

<p class="example">Hey</p>
    This will return an error
<p className="example">Hey</p>
    This will render as normal

Другое синтаксическое различие между HTML и JSX заключается в том, как обрабатываются самозакрывающиеся теги. Для таких тегов, как ‹img› и ‹br›, символ «/» в конце тега для его закрытия не обязателен. Они также не требуют другого тега для закрытия инструкции (‹/img›). В JSX все теги должны быть закрыты. Теги, требующие закрывающего тега, обрабатываются как обычные, а самозакрывающиеся HTML-теги требуют «/» в конце тега для закрытия (‹img /› или ‹br /›).

<br>
    This will be fine in HTML, but it will not work in JSX
<br />
    This will work in both HTML and JSX

Любой код, написанный между тегами элемента JSX, будет читаться как JSX. Это может вызвать проблемы, когда вы пытаетесь использовать JavaScript. При использовании JavaScript «var demo= 1 + 1» вернет «demo = 2». Когда один и тот же код написан между тегами элемента JSX, «var demo= 1 + 1» вернет «var demo = 1 + 1». При заключении элемента JavaScript в фигурные скобки элемент Javascript будет выполняться как обычно, а элемент JSX затем вернет «demo = 2».

var demo = (
    <p>1 + 1</p>
);
demo = 1 + 1
var demo = (
    <p>{1 + 1}</p>
);
demo = 2

Операторы if и циклы for не являются выражениями в JavaScript и поэтому не могут использоваться в JSX. Однако существует ряд простых и изящных обходных путей для использования условных операторов в JSX. Первый — внедрить JSX в оператор JavaScript «if». В приведенном ниже примере будет использоваться только соответствующий элемент JSX, а другой не будет прочитан компилятором.

if (demo == true){
    var message = <p>This JSX element will be compiled.</p>;
} else {
    var message = <p>This JSX element will not be compiled.</p>;
};

Тернарный оператор может использоваться в JSX и не требует обходных путей. Просто используя тернарный оператор между фигурными скобками, код будет прочитан компилятором и вернет соответствующее действие.

var demo = (
    <p>
        {5 < 6 ? true : false};
    <p>
);

Это мой первый пост в блоге. Я надеюсь, вам понравилось читать, и вы чувствуете себя немного более просвещенным, чем когда вы начали. Я открыт и поощряю обратную связь. Спасибо, что дочитали до этого места.