Плейлист со всеми уроками: https://www.youtube.com/playlist?list=PLvWwA9iDlhHBQ6razvwomGcUIfQm4fk6D
GitHub-репозиторий с готовыми приложениями: http://bit.ly/gh_course_react_beginner
Текст урока
На сегодняшний день все больше и больше вакансий содержат в себе упоминание о том, что знание React является необходимым критерием для того, чтобы вас приняли на работу.
Кроме Реакта существуют и другие популярные фреймворки. Например, Angular, один из первых в этом списке.
Попробуем разобраться что это вообще такое и с чем его едят.
В чем суть проблемы? Она в том, что нам бы хотелось максимально быстро и безболезненно писать интерактивные веб-приложения, умеющие взаимодействовать с пользователем (реагировать изменением внешнего вида интерфейса на его действия) и веб-сервером (отправлять ему запросы с данными и получать от него ответы).
Для создания интерактивности у нас исконно служит JavaScript. Хотя CSS сейчас может очень многое, это не тот интерактив, о котором мы говорим, потому как через CSS нельзя изменять DOM-дерево. А вот JS как раз нам это позволяет делать. На нем можно написать код, который в браузере будет срабатывать на возникающие события (клик мыши, скролл, нажатие клавиши и т.д.).
Таких событий и реагирующего на них кода, правда, может быть великое множество и вряд ли бы нам хотелось иметь все линейным списком в одном файле. Поэтому возникают мысли о том, что при создании более-менее серьезного продукта, необходимо как-то все организовать в структуру, которую легко и удобно можно было бы изменять и дополнять новыми функциями.
Для этого можно, скажем, создать несколько JS-файлов (назовем их модулями) и подключить их в HTML-файл друг за другом. Они выполнятся в процессе обработки браузером и дадут нужный эффект.
Но есть проблема следующего плана. А что, если в нескольких модулях есть переменные с одним и тем же именем? Они будут друг друга затирать и тогда возникнут ошибки, которые достаточно сложно уловить.
Хорошо, тогда мы воспользуемся техникой оборачивания каждого модуля в анононимную самовызывающуюся функцию:
(function(){
// Наш код
})();Это позволит нам ограничить область видимости используемых в каждом модуле переменных. То есть один модуль это условно одна независимая коробка — пересечений с другими не будет. Если не лезть за её пределы.
С этой проблемой, похоже, справились. Но не хотелось бы подключать по 20-30 отдельных JS-файлов с модулями. Хочется получить единую сборку, содержащую все, что нам необходимо для страницы. Эту задачу нам помогают решить сборщики: Grunt, Gulp, WebPack. Последний, мы как раз будем настраивать и использовать в этом курсе.
Теперь внутри наших модулей, казалось бы, независимо можно работать с нужными нам элементами страницы, используя чистый JS, либо библиотеку jQuery. То есть, можно брать со страницы элементы (они же ноды) и вешать на событие, происходящее на них, выполнение какого-либо кода. Для формы это может быть событие её отправки, для поля ввода — нажатие клавиши, для активного блока — наведение на него курсора мыши. Одним словом, событий в браузере существует масса.
Вроде бы все еще более улучшилось и можно работать. Но если продолжить в таком же духе, то приходит понимание, что встречаются повторяющиеся компоненты, и нужно сделать так, чтобы они работали независимо друг от друга.
Например, карточки товаров со вкладками. И комментарии на каждой вкладке. А еще, компоненты хотелось бы делать достаточно небольшими и создавать между ними родительско-дочерние отношения. При текущем подходе нам прийдется все это делать вручную. Не очень быстро и ладно выходит.
А еще, необходимо работать с перерисовками. Пример — добавление нового комментария к товару. В реальности, конечно же, к интернет-магазину всегда подключен бэкэнд с базой данных.
После нажатия пользователем кнопки отправки, запрос с информацией о комментарии через механизм AJAX уходит на сервер на вполне конкретный, заранее подготовленный адрес, где его принимает бэкэнд-часть (в это время пользователю показывается какая-нибудь крутилка, сигнализирующая о статусе «В процессе»).
Набор таких адресов, кстати, которые ожидают что-то принять и что-то отдают в ответ, называются API (или апи, как многие произносят в русифицированном варианте).
Бэк проверяет пришедший запрос на корректность и на разрешение вообще его оставлять, далее он записывает в БД комментарий к соответствующему товару и отдает в ответе во-первых статус — успешно или нет, и если успешно, то сам текст комментария, имя автора и другую информацию, которую потом можно использовать для отрисовки его в списке.
Можно перезагрузить страницу полностью, но вы же понимаете, что это не то что нам нужно — такое можно было делать и ранее. Это медленно и нагружает сервер лишними запросами.
Если не использовать, скажем React или что-то подобное, то нужно будет городить такую сложную схему, что это, ну никак нельзя обозвать фразой «удобно в поддержке и расширяемо». Если вообще получится довести дело до конца.
Примеры подобных интерактивов вы можете нафантазировать и сами, понаблюдав, например, за социальной сетью ВКонтакте и множеством других веб-сервисов в интернете.
Есть две возможности использования React’а и ему подобных:
1) писать полноценное SPA (Single Page Application или по-русски одностраничное приложение) — хороший пример это веб-клиент GMail или сервис Zeplin для коллективной работы с макетами сайтов. Изначально подгружаются минимально необходимые ресурсы для отображения первой страницы. Остальное грузится уже по требованию, в зависимости от действий пользователя.
2) внедрять фреймворк частично, оживляя с его помощью только отдельные части веб-страницы. Это очень удобно для постепенного перевода насыщенных логикой частей на новые рельсы. Так, в свое время делали разработчики в Facebook.
Подведем итог всего вышесказанного — при создании сложного веб-приложения, если его необходимо сделать достаточно быстро и так, чтобы после можно было поддерживать (причем не только вам — кадры-то в проектах имеют свойство меняться), то стоит воспользоваться возможностями React и подобных ему инструментов.
Преимущества React
1) У React относительно низкий порог вхождения.
Повторив в коде самостоятельно пример из данного курса и глубоко вникнув в материал, можно понять большинство принципов, которые используются при написании веб-приложений на React. А на этот базис можно будет наращивать более продвинутый материал, почерпнутый из других источников. Вы ведь уже, скорее всего, будете представлять общую картину.
2) В React используется синтаксис JSX
Это своего рода смесь JavaScript и HTML. Разметку можно писать прямо в React-коде.
Представьте, в зависимости от условий, вы можете сформировать либо один HTML-код, либо другой. Либо надпись товар отсутствует, либо кнопку «Положить в корзину», как пример. Логика и разметка находятся в одном месте — и это очень удобно.
3) React легковесный и модульный
Пока это преимущество вряд ли вам будет понятно, но React это больше библиотека, нежели фреймворк. Это значит, что он меньше завязывает вас на своей архитектуре и больше пространства для организации приложения так, как вам нужно. С другой стороны, для реализации тех или иных доп.возможностей, нужно тянуть различные дополнительные же библиотеки. У Angular с этими двумя вещами все строго наоборот.
4) React имеет обширное сообщество разработчиков и развитую экосистему расширений на все случаи жизни.
Действительно, если много людей уже писало самые различные вещи на React и сталкивалось с трудностями, то они, скорее всего, уже были преодолены и на том же StackOverflow вы найдете необходимые ответы. А вот с поиском и выбором плагинов у новичка могут возникнуть проблемы, но они так же решаются чтением форумов, статей и просмотром видеороликов, коих на YouTube развелось солидно. Один из таких вы смотрите сейчас 😉
Автору этого курса было достаточно легко войти в разработку с JS-фреймворками, потому как он потратил массу времени на подробное изучение нативного, голого, чистого, ванильного (называйте как хотите) JS. И по моему опыту это самый правильный подход — от простого к сложному. Иначе вы рискуете действовать очень ограниченно и неосознанно. А это, в свою очередь, означает, что более-менее нестандартная задача или ошибка будут вам не по зубам.
Поэтому достаточно уверенное знание JavaScript это фактически минимум, необходимый для полного освоения материала этого курса. Кроме того, мы затронем структуры из стандарта ES6, поэтому все дело еще более усложняется. Про HTML/CSS я умалчиваю, потому что их знание подразумевается.
Необходимый инструментарий
Для работы с материалом этого курса, вам понадобится:
- редактор кода (я буду использовать Sublime Text 3);
- веб-браузер с инструментами разработчика;
- консоль (она же — терминал), если у вас Linux или MacOS, то дополнительных шагов предпринимать не нужно. На Windows же надо будет поставить дополнительное расширение.
- Node.JS, как основа, на которой работает сборщик Webpack, который мы используем в курсе.
В общем-то этого для работы будет достататочно.
Установка Sublime Text и его расширения для установки сторонних пакетов Package Control не должна составить труда — благо по этому вопросу материалов также достаточно. И для удобства стоит установить пакет для поддержки синтаксиса JSX.
Я буду использовать браузер Chrome с местными инструментами плюс расширение React, которое после установки добавит вот тут еще одну вкладочку. С этим мы разберемся позднее.
Установка Node также гениально проста. Нужно будет запустить инсталлятор, скачанный с официального сайта и у вас на компьютере установится NodeJS и его менеджер пакетов npm.
Проверим их наличие так:
node -v
npm -vНу и заметка для пользователей с ОС Windows. Для комфортной работы вам нужно будет установить либо утилиту Git с сайта git-scm.com и тогда вы сразу получаете то что нужно, либо можно поставить Cygwin — пакет, эмулирующий среду Linux-систем.