# Подключаем react

_ОБНОВЛЕНИЕ 2018: в учебнике хорошая теория, но ему уже два года. Проверяйте версии пакетов. За выходом нового учебника можно следить в_ [_telegram канале_](http://bit.ly/2tS7QUC) _или_ [_twitter_](http://bit.ly/2HADDLE)

_На_ [_канале_](http://bit.ly/2tS7QUC) _так же проводятся бесплатные вебинары, публикуются переводы и авторские материалы,_ [_присоединяйтесь_](http://bit.ly/2tS7QUC)_!_

## Подключаем react

Как уже было сказано, реакт - просто библиотека, которая так же просто подключается. Мы уже скачали _react_ и _react-dom_, давайте добавим их на страницу.

Так же, сразу подключим наш _app.js_, в котором будем писать код.

_index.html_

```markup
<!DOCTYPE html>
<html>
  <head>
    <title>React [RU] Tutorial</title>
  </head>
  <body>
    <div id="root">Привет, я #root</div>

    <script src="js/react/react.js"></script>
    <script src="js/react/react-dom.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>
```

_js/app.js_

```javascript
console.log(React);
console.log(ReactDOM);
```

Посмотрим в браузер: ![screenshot react, reactDOM](https://2032922960-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvLmy8nmqH3uUpCfPAD%2F-LvLmydxF5hwFbPJLrLG%2F-LvLn6Vi6Rb8P1vIH_06%2Fconsolelog_react_reactDOM.jpg?generation=1575561786730814\&alt=media)

Отлично. Предлагаю вывести что-нибудь с помощью react.

Изменим app.js:

_js/app.js_

```javascript
ReactDOM.render(
  React.createElement('h1', null, 'Привет, Мир!'),
  document.getElementById('root')
);
```

Вау! Мы только что добавили заголовок (`<h1></h1>`) с помощью react.

Мы использовали функцию `ReactDOM.render`, которая принимает первым аргументом - реакт-компонент, а вторым - элемент DOM дерева, куда мы хотим добавить react.

Вообще, зачем мы добавили react на нашу страницу? Наверное, потому что где-то слышали, что он быстрый. Почему же?

**React** при изменениях DOM-дерева, старается использовать минимально-возможные воздействия. React использует "**виртуальный DOM**" (удаляет/изменяет/добавляет элементы и т.д.) для того, чтобы в реальный DOM за "один присест" добавить все изменения. Как известно, операции с DOM-деревом самые дорогостоящие. Поэтому "интеллектуальный" подход реакта к ним - та самая "киллер-фича".

Данное объяснение считаю очень "общим", но, чтобы не потеряться в теории, этого сейчас вполне достаточно.

Вернемся к нашему коду в файле _app.js_

С таким синтаксисом, я про `React.createElement('h1', null, 'Привет, Мир!'),`, реакт явно не завоевал бы мир, поэтому команда разработчиков решила писать разметку в javascript-коде и назвала такой синтаксис `JSX`.

У такой техники есть ярые противники, но, мне кажется, пользы от использования реакта гораздо больше, чем от "правильного" разделения на _разметку_ и _скрипты_.

Исправим наш код. _js/app.js_

```javascript
ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);
```

Поскольку React - javascript библиотека, а мы пишем JSX синтаксис внутри обычного .js файла, нам необходимо как-то научить браузер превращать

`<h1>Hello, world!</h1>`

в

`React.createElement('h1', null, 'Привет, Мир!')`.

С этим отлично справляется **babel**. Так как у нас нет никакого "сборщика" кода, нам необходимо добавить еще один [скрипт](https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js) на страницу. Скачайте его, либо подключите через CDN. Я скачаю и положу его в папку js/react.

Так же, для нашего скрипта нужно указать атрибут `type='text/babel'`

_index.html_

```markup
<!DOCTYPE html>
<html>
  <head>
    <title>React [RU] Tutorial</title>
  </head>
  <body>
    <div id="root"></div>

    <script src="js/react/react.js"></script>
    <script src="js/react/react-dom.js"></script>
    <script src="js/react/browser.min.js"></script>
    <script type="text/babel" src="js/app.js"></script>
  </body>
</html>
```

**Итого**: мы можем писать привычную нам HTML разметку внутри "реакт-кода".

Важно понимать - никакой магии нет. Babel превращает HTML\* разметку в Javascript код.

_\*Правильнее это называть JSX разметкой, вы скоро увидите небольшие отличия._

[Исходный код](https://github.com/maxfarseer/react-ru-tutorial/tree/add_react) на данный момент.
