====== Как работает jsx ======

Код до преобразования в структуру jsx

<sxh js; first-line: 1; highlight: [106,107]>
import React from 'react';//Импорт библиотеки рект обязательно
import logo from './logo.svg';
import './App.css';//стили

function App() {
  /* 
   *   Любой новы элемент формирует метод из объекта React, React.createElement
   *   Первый параметр название создоваемого элемента  (h1),
   *   Второй параметр опции , к примеру передаем class="name",
   *   Третий параметр дочерние элементы, они создаются по аналогии с радителем, если их несколько пишем через запятую
  */
  return React.createElement('div', {className: 'App'},
      React.createElement('h1', null,'hello world'),
      React.createElement('p',null ,'React')
  );
}

export default App;
</sxh>

Как выглядит код после преоброзования:
<sxh js; first-line: 1>
import React from 'react';//Импорт библиотеки рект обязательно
import logo from './logo.svg';
import './App.css';//стили

function App() {

  return (
    <div className="App">
        <h1>hello world!!</h1>
        <p>React</p>
    </div>
  );
}

export default App;

</sxh>

В итоге на выходе получаем сформированный html:
<sxh html; first-line: 1>
    <div id="root">
        <div class="App">
            <h1>hello world</h1>
            <p>React</p>
        </div>
    </div>
</sxh>