weiranc / reactreviewdogs

ReactReviewDogs

Getting Started

1. Run npm install to install the project dependencies
2. Run npm run build to start Webpack and transpile your files into dist/bundle.js
3. Run npm start to start up the server and serve up index.html
4. Open localhost:3500 in your browser to see the page

What We'll Be Building

Steps to Complete

• 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