# Подключаем 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) на данный момент.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://max-frontend.gitbook.io/react-course-ru/podklyuchaem_react.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.