Начни писать с React

Вы можете создать элемент напрямую, используя DOM API. Для этого вам нужно получить корневой элемент и установить внутренний HTML, вот и все. См. Пример ниже.

document.getElementById('root').innerHTML = `
  <div>
    Hello World!
  </div>
`;

Для этого вам нужно добавить React DOM Renderer. Внутри вы должны добавить два параметра. Один из них - это элемент React Create, а другой - корневой элемент HTML. Следуйте приведенному ниже коду.

ReactDOM.render(
  React.createElement(),
  document.getElementById(),
);

ReactDOM.render(
  React.createElement(
    'tagname',
    'style',
    'Insert, what do you want to see in the output!',
  ),
  document.getElementById(),
);

ReactDOM.render(
  React.createElement(
    'div',
    null,
    'Hello World!',
  ),
  document.getElementById('root'),
);

Здесь есть альтернативный метод. Вы можете напрямую вставить HTML вместо React.createElement. Посмотрим на пример ниже. Если вам интересно, вы можете увидеть результат в CodePan .

ReactDOM.render(
  <div>Hello World!</div>,
  document.getElementById('root'),
);

Давайте вложим элементы React!

Давайте вставим элемент вложенности в React Create Element. Внутри 1st Create Element вы можете вставить еще один для вложения. Не понимаете? Посмотрим…

ReactDOM.render(
  React.createElement(
    'div',
    null,
    'Hello World!',
    React.createElement(
      'pre',
      null,
      new Date().toLocaleTimeString(),
    ),
  ),
  document.getElementById('root'),
);

const time = () => {
  ReactDOM.render(
    React.createElement(
      'div',
      null,
      'Hello World!',
      React.createElement(
        'pre',
        null,
        new Date().toLocaleTimeString(),
      ),
    ),
    document.getElementById('root'),
  );
}
setInterval(time, 1000);

JSX

const element = <h1>Hello, world!</h1>;

Вы можете заметить, что HTML5 в некоторых случаях не требует закрывающего тега. (т.е. <img>, <br>, <hr> и т. д.) Но JSX должен иметь закрывающий тег. (например, <img />, <br />, <hr /> и т. д.) В противном случае вы можете столкнуться с некоторыми ошибками.