Средний
3 урока
Курс
Экосистема React.js
Данный видеокурс научит вас строить react-приложения с нуля с использованием последних технологий в экосистеме React.js

#2 — Webpack-dev-server & React core

Приветствуем вас на втором уроке по React.js. На этом видеоуроке мы настроим для react webpack-dev-server, заставим обновляться приложение в режиме реального времени с помощью модуля hot-module-replacement и поговорим про особенности React.

Немного об установке webpack для react и о самом webpack-dev-server

Установим webpack-dev-server. Настраиваемых опций у него довольно много, но нам понадобятся не все. Прочитать о них вы можете на официальном сайте. Ссылка будет дана чуть ниже. webpack-dev-server можно использовать в двух вариантах: cli (именно так он будет использоваться на нашем видеоуроке) и в среде Node.js. В случае разных сред, разных сборок и config, вы можете запускать в react webpack-dev-server из скрипта.

Чтобы установить фреймворк react webpack-dev-server, необходимо прописать в консоли:
npm install webpack-dev-server –save-dev.
Открываем файл package.json и добавляем в секцию scripts: “webpack-dev-server –conten-base ./public –inline —hot”. Это и позволит нам обновлять страницу в режиме реального времени. Немного разберемся в записи:

inline – инструкция webpack-dev-server, которая перезагружает страницу в случае, если получена модификация какого-либо файла.

hot – это модуль hot-module-replacement. Модуль позволяет спрашивать сервер об изменениях в каких-либо файлах, может обновить дерево модулей и управлять тем, как модули обновляются без перезагрузки страницы.

В случае большой формы с кучей состояний нам понадобится установить еще плагин react hot loader . Теперь hot-module-replacement будет понимать, какие модули надо обновить, а какие нет, без полной перезагрузки страницы. На видеоуроке будет подробно показан пример работы всех перечисленных инструментов.

Официальная документация по webpack-dev-server

Немного истории React

Фреймворк React был создан в 2011 году Джоном Уолком, в тот момент работником Facebook. Рассмотрим идеи, заложенные в React и имеющие очень большое практическое значение:

  • 1) Получение данных в одном месте или One date flow direction – данные могут течь только сверху вниз, то есть от родителя к потомку, причем потомок не может никак изменять эти данные. Из этой идеи следует:
    • а) данные меняются только в одном месте – «единый источник правды». Из-за этого разрабатываемое приложение получается более стабильным и предсказуемым. Мы можем всегда сказать, почему у нас неверные данные и откуда они взялись;
    • б) свойство props, которое отвечает за общение родителя с потомком. В видео будет показан пример работы этого свойства в онлайн-редакторе.
  • 2) Виртуальный дом – представление «реального дома» в виде js-объектов. Каждый раз, когда мы что-то меняем в доме, React понимает, что что-то обновилось и обновляет «реальный дом». Данная процедура называется reconciliation. Ее алгоритм довольно сложен и состоит из нескольких этапов.
  • 3) JSX – расширение синтаксиса для JavaScript. Оно очень удобно с точки зрения локаций и шаблонов – все находится в одном файле: и js, и html. Стоит отметить, что React пропагандирует следующую концепцию: приложение должно состоять из маленьких кусочков, и все они должны быть использованы. Если у вас в одном файле довольно много кода, вам стоит задуматься над его архитектурой.

Далее автор расскажет вам о дальнейших планах на следующие уроки, в которых вас ожидает много интересненького и «вкусненького».

Приятного всем просмотра! Учитесь с удовольствием! Всегда ваш LoftBlog!

Материалы к уроку:
Делись:

Оставь комментарий!

Добавить комментарий

Рекомендуемые курсы