- Run
npm install
to install the project dependencies - Run
npm run build
to start Webpack and transpile your files into dist/bundle.js - Run
npm start
to start up the server and serve up index.html - Open
localhost:3500
in your browser to see the page
- Set up App component in App.jsx
- Render App to index.html via index.jsx
- Import dog data from data/dogs.js, and store it in App's state once the page has loaded (via a lifecycle method)
- Set up DogList and DogEntry components in their respective files (create DogEntry as a functional stateless component first, using the just the html under the 'LESS INFO' comment)
- Have App render the DogList component, and the DogList component render one DogEntry for each dog object in the App's state
- Add functionality for the 'Add to Favorites' button on each of the DogEntries, storing added dogs in App's state (ideally we want to avoid duplicate dogs getting added)
- Set up Favorites component to render the 'fav-entry' html for each dog in the favorites list
- Add functionality for the 'Remove from Favorites' button associated with each dog in favorites
- Re-factor DogEntry to be a class component, and set it up to conditionally render either the 'More Info' or 'Less Info' html, depending on if the 'More Info' button has been clicked