JSX синтаксис - полное руководство

1. Создание и вывод константы

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>
    );
}

Можно также выполнять выражения:

{d2 + ' World'}

{d2 * 9}

3. Вывод массива

const d4 = [11,22,33];
{d4.map(item => item + ' ')}

4. Создание списка (элементов) на основе массива

{d4.map(item => <li key={item}>{item}</li>)}

5. Вывести сумму элементов массива

{d4.reduce((accum, item) => accum + item)}

6. Присвоить стили inline

<p style={{color: redColor}}>Применяем inline стиль</p>

7. Присвоить объект со стилями

const objectStyles = {
  fontWeight: 'bold',
  color: 'orange',
  textTransform: 'uppercase'
};
<p style={objectStyles}>Применяем объект как инлайн стили</p>

8. Присвоить класс CSS из переменной

const bold = 'text-bold';
<p className={`some-class ${bold}`}>Вывод класса CSS из переменной</p>

9. Условный рендеринг с помощью класса

className={d5 < 10 ? "hide" : "show"}

{d5 < 10 ? "Hello" : "Goodbye"}

10. Создаем элемент в JSX

const head1 = <h1>Its h1</h1>;
const list = (
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Cherries</li>
  </ul>
);

11. Выполнение функции в JSX

function test1() {
    let c = 9;
    return c * 7;
}

const test2 = () => {
    let c = 10;
    return 5 * c;
}

12. Создание таблиц в JSX

const t = (
    <table>
        <tbody>
            <tr>
                <th>Head1</th>
                <th>Head2</th>
            </tr>
            <tr>
                <td>One</td>
                <td>Two</td>
            </tr>
        </tbody>
    </table>
);

Итог

JSX позволяет упростить работу с версткой, созданием и выводом элементов на страницу, отходя от привычных по JavaScript способов типа append, innerHTML и других.