Пишем игру на ReactJs с использованием webpack + react-hot-loader

После прослушивания 11-го выпуска подкаста RadioJS и прочтения статьи на хабре про webpack (система управления зависимости для JavaScript) решил попробовать написать что-нибудь простое и записать небольшое видео-скринкаст.

На тему связки webpack с моим любимым ReactJS есть отличный модуль react-hot-loader и статья по нему: Integrating JSX live reload into your React workflow — рекомендую к прочтению, там также есть видео!

В репозитории react-hot-loader можно найти набор шаблонных проектов, так называемых Starter Kits. Взяв один из них за основу и, добавив к нему загрузчик css файлов, у меня получился свой шаблон проекта: https://github.com/pqr/react-hot-boilerplate.

Итого, работа выглядит следующим образом:

  1. клонирую свой boileplate шаблон проекта
  2. запускаю npm install для уставноки всех зависимостей (сам webpack, react, react-hot-loader, style-loader, css-loader)
  3. запускаю webpack-dev-server к которому подключён модуль react-hot-loader (командой npm start)
  4. открываю в браузере локальный адрес запущенного webpack-dev-server и вижу исходное Hello World приложение
  5. любые изменения в app.js (в коде React компонент) автоматически появляются и в браузере. Например, меняю что-то в методе render и сразу вижу это в браузере! Также webpack умеет без перезагрузки страницы обновлять стили при редактировании css файла.

Что не получилось: метод getInitialState() в React компонентах вызывается только один раз при инициализации, поэтому дальнейшие правки в коде никак не отображаются в браузере, нужна ручная перезагрузка страницы.

Видео рекомендую смотреть в Full HD с субтитрами:

Реклама

Пишем игру на ReactJs с использованием webpack + react-hot-loader: Один комментарий

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

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s