Введение в JSX
JSX является альтернативой формирования структуры DOM ReactJS.
Элементы указываются при помощи тегов HTML.
Чтобы использовать JSX следует подключить библиотеку babel:
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
которая переводит его в обычный код React.
Адрес библиотеки babel: https://babeljs.io/setup#installation
Элементы JSX следует записывать между элементами:
<script type="text/babel"></script>
Пример кода JSX:
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<div id='root'><div/>
<script type="text/babel">
let els=<ul>
<li>первый вложенный элемент</li>
<li>второй вложенный элемент</li>
</ul>
ReactDOM.render(els, document.getElementById('root'))
</script>
class является зарезервированным символом, вместо него используется className:
<h1 className='className'>содержимое</h1>
Выполнение JavaScript в JSX
Для выполнения кода JavaScript в JSX его следует заключать в фигурные скобки.
<input type="checkbox" defaultChecked={false}>
Вывод массива в JSX:
<ul>
{massive.map((val, key)=>
<li key={key}>{val}</li>
)}
</ul>
Фигурные скобки следует указывать для выражений в каждом элементе JSX.
Здесь указаны фигурные скобки сначала для массива в элементе ul.
Затем указаны фигурные скобки для key и value в элементе li.
Функциональный компонент JSX
Представляет собой функцию, возвращающую JSX элементы:
let m = [1,2,3,4,5]
const Start=(hello)=>
<article>
<h1>{hello.title}</h1>
<ul>
<li>первая запись</li>
<li>Первая запись массива m: {hello.VR[0]}</li>
</ul>
</article>
let jsxcomp=<Start VR={m} title="Передача аргументов"/>
ReactDOM.render(jsxcomp, document.getElementById('text'))
Определение компонента происходит по имени функции:
<Start VR={m} title="Передача аргументов"/>
Где свойства VR={m} title="Передача аргументов" элемента Start, фактически являются аргументами, попадающими
в параметр hello в виде объекта т. к. обращение к ним проиходит как к свойствам объекта: hello.title, hello.VR[0].
Свойства могут передавать строки или выражения JavaScript. Выражения JavaScript могут представлять собой объект, массив, функцию.
Тот же пример с деструктуризацией объекта {VR, title} позволяет обращаться напрямую к его свойствам:
const Last = ({VR, title})=>
<article>
<h1>{title}</h1>
<ul>
<li>первая запись</li>
<li>Первая запись массива m: {VR[0]}</li>
</ul>
</article>