Плейлист со всеми уроками: https://www.youtube.com/playlist?list=PLvWwA9iDlhHBQ6razvwomGcUIfQm4fk6D
GitHub-репозиторий с готовыми приложениями: http://bit.ly/gh_course_react_beginner
Текст урока
Итак, перед началом работы давайте поднимем так называемый локальный веб-сервер. В данном курсе это не обязательно, но лучше знать как это делается в простейшем случае, чтобы запускать более сложные примеры.
Создадим на рабочем столе папку проекта и откроем в нем нашу консоль. Так как мы установили Node.JS, то в консоли теперь можно выполнить команду npm init.
После ответа на ряд вопросов, она создаст файл package.json вот такого содержания. Можно было бы сделать это вручную, потому что кроме секции scripts нам ничего из этого не нужно. Можно удалить если хочется — я оставлю.
Основное предназначение утилиты npm — подтягивать в наш проект пакеты — по умолчанию в папку node_modules. Модули можно подтягивать из разных мест, но по умолчанию, вся их база находится на сайте npmjs.org — вместе с документацией к ним.
Первым модулем, который мы поставим будет Express. Это тот самый локальный веб-сервер. Кто не знал, веб-сервер это такая программа, которая умеет принимать входящие HTTP-запросы и отдавать по ним какие-то данные — HTML-страницы, картинки, шрифты, а также выдавать результаты работы, скажем, интерпретатора PHP и так далее.
Но у нас очень простой случай и мы будем отдавать только статические файлы — HTML, JS, картинки…
Итак, чтобы поставить express, вводим npm i (короткое сокращение для install) express@4 (через символ собаки можно подтянуть любую желаемую версию, если конечно она существует в репозитории npmjs, если версию не указать, то подтянется самая свежая) —save-dev. Последний флаг делает следующее — записывает информацию о названии модуля и его версии в package.json в секцию devDependencies.
Что это дает? А то, что я могу удалить папку node_modules и в любой момент запустить команду npm i и не указывая конкретную зависимость для установки подтянуть их список, указанный в package.json.
Вот смотрите — удалил все файлы в node_modules и теперь просто npm i — все на месте.
Кстати, видно, что модулей тут гораздо больше чем один наш установленный. Тут все дело в том, что Express зависит от других модулей и они подтягиваются как его зависимости, а у тех есть свои зависимости. Ну, в общем нам эта автоматизация здорово упрощает жизнь.
Это как если бы вы придумывали свой кулинарный шедевр и записывали бы все нужные ингридиенты и их дозировки на бумагу — получился бы рецепт, который могли бы использовать другие. Думаю, аналогия ясна.
Мы собираем проект, а потом любой может все использованные нами модули подтянуть себе на компьютер и быстро продолжить работу. Дело в том, что установленные модули занимают порой по 100 мегабайт и не очень хочется добавлять их в Git-репозиторий и передавать по сети вместе с проектом.
Едем дальше. Создадим в корне проекта файл server.js и это будет скрипт для ноды, описывающий как будет работать наш простейший веб-сервер.
Для начала подключим сам express.
var express = require('express');Такой строчкой мы заставляем ноду поискать модуль express в папке по умолчанию node_modules, о которой она знает. После этого в переменной express окзывается функция, создающая веб-сервер со всем его функционалом — а нам нужны как раз его методы.
Можно даже посмотреть откуда все это приходит — вот этот return возвращает функцию, которая и выполняется здесь.
Если вы хотите глубоко понимать код, то необходимо глубоко понимать нативный JS, самые его корневые структуры. Это путь к успеху, хоть и тернистый. Нооо.. Просто продолжайте)) Я всегда это говорю всем, кто приходит ко мне обучаться.
Отлично. Теперь мы указываем, что чтобы отдавать статические файлы, необходимо смотреть в папку public, которую мы создадим. Если хочется, её можно назвать и как-то по-другому.
app.use(express.static('public'));Как только наш веб-сервер запущен, он будет висеть на локальном компьютере на порту 3333 — первый аргумент (можно поставить другой, если хочется или если есть конфликты), и выполнит при успешном выполнении консоль лог, выведя на экран сообщение о том, что он ожидает запросов.
app.listen(3333, function() {
console.log('Listening on 3333..');
});Концепция портов может быть не очень понятна для новичка. Но тут все просто. Это такая внутренняя маршрутизация внутри операционной системы. Если компьютеры и интернет-устройства разделяются по IP-адресам, то внутри компьютера для целей нахождения адресата служат порты. Адресатами являются процессы запущенные в ОС. И по умолчанию запрос пришедший на 80й или 443 порт обслуживает веб-сервер. На порт 21 — почтовый сервер и так далее.
Всего таких портов может быть 65535. И на каждом может быть запущен процесс, слушающий этот порт. Если на него приходит запрос, он его обрабатывает.
Выше я написал, что порт можно поменять, если он конфликтует. То есть если тот порт, на который мы вешаем наш сервер уже занят другим процессом, то будет ошибка, тогда ставим любое другое число в диапазоне от 1024 до 65535.
Порт по умолчанию в адресной строке всегда 80 — стандарт для протокола HTTP. Это значит, что любой сайт, который вы запрашиваете так: http://makeweb.me или google.ru или ya.ru на самом деле имеет этот порт и может быть записан так: makeweb.me:80 или google.ru:80 или ya.ru:80. Правда есть небольшая поправочка — если протокол не http, а https — защищенный, то порт по умолчанию будет 443.
Думаю с этим стало ясно. Теперь запускаем наш скрипт сервера в ноде:
node server.jsи видим, что все запустилось и ждет наших запросов. Теперь в брузере введем http://localhost:3333/ и увидим:
Cannot GET /
Конечно, ведь нет index.html файла, который можно было бы отдать по умолчанию. Если мы его создадим (самый простой), то вуаля — все работает! Корнем нашего сайта сейчас является папка public, как мы и указали.
Для контроля мы можем вставить вот такую конструкцию:
app.use(function log (req, res, next) {
console.log([req.method, req.url].join(' '));
next();
});Тогда при запросах мы будем видеть что конкретно запрашивается и каким способом. Это удобно при отладке.
Скажу сразу, для чего можно использовать вот такой локальный веб-сервер. Он может отдавать данные нашему одностраничному приложению на React, делая вид, что он это большой бэкэнд с базой данных. Но по факту, там есть какие-то захардкоженные, то есть забитые заранее значения и отдаются они в формате JSON с заранее оглашенной структурой. Это позволяет вести разработку на бэкэнде и фронтэнде раздельно, всего лишь договорившись о формате данных, об API.