Пример простого использования 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/

Therefore, people set aside more day online.

my blog :: bolovi u koljenu s vanjske strane

Therefore, people set aside more day online.

My website - bolovi u koljenu s vanjske strane

Therefore, people take more some time online.

My page ... Ebay onko se sen arvoista apteekki foorumi ilman reseptiä ainesosat tehosteet mistä ostaa myymälä arvostelut tabletit kommentit amazon kokemukset

Therefore, people set aside more time online.

my website - en que farmacia venden titan gel

Therefore, people set aside more time online.

Feel free to surf to my blog :: en que farmacia venden titan gel

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