# Подготовка
*ОБНОВЛЕНИЕ 2018: в учебнике хорошая теория, но ему уже два года. Проверяйте версии пакетов. За выходом нового учебника можно следить в* [*telegram канале*](http://bit.ly/2tS7QUC) *или* [*twitter*](http://bit.ly/2HADDLE)
*На* [*канале*](http://bit.ly/2tS7QUC) *так же проводятся бесплатные вебинары, публикуются переводы и авторские материалы,* [*присоединяйтесь*](http://bit.ly/2tS7QUC)*!*
## Подготовка
React.js это всего лишь библиотека. Не фреймворк.
Как и любая другая библиотека, реакт добавляется на страницу с помощью тэга `script`.
Так как в современном js "рулят" модули и различного рода преобразования/сжимания и так далее - *react* отлично дружит с *webpack*, *babel* и прочими. Для простоты курса, мы будем работать с реактом, как с обычной библиотекой, например, jQuery.
Кстати, библиотека jQuery для работы реакта не нужна. Но нужны некоторые вспомогательные библиотечки, которые поставляет сам реакт, либо его друзья в лице babel.
Еще раз поясню: *цель данного курса - просто добавить реакт на страницу и "начать писать на нем". Пусть все будет в одном не сжатом файле, сейчас важно взять и сделать. Модульность, супер-умная перезагрузка страницы без F5 и т.д. - все потом.*
Первым делом [скачайте react](https://facebook.github.io/react/downloads/react-0.14.7.zip).
Далее создайте структуру файлов и папок. Все нескопированные файлы, пока оставьте пустыми.
```
+-- js
| +-- react
| +-- react-dom.js (скопируйте из архива из папки build)
| +-- react.js (скопируйте из архива из папки build)
| +-- app.js
+-- index.html
+-- package.json
+-- server.js
```
### Локальный сервер
Вы можете работать с *localhost* как вам привычно. Либо взять решение, которое рассматривается ниже:
Необходимо создать локальный сервер - `server.js`, чтобы работала вкладка в консоли - *React Developer Tools*, которая поможет нам отлаживать наше React-приложение.
Прежде чем мы это сделаем, создайте файл `package.json`, который является инструкцией/описанием для нашего проекта.
*package.json*
```javascript
{
"name": "react-ru-tutorial",
"version": "1.0.0",
"description": "React RU tutorial",
"main": "index.html",
"scripts": {
"start": "node server.js"
},
"author": "Maxim Patsianskiy",
"license": "MIT"
}
```
Не забудьте поменять автора ;)
### Локальный сервер
Создадим с помощью Node.js\* и express локальный сервер.
\* если у вас не установлен Node.js, то вам необходимо скачать и установить его с официального сайта (). Если вы используете Windows, для выполнения команд ниже рекомендую консоль - [ConEmu](http://conemu.github.io/).
Добавим express в наш проект.
```
npm install express --save-dev
```
При использовании флага `--save-dev`, пакет *express* добавится в список зависимостей нашего проекта. Вы можете посмотреть как изменился файл `package.json`, чтобы убедиться в этом.
*server.js*
```javascript
var express = require('express');
var app = express();
app.set('port', (process.env.PORT || 3000));
app.use('/', express.static(__dirname));
app.listen(app.get('port'), function() {
console.log('Server started: http://localhost:' + app.get('port') + '/');
});
```
Заполните файл index.html
*index.html*
```markup
React [RU] Tutorial
Привет, я #root
```
Запустите наш сервер `node server.js`
Так же, сервер можно запускать с помощью команды `npm start`, это возможно, потому что у нас в файле `package.json` есть секция *scripts*, в которой указана команда *start*. Такой вариант использовать удобно, когда для запуска сервера, вам приходится писать гораздо больше, например:
`node server.js -option1 -option2 CONST=qweqwe ...`
Достаточно будет указать полную команду в файле-инструкции, и затем удобно использовать ее с помощью сокращенного варианта. Да, по сути это *alias* (сокращения) для вашего проекта.
Что ж, убедитесь, что у вас в браузере появилась строка "Привет, я #root", и если все хорошо, в следующем разделе мы подключим react и начнем его использовать.
[Исходный код](https://github.com/maxfarseer/react-ru-tutorial/tree/prepare) для данного раздела.
---
# 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/chapter1.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.