Синтаксис 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...