САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ

React отображения HTML



React цели существуют во многом для отображения HTML веб страницы.

React отображает HTML код для веб страницы с помощью функции ReactDOM.render().


Функция Рендеринга

Функция ReactDOM.render() принимает два аргумента, HTML код и HTML элемент.

Назначение функции заключается в отображении указанного HTML кода внутри указанного HTML элемента.

Пример

Отобразить пункт внутри элемента "root":

ReactDOM.render(<p>Hello</p>, document.getElementById('root'));

Результат отображается в виде элемента <div id="root">:

<body>

  <div id="root"></div>

</body>

Выполнить пример »


HTML код

HTML код в этом учебнике использует JSX, который позволяет вам писать HTML теги внутри кода JavaScript:

Не волнуйтесь, если синтаксис незнаком, вы узнаете больше о JSX в следующей главе.

Пример

Создайте переменную, содержащую HTML код, и отобразите ее в корневом узле:

const myelement = (
  <table>
    <tr>
      <th>Name</th>
    </tr>
    <tr>
      <td>John</td>
    </tr>
    <tr>
      <td>Elsa</td>
    </tr>
  </table>
);

ReactDOM.render(myelement, document.getElementById('root'));

Выполнить пример »


Корневой узел

Корневой узел - это HTML элемент, в котором вы хотите отобразить результат.

Это похоже на контейнер для содержимого, управляемого React.

Это не обязательно должно быть элементом <div> и он не обязательно должен иметь id='root':

Пример

Корневой узел можно называть как угодно:

<body>

  <header id="sandy"></header>

</body>

Отображение результата в виде элемента <header id="sandy">:

ReactDOM.render(<p>Hallo</p>, document.getElementById('sandy'));

Выполнить пример »