/react-flux-cart

A shopping cart component built with React, Flux and Webpack.

Primary LanguageJavaScript

react-flux-cart

Overview

Original branch was coded for the tutorial by @kenwheeler: Create a Shopping Cart Using React.js and Flux.

This forked branch has additional features below:

  • Up-to-date React v0.14 migrated, including seperated ReactDOM package and tons of new features as well as deprecations. If you are still using v0.12 as the original project, please check out the upgrade guides of v0.13 and v0.14.
  • All JavaScript bundled with Webpack.
  • Babel instead of JSX transformer introduced.
  • Underscore.js discarded. It was total overkill for just object merging. Instead, react/lib/Object.assign is used.
  • http-server for powering the server.

Updated:

  • http-server deprecated, webpack-dev-server introduced instead.
  • react-hot-loader introduced as a livereload watcher.
  • bundle.js compressed with uglify-loader, size shrunk considerably.
  • Preprocessing styles in Sass. Related packages are added to compile Sass into bundle.js.

Install

  1. Make sure you have npm and maybe webpack installed globally.
  2. Download zip or git clone git@github.com:jasonlam0619/react-flux-cart.git onto your computer.
  3. cd react-flux-cart
  4. npm install
  5. npm start to build the bundle with Webpack, and power the server.
  6. Visit localhost: 8080 and begin shopping.

Outlook

There will be plenty adjustments in the future. Below are those in the picture:

  • ES2015 (ECMAScript 6) migration.
  • Preprocess styles with Sass. Done.
  • Gulp for translating Sass and minifying images. Canceled.
  • Webpack Dev Server instead of http-server. Done.
  • Livereload. Done.