Abr@X@bra.ru
Курс по React JS #3. JSX

Курс по React JS #3. JSX

09.04.2017
825

В прошлом выпуске уроков по React JS, мы создавали React элементы с помощью метода React.createElement. Таким способом можно создать пару простых элементов. Но как только появится возможность, размещать элементы иерархично, такой способ создания элементов превратится очень быстро в головную боль.

Посмотрите на это так, для описания структуры документа мы используем html, на основе которого браузер создает DOM. Html идеально подходит для описания иерархии тегов. Было бы здорово использовать html, для создания React элементов. Именно для этого был придуман JSX.

JSX

JSX – означает JavaScript Syntax Extension. Или по русски – расширения синтаксиса JavaScript. JSX представляет из себя синтаксис, очень похожий на html. Мы его уже видели, когда познакомились со средствами разработчика.

Возьмем создания элемента с помощью метода React.createElement('h1', null, 'React'); . В данном случае мы создаем, заголовок h1 с текстом React. Аналогичный элемент в JSX выглядит следующим образом:

<h1>React</h1>

Точно также как и html. Давайте посмотрим на код который мы написали в предыдущих постах данного курса:

React.createElement('div', {className: 'container'},

React.createElement('img', {src: '...'});

React.createElement('h1', null, 'React');

React.createElement('p', null, '...');  

};

В данном случае элементы создаются без определения переменных. Аналогичный код на JSX выглядит следующим образом:

<div className="container">

Мы создаем див, далее указываем класс, точно также как и при использование метода createElement, слово class мы использовать не можем, поэтому используем слово className.

<div className="container">

<img src="..." />

Далее изображение. Заметьте, что в JSX пустые элементы должны обязательно заканчиваться на / и далее треугольная скобка. То есть если в html5 косую линию можно не ставить, то в JSX она обязательна.

<div className="container">

<img src="..." />

<h1>React</h1>

Далее h1.

<div className="container">

<img src="..." />

<h1>React</h1>

<p>...</p>

Параграф и закрывает  див.

<div className="container">

<img src="..." />

<h1>React</h1>

<p>...</p>

</div>

За исключением className практически идентично html.

Мы написали код на JSX, что дальше? Ни браузер ни движок Javascript не знают, что такое JSX. Это означает, что код написанный на JSX  необходимо перевести во что? Скорее всего вы подумали, что в html, но это не так. JSX переводится в JS. То есть, вот такой код на JSX:

<div className="container">

<img src="..." />

<h1>React</h1>

<p>...</p>

</div>

Превратится вот в такой код на Javascript:

React.createElement('div', {className: 'container'},

React.createElement('img', {src: '...'});

React.createElement('h1', null, 'React');

React.createElement('p', null, '...');  

};

Для перевода JSX в JS имеется несколько инструментов. Самым популярным из них является Babel. Если вы пишите код на ES6 то скорее всего знакомы с ним. Так как пока мы только начинаем, вместо настройки Babel на страницу мы просто добавим script, с помощью которого JSX будет переводиться в JS прямо на лету.

Такой способ транспиляции кода, конечно не подходит для написания настоящего приложения, но для наших целей вполне приемлемо.

В редакторе у меня открыта директория JSX. Содержимое файлов такое же как в предыдущих постах, за исключением нового файла app.jsx. В котором с помощью JSX создаются элементы аналогичные тем, которые создаются в файле app.js.


Заметьте, код JSX обычно пишется в файлах с расширением .jsx. Этого делать не обязательно и код можно писать в файлах с расширением js. Да именно так, не забывайте, что JSX переводится в JS. Так как JSX писать можно вместе с JS, данную разметку мы можем сохранить в переменную, как бы это странно ни звучала.

Итак, создадим переменную, назовем ее jsx. В качестве значения присвоим разметку которую мы написали и после закрывающего дива поставлю точку с запятой, так как по сути, это Javascript.


Далее из файла app.js я скоприю последнюю строку. И вместо container отправлю переменную jsx.


Далее, перейдем в файл index.html где нам необходимо внести несколько изменений.

Во первых заметьте, я добавил третий скрипт в котором подгружается Babel. Так же мы теперь подгружаем файл не app.js, а app.jsx.


Также нам необходимо указать Bable, что данный файл нужно переводить в JS, перед тем как выполнить работу скрипта. Для этого элементу необходимо добавить атрибут type со значением type="text/babel".


Далее, откроем терминал и запустим сервер - http-server. Сервер запустился, перейдем в браузер, обновим страницу и увидим тоже самое.


Давайте посмотрим на DOM в средствах разработчика. Вкладка Elements, DOM выглядит точно также ничего не изменилось.


Перейдем во вкладку React. В главном окне отображается код JSX который мы написали в файле.


Возможно размещение разметки html вместе с кодом JS кажется вам немного дикой. Как только мы перейдем к написанию полноценного приложения, поверьте вы в полной степени оцените все преимущества данного подхода.

Чтобы не пропустить следующих выпусков по урокам React js и быть в курсе всех последних новостей, подписывайся на мои аккаунты в соцсетях, все ссылки на них ты сможешь найти у меня на сайте.


Источник: codedojo

React JS, JSX
Читайте также:
Курс по ES6 #0. Пилотный выпуск. Вступление

Курс по ES6 #0. Пилотный выпуск. Вступление

ECMAScript 2015 или ES6 летом 2015 был принят как официальный стандарт, и является самым крупным обновлением языка за по...
Читать
Курс по React JS #2. Средства разработчика

Курс по React JS #2. Средства разработчика

Продолжаем изучать React JS. В этом посте я расскажу как установить и настроить средства разработчика, чтобы процесс...
Читать
Курс по React JS #1. Пилотный выпуск. Привет React!

Курс по React JS #1. Пилотный выпуск. Привет React!

В этом посте расскажу как написать первое простое приложение на React js.
Читать