Элемент React

Создание элемента React

React.createElement("h1", null, "Hello React")

• первый аргумент "h1" определяет создаваемый элемент
• второй аргумент null представляет свойства (атрибуты элемента HTML) создаваемого элемента
• третий аргумент "Hello React" является дочерним элементом элемента h1

Добавление свойств элементу React:
React.createElement("h1", {id:"The",'data-value':"end"}, "Hello React")

В результате выполнения кода React браузер создает элемент DOM:
<h1 id="The" data-value="end">Hello React</h1>

Добавление элемента React в DOM

Контейнер в который будет добавлен элемент React: <div id="root"></div>

let h1=React.createElement("h1", {id:"The",'data-value':"end"}, "Hello React") ReactDOM.render(h1, document.getElementById('root'))

• ReactDOM.render: метод добавляющий элемент React в DOM
• первый аргумент: переменная h1, передает элемент который нужно отобразить
• второй аргумент: имя элемета (контейнера) в котором будет отображен элемент переданный в первом аргументе

Результат выполнения кода:
<h1 id='The' data-value='end'>Hello React<h1/> Hello React