austinchadoyeon / react-workshop Goto Github PK

1. Open a terminal tab, and run npm install to download the dependenices.
2. In that same tab (after completion), run npm start to start your node server.
3. In a NEW terminal tab, run npm run build to start Webpack, which will watch and auto-transpile your files (using Babel). Make sure this tab remains running.
4. Open up a chrome tab at localhost:3001 to see your code being rendered.

• With this project, we will be creating an application that will display a list of cocktails made with a searched ingredient.

• Our task is to build out functionalities to render a default list of cocktails, add cocktails to a favorites list, and remove cocktails from our favorites. Let's get started!

• Render App.jsx to our index.html.

• Create App, as a stateful/class component.
• Create a piece of state to store an array of drinks, which will be used to render a list of cocktails.
• Render the List component inside of the App component.

• Create both List and ListItem as functional components.
• Connect the two components (in React style), using the comments at the top of each file as a guideline.

Leave this hard-coded for now; we will refactor momentarily.

• Make sure you are able to see the hard-coded List and ListItems in your browser.

• Import the static drink data from dummy.js and have App.jsx set its state once the page is loaded
• List should render one ListItem for each drink in the array in App's state
• ListItem components should be able to conditionally render the drink's strDrink (name), and strDrinkThumb (thumbnail image) based on what is passed down to it via props.

• Set App's state to a real list of cocktails, by importing and using dummy.js
• You should see a rendered list of cocktails, with their name and image displayed.

• Create Favorites as a functional component
• Update app's state to store a list of favorite drinks

• When a ListItem is clicked, it should be added to the favorites list and rendered on the page.

• When a favorite is clicked, it should be removed from the favorites list in state and the page should rerender accordingly.

Further steps to test your abilities are to come!