JSX - це розширення синтаксису для JavaScript. Ми рекомендуємо використовувати його в React,
щоб описати, як повинен виглядати інтерфейс користувача.
Для початку роботи видалимо непотрібний код із файлу App.js
У прикладі вверху ми оголошуємо змінну name, а потім використовуємо її в JSX, обертаючи її у фігурні дужки
У наведеному нижче прикладі ми вставляємо результат виклику функції JavaScript, formatName(user) в елемент h1.
Оскільки JSX схожий більше на JavaScript, ніж на HTML,
React DOM використовує правило іменування властивостей camelCase замість імен атрибутів HTML.
Наприклад, class в JSX стає className, tabindex - tabIndex.
Якщо тег порожній, ви можете одразу закрити його за допомогою />, як XML
Теги JSX можуть мати дочірні елементи
Ці два приклади ідентичні між собою:
Припустимо, що у вашому HTML файлі існує:
Ми називаємо його “кореневим” DOM вузлом, тому що все всередині нього буде керуватись за допомогою React DOM.
Для рендерингу React-елемента спочатку передайте DOM-елемент в ReactDOM.createRoot()
Далі передайте з React-елементом в root.render():
Поки що, ми знаємо лише один спосіб оновити інтерфейс - це створити новий елемент і передати його в root.render().
У цьому прикладі root.render() викликається кожну секунду за допомогою колбека setInterval().
