Добавить React на сайт

Последнее обновление 28 июня 2019 12:59:53 (UTC / GMT +8 часов)

script1adsense2code

script1adsense3code

React был разработан с самого начала для постепенного принятия, и вы можете использовать столько React, сколько вам нужно. Возможно, вы только хотите добавить некоторые «брызги интерактивности» на существующую страницу. Реактивные компоненты - отличный способ сделать это.

Большинство веб-сайтов не являются и не должны быть одностраничными приложениями. С несколькими строками кода и без инструментов для сборки, вы можете попробовать React на небольшой части вашего сайта. Затем вы можете либо постепенно расширять его присутствие, либо содержать его в нескольких динамических виджетах.

В этом уроке мы покажем, как добавить компонент React на существующую HTML-страницу. Вы можете использовать свой собственный веб-сайт или создать пустой HTML-файл для практики.

Там не будет никаких сложных инструментов или требований к установке - чтобы завершить этот раздел, вам нужно только подключение к Интернету, и минута вашего времени.

Шаг 1. Добавьте контейнер DOM в HTML

Сначала откройте HTML-страницу, которую вы хотите редактировать. Добавьте пустой тег <div>, чтобы отметить место, где вы хотите что-то отобразить с помощью React. Например:

```
<!-- ... existing HTML ... -->
<div id="the_react_container"></div>
<!-- ... existing HTML ... -->
```

Мы дали этому <div> уникальный атрибут HTML id. Это позволит нам позже найти его из кода JavaScript и отобразить внутри него компонент React.

Примечание. Вы можете поместить этот контейнер <div> в любом месте внутри тега <body>, просто убедитесь, что у него есть уникальный идентификатор, и избегайте помещать в него какие-либо элементы, так как реагирование заменит любой существующий контент внутри контейнеров DOM.

Шаг 2. Добавьте теги скрипта

Затем добавьте три тега <script> на страницу HTML прямо перед закрывающим тегом </ body>:

<!-- ... other HTML ... -->
<!-- Load React. -->
<script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>  <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
<!?then load our React component. -->
<script src="my_component.js"></script>
</body>

Первые два тега загружают React. Третий загрузит ваш код компонента.

Шаг 3: Создайте компонент React

Создайте файл my_component.js рядом с вашей HTML-страницей и вставьте приведенный ниже фрагмент кода в только что созданный вами файл js.

```
'use strict';
const e = React.createElement;
class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }
  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }
    return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      'Like'
    );
  }
}
const domContainer = document.querySelector('#the_react_container);
ReactDOM.render(e(LikeButton), domContainer);
```

В приведенном выше фрагменте кода две последние строки кода находят <div> с идентификатором «the_react_container», который мы создали изначально, и затем отображают наш компонент «React» React внутри него.

Вот и все!

Нет четвертого шага. Вы только что добавили первый компонент React на свой сайт.

В следующих разделах вы найдете дополнительные советы по интеграции React.