Пример простого использования React JS и Webpack

В данной статье я хочу поделиться своим опытом использования reactjs совместно с webpack. Демо приложение состоит из 3 виджетов, написанных с использованием reactjs - виджет часов, калькулятор и виджет, показывающий курсы валют. При написании react компонент я использовал классы, которые стали доступны в ES6, полученный js код с помощью транспайлера babel преобразуется в код стандарта ES5, поддерживаемый всеми браузерами.

Демо приложение можно взять с github:

  1. git clone https://github.com/unbugx/react-demo

Для работы потребуется установленный node.js, если он уже установлен, то переходим в корневую папку приложения и установливаем необходимые для работы модули, для этого нужно выполнить команду:

  1. npm install

В файле package.json в свойстве scripts определено две команды:

  1. ...
  2. "scripts": {
  3. "dev": "BUILD_DEV=1 webpack-dev-server --inline --devtool eval --progress --colors --hot --port 9090",
  4. "deploy": "BUILD_DEV=0 webpack -p"
  5. },
  6. ...

с помощью команды

  1. npm run dev

запускается небольшой node.js сервер, который доступен по адресу, определенному в настройках package.json. В данном случае приложение будет доступно по адресу http://localhost:9090

Для того, чтобы произвести сборку приложения для production версии нужно использовать команду

  1. npm run deploy

В корневой папке приложения появится директория assets, которая будет содержать минифицированные файлы bundle.js и bundle.css, которые должны быть подключены в основном html коде. Код конфигурационного файла webpack.config.js я снабдил комментариями, из которых основные вещи должны быть понятны.

Демо-онлайн

Комментарии

Во время npm run dev ошибка в консоли.

ошибку дев выдаёт

Спасибо, исправил. После запуска нужно открыть в браузере http://localhost:9090/

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