> For the complete documentation index, see [llms.txt](https://max-frontend.gitbook.io/react-course-ru/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://max-frontend.gitbook.io/react-course-ru/podklyuchaem_react.md).
# Подключаем 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
React [RU] Tutorial
Привет, я #root
```
*js/app.js*
```javascript
console.log(React);
console.log(ReactDOM);
```
Посмотрим в браузер: 
Отлично. Предлагаю вывести что-нибудь с помощью react.
Изменим app.js:
*js/app.js*
```javascript
ReactDOM.render(
React.createElement('h1', null, 'Привет, Мир!'),
document.getElementById('root')
);
```
Вау! Мы только что добавили заголовок (``) с помощью 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(
Hello, world!
,
document.getElementById('root')
);
```
Поскольку React - javascript библиотека, а мы пишем JSX синтаксис внутри обычного .js файла, нам необходимо как-то научить браузер превращать
`Hello, world!
`
в
`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
React [RU] Tutorial
```
**Итого**: мы можем писать привычную нам HTML разметку внутри "реакт-кода".
Важно понимать - никакой магии нет. Babel превращает HTML\* разметку в Javascript код.
*\*Правильнее это называть JSX разметкой, вы скоро увидите небольшие отличия.*
[Исходный код](https://github.com/maxfarseer/react-ru-tutorial/tree/add_react) на данный момент.