TODO(Together): Create your first ReactJS App
Use the tutorial HERE
TODO(Together): Start the Amazon Cart App
TODO: Create the Header using JSX
.App
.App-header
h1 "Amazon Cart"
TODO(Together): Style the Header in ReactJS
TODO(Together): Convert the Header to a ReactJS Component
TODO: Pass the title argument into the Header component
- Title should be
Amazon Cart
- Use props
TODO(Together): Create HTML/Style for Cart Items and Cart Total
TODO: Convert Cart Items and Cart Total into components
- Name the components
CartItems
and CartTotal
TODO: Create individual CartItem component structure
.CartItem
div.CartItem-image
img
div.CartItem-info
div.info-title
h2
div.info-stock
div.item-actions
div.item-quantity
select
div.item-delete
div.CartItem-price
TODO(Together): Create Style for individual CartItem component
TODO(Together): Import data from data.js and set it in the State
TODO: Pass the data into CartItems components as props
TODO: Loop through cart items list and display them using JSX
- Use the
.map
function
- Output the original Cart Item with fake data
TODO: Convert CartItem component to now use props and pass them in
- Use
item
as a prop
- Replace fake data with data from cart items list
- For the image src use
process.env.PUBLIC_URL
TODO(Together): Create HTML and Style for CartTotal Component
TODO: Calculate total price from cart items list
- Create a
getTotalPrice()
function
- Output it using JSX
TODO(Homework): Correctly calculate cart total
The way I do it is wrong, and I want you to fix it ;)
TODO(Together): Install your first external React Module to format the total price number
TODO(Together): Add the ability to change item quantity in the cart
TODO: Add the ability to delete an item in the cart
- Create a
deleteItem()
function
- Pass the function from
CartItems
to CartItem
component
- Pass the
index
of the item to know which item to delete
- Use the
filter()
function in es6 to filter out item based on index
- Update the items using
setCartItems()
function
TODO(Together): Publish the APP LIVE!!!!