Синтаксис JSX
JSX расшифровывается как JavaScript XML. Т.е. смесь JavaScript и HTML, которая используется в React.js в методе return (render) для визуализации. Задача JSX – облегчить построение интерфейсов в React.
Также, JSX позволяет просто создавать элементы и помещать их в DOM без каких либо операций createElement, appendChild.
JSX преобразует HTML-теги в элементы React.
1. Создание и вывод константы
Создадим в App.js константу и выведем ее в return. Для вывода переменной применяется синтаксис {} фигурных скобок ( иногда называется Mustache template)
function App() {
// создание и вывод константы
const d1 = 567;
return (
<div className="App">
<p>Вывод константы {d1}</p>
</div>
);
}2. Создание и вывод переменной
Ничем не отличается от вывода константы — аналогично применяем синтаксис “усов”.
function App() {
// создание и вывод переменной
const d2 = 'Hello';
return (
<div className="App">
<p>Вывод переменной {d2}</p>
</div>
);
}Согласитесь — довольно просто и не нужно получать элемент через querySelector, делать innerHTML, textContent etc.
Также мы можем внутри {} писать выражения. Например конкатенация.
function App() {
// конкатенация
const d2 = 'Hello';
return (
<div className="App">
<p>Конкатенация текста {d2 + ' World'}</p>
</div>
);
}Либо математические операции с переменной.
function App() {
// математические операции с переменной
const d2 = 7;
return (
<div className="App">
<p>Вывод переменной {d2*9}</p>
</div>
);
}3. Вывод массива
Выводить массив на страницу — операция которая требует приведения типа к строке. Обычно в JavaScript это делается с помощью цикла или reduce. В React все намного проще. Применяется метод массива map:
function App() {
// вывод массива
const d4 = [11,22,33];
return (
<div className="App">
<div>Вывод массива:
{d4.map(item => item + ' ')}
</div>
</div>
);
}4. Создание списка (элементов) на основе массива
В синтаксисе JSX упрощено создание элементов. Давайте дополним предыдущий пример и создадим список.
function App() {
// создание списка
const d4 = [11,22,33];
return (
<div className="App">
<div>Вывод массива списком:
{d4.map(item => <li key={item}>{item}</li>)}
</div>
</div>
);
}Обратите внимание, в качестве атрибута в теге li добавлен key. Если его убрать то в консоли будет ошибка. Ключи должны быть уникальны в рамках элемента. Т.е. если у вас есть повторяющиеся элементы — например элементы списка, React требует чтобы таким элементам присваивался атрибут key уникальный в рамках элемента. Ключи могут повторяться в разных элемента.
Ключ это строка. Можно применять id элементов, или генерированные случайные строки.
5. Вывести сумму элементов массива
Давайте рассмотрим пример применения метода массива для расчета внутри JSX.
function App() {
// сумма массива
const d4 = [11,22,33];
return (
<div className="App">
<div>Сумма элементов массива:
{d4.reduce((accum, item) => accum + item)}
</div>
</div>
);
}Обратите внимание, так можно применять методы которые возвращают результат. Например, forEach, который просто применяет функцию применить не получится.
6. Присвоить стили inline
Давайте создадим переменную и привоем ей строку — цвет. Попробуем присвоить inline стиль элементу. Присвоение стилей также можно сделать через {}.
function App() {
// Присвоить inline стиль
const redColor = 'red';
return (
<div className="App">
<p style={{color: redColor}}>Применяем inline стиль</p>
</div>
);
}Таким образом можно присвоить одно свойство, но если свойств много? Двигаемся дальше.
7. Присвоить объект со стилями
Если у вас CSS свойства для элемента DOM заданы в виде объекта – то примените следующий способ добавления стилей.
function App() {
// Присвоить объект как стиль
const objectStyles = {
'fontWeight' : 'bold',
'color' : 'orange',
'textTransform' : 'uppercase'
}
return (
<div className="App">
<p style={objectStyles}>Применяем объект как инлайн стили</p>
</div>
);
}Обратите внимание на правила записи стилей. Не font-weight, а fontWeight, не text-transform а textTransform. Не забывайте писать CSS свойства в корректном стиле.
8. Присвоить класс CSS из переменной
Представим, что имя класса лежит в переменной. Задача, присвоить данный класс в JSX. Реализуем так:
function App() {
// Вывод класса CSS
const bold = 'text-bold';
return (
<div className="App">
<p className = {`some-class ${bold}`}>Вывод класса CSS из переменной</p>
</div>
);
}В таком стиле класс text-bold будет присвоить к элементу p.
9. Условный рендеринг с помощью класса
Допустим у нас есть два класса (CSS класса). Допустим класс hide, который содержит свойство display: none, и класс show, который содержит свойства display: block.
Представим, что мы хотим в зависимости от условий — присваивать или тот или иной класс, тем самым скрывая или показывая блок. Реализуем:
function App() {
// Условный рендеринг
const d5 = 5;
return (
<div className="App">
<div className={d5 < 10 ? "hide" : "show"}>Hide - show element</div>
</div>
);
}Как видно, если переменная d5 меньше 10 то div будет скрыт. Если больше — отображен. Не забывайте прописать CSS свойства для этих классов в CSS.
Если мы коснулись условий, давайте сделаем вывод просто текста в зависимости от условия:
function App() {
// Условный рендеринг
const d5 = 5;
return (
<div>Условный рендеринг:
<p>{d5 < 10 ? "Hello" : "Goodbye"}</p>
</div>
);
}Т.е. мы научились в зависимости от условий создавать внешний вид компонента.
10. Создаем элемент в JSX
В самом начале юнита было сказано, что JSX позволяет быстро создавать элементы. Пробуем:
function App() {
// Создаем элемент
const head1 = <h1>Its h1</h1>;
return (
<div>Create Element {head1}</div>
);
}Давайте попробуем создать более сложный, с точки зрения верстки элемент. Например, список.
function App() {
// Создание элемента
const list = (
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
</ul>
);
return (
<div>Создание блокового элемента
{list}
</div>
);
}11. Выполнение функции в JSX
Выполним функцию внутри JSX кода:
function App() {
// Вызов функции
function test1(){
let c = 9;
return c*7;
}
return (
<div>Вызов функции: {test1()}</div>
);
}Аналогично можно создать стрелочную функцию и выполнить. Пробуем.
function App() {
// Вызов функции
const test2 = () => {
let c = 10;
return 5 * c;
}
return (
<div>Вызов функции стрелочной: {test2()}</div>
);
}12. Создание таблиц в JSX
Когда вы создаете таблицу в JSX, следует учесть необходимость прописывать теги thead, tbody и т.д.
function App() {
const t = (
<table>
<tbody>
<tr>
<th>Head1</th>
<th>Head2</th>
</tr>
<tr>
<td>One</td>
<td>Two</td>
</tr>
</tbody>
</table>
);
return (
<div>Таблица:
{t}
</div>
);
}Итог
JSX позволяет упростить работу с версткой, созданием и выводом элементом на страницу, отходя от привычных по JS выводам типа append, innerHTML...
Last updated