> 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/chapter1.md).
# Подготовка
*ОБНОВЛЕНИЕ 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) для данного раздела.