Несколько слов о React JSX

React — это декларативная, эффективная и гибкая библиотека JavaScript для создания пользовательских интерфейсов. Но вместо использования обычного JavaScript код React следует писать на чем-то, что называется JSX.

Почему JSX —

Он быстрее, потому что выполняет оптимизацию при компиляции кода в JavaScript.

Он также является типобезопасным, и большинство ошибок можно обнаружить во время компиляции.

Это упрощает и ускоряет написание шаблонов, если вы знакомы с HTML.

Использование JSX —

Мы можем использовать обычные конструкции JavaScript в JSX.

Мы начнем с создания приложения Hello World. Для этого заменяем то, что есть, на следующее в index.js:

импортировать React из react;
импортировать ReactDOM из react-dom;function App() {
return (
‹div›
‹h1›Hello World‹/h1›
‹/div›
);
}const rootElement = document.getElementById(root);
ReactDOM.render(‹App /›, rootElement);

В приведенном выше коде у нас есть компонент App, который является просто функцией. Он возвращает:

‹div›
‹h1›Hello World‹/h1›
‹/div›

который является нашим кодом JSX для отображения Hello World. h1 — это заголовок, а div — элемент div.

Приведенный выше код выглядит как HTML, но на самом деле это JSX.

Преимущества использования JSX —

Это упрощает создание HTML-элементов в javascript.
Это делает наш код намного читабельнее и проще.
Это избавляет вас от необходимости думать об именах переменных для каждого узла DOM, который вы создаете.
Более удобный для пользователя, каждый, вероятно, может понять и изменить код
JSX компилируется в то, что вы бы написали в любом случае.