Подготовка

ОБНОВЛЕНИЕ 2018: в учебнике хорошая теория, но ему уже два года. Проверяйте версии пакетов. За выходом нового учебника можно следить в telegram канале или twitter

На канале так же проводятся бесплатные вебинары, публикуются переводы и авторские материалы, присоединяйтесь!

Подготовка

React.js это всего лишь библиотека. Не фреймворк.

Как и любая другая библиотека, реакт добавляется на страницу с помощью тэга script.

Так как в современном js "рулят" модули и различного рода преобразования/сжимания и так далее - react отлично дружит с webpack, babel и прочими. Для простоты курса, мы будем работать с реактом, как с обычной библиотекой, например, jQuery.

Кстати, библиотека jQuery для работы реакта не нужна. Но нужны некоторые вспомогательные библиотечки, которые поставляет сам реакт, либо его друзья в лице babel.

Еще раз поясню: цель данного курса - просто добавить реакт на страницу и "начать писать на нем". Пусть все будет в одном не сжатом файле, сейчас важно взять и сделать. Модульность, супер-умная перезагрузка страницы без F5 и т.д. - все потом.

Первым делом скачайте react.

Далее создайте структуру файлов и папок. Все нескопированные файлы, пока оставьте пустыми.

+-- 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

{
  "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, то вам необходимо скачать и установить его с официального сайта (https://nodejs.org/en/). Если вы используете Windows, для выполнения команд ниже рекомендую консоль - ConEmu.

Добавим express в наш проект.

npm install express --save-dev

При использовании флага --save-dev, пакет express добавится в список зависимостей нашего проекта. Вы можете посмотреть как изменился файл package.json, чтобы убедиться в этом.

server.js

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

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

Запустите наш сервер node server.js

Так же, сервер можно запускать с помощью команды npm start, это возможно, потому что у нас в файле package.json есть секция scripts, в которой указана команда start. Такой вариант использовать удобно, когда для запуска сервера, вам приходится писать гораздо больше, например:

node server.js -option1 -option2 CONST=qweqwe ...

Достаточно будет указать полную команду в файле-инструкции, и затем удобно использовать ее с помощью сокращенного варианта. Да, по сути это alias (сокращения) для вашего проекта.

Что ж, убедитесь, что у вас в браузере появилась строка "Привет, я #root", и если все хорошо, в следующем разделе мы подключим react и начнем его использовать.

Исходный код для данного раздела.

PreviousВступлениеNextПодключаем react

Last updated