React training

Demo

Application

We will build the application shown as shown above.

The mock is located here.

Algorithms discounts:

• When a main dish, a drink and a dessert are present in the shopping cart, they should be grouped and conform a menu. If there are multiple choices to create the menu, it has to be created with the cheaper products. Menus have 20% discount.
  • Products measured by units should conform different menus. If the product is measured by weight, it should stay within the same menu.
• From the remaining products, a 3x2 discount can be applied for products measured by units.
• The remaining products doesn't have any discount.
• The priority when applying discounts is: menu > 3x2. Discounts cannot be stacked.

Development setup

• Mac or Linux
• node v.7.4.0 or higher
• npm v.4.0.5 or higher
• Some text editor/IDE (If you don't know which one to pick, I recommend you Atom)
• Google Chrome
• React Developer Tools for Chrome
• Redux DevTools for Chrome

Besides these requirements, I also recommend the following (optional):

• Babel ES6 syntax syntax highlighting:
  • Atom: https://atom.io/packages/language-babel.
  • Sublime-text: https://github.com/babel/babel-sublime
• Eslint integration on your editor:
  • Atom: https://atom.io/packages/linter-eslint
  • Sublime-text: https://github.com/roadhump/SublimeLinter-eslint

What we will cover on this workshop:

• Javascript ES6
• React.js
• Webpack
• Babel
• ESLint
• Mocha
• Enzyme
• redux
• redux-saga
• ...

Workshop script

TODO