Create a Simple Shopping Cart application with React.js

[shakalee14]

Description

Based off of this tutorial: https://scotch.io/tutorials/creating-a-simple-shopping-cart-with-react-js-and-flux

Want to learn how to create a basic shopping cart application? Want to learn how to use react.js? Then this goal is for you!

Context

This goal is important because react is cool to learn. But don't just listen to me, read these quotes from the following leaders in the industry:

Quotes about React.js

"React is a JavaScript library for building user interfaces, created and open-sourced by Facebook. It was first released in 2013, and its original slogan was, “Rethinking best practices.” Why? Because the most well-known JavaScript frameworks (i.e., Ember.js and AngularJS) at the time based their architecture on the MVC pattern, which largely focuses on separating the application logic from the view.

But the team behind React thought they had a better idea. Instead of completely separating the application logic from the view, it coupled the logic and view into one file using something called the component-based architecture, which allowed the composition of these components.

The programming community was initially a bit confused by this approach and didn’t seem to take to it. Now fast-forward to today: Both Ember and Angular, as well as some newer frameworks and view libraries, have moved toward a component-based architecture — even coupling some of the logic and the view code in the same file like React." - Code School Blog, 4/19/2016

"React is a JavaScript library for creating user interfaces by Facebook and Instagram. Many people choose to think of React as the V in MVC.

We built React to solve one problem: building large applications with data that changes over time."

• React Facebook Team

  Specifications

  • [ ] Display a product with several options
  • [ ] Change the price when selecting an option
  • [ ] Add items to the cart
  • [ ] Remove items from the cart
  • [ ] Display the number of items in the cart
  • [ ] Display the total price of items in the cart
  • [ ] Display the total price for each option in the cart based upon quantity
  • [ ] Change our "Add to Cart" button caption to "Sold Out" and disable it when inventory is depleted for a given option
  • [ ] Display the cart after adding a product or clicking the "View Cart" button

    Required

Do not remove these specs - they are required for all goals.

• [ ] The artifact produced is properly licensed, preferably with the MIT license.

---

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

[rae-ralston]

👍

[Anasauce]

I def want to do this goal once I learn more JS!!!

[tannerwelsh]

This looks like a great goal @shakalee14! Here are some suggestions for edits to help move it out of draft:

• Change the title to "Simple Shopping Cart application with React.js" (the "create a..." is not needed, just focus on what the output is :)
• Re-phrase your specifications to be either user stories (i.e. "Users can change the price when selecting an option") or statements about the product that can be true/false (i.e. "Allows for price changes by selecting an option")
• Include a sample quality rubric (take a look at #69 for an example)

Oh, and a tip re: including quotes in Markdown: you can prefix text with a > to make it into a <blockquote>, so that this:

> React is a JavaScript library for creating user interfaces by Facebook and Instagram. Many people choose to think of React as the V in MVC.

> We built React to solve one problem: building large applications with data that changes over time. - _[React Facebook Team](https://facebook.github.io/react/docs/why-react.html)_

gets rendered like this:

React is a JavaScript library for creating user interfaces by Facebook and Instagram. Many people choose to think of React as the V in MVC.

We built React to solve one problem: building large applications with data that changes over time. - React Facebook Team