{"action":"closed","issue":{"url":"https://api.github.com/repos/JOLee83/assignments/issues/12","repository_url":"https://api.github.com/repos/JOLee83/assignments","labels_url":"https://api.github.com/repos/JOLee83/assignments/issues/12/labels{/name}","comments_url":"https://api.github.com/repos/JOLee83/assignments/issues/12/comments","events_url":"https://api.github.com/repos/JOLee83/assignments/issues/12/events","html_url":"https://github.com/JOLee83/assignments/issues/12","id":363250724,"node_id":"MDU6SXNzdWUzNjMyNTA3MjQ=","number":12,"title":"Week 04 Day 1 - Reactified Octocats","user":{"login":"gstark","id":2607,"node_id":"MDQ6VXNlcjI2MDc=","avatar_url":"https://avatars2.githubusercontent.com/u/2607?v=4","gravatar_id":"","url":"https://api.github.com/users/gstark","html_url":"https://github.com/gstark","followers_url":"https://api.github.com/users/gstark/followers","following_url":"https://api.github.com/users/gstark/following{/other_user}","gists_url":"https://api.github.com/users/gstark/gists{/gist_id}","starred_url":"https://api.github.com/users/gstark/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gstark/subscriptions","organizations_url":"https://api.github.com/users/gstark/orgs","repos_url":"https://api.github.com/users/gstark/repos","events_url":"https://api.github.com/users/gstark/events{/privacy}","received_events_url":"https://api.github.com/users/gstark/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2018-09-24T17:44:33Z","updated_at":"2018-09-27T22:52:58Z","closed_at":"2018-09-27T22:52:58Z","author_association":"NONE","body":"Your Octodex is amazing. It has revolutionized the Github Octodex experience and more people are viewing Octocats on their mobile devices than ever.\n\nHowever, the code is repetitive and isn't yet setup to work with an API.\n\nYour task now is to refactor the static Octodex into a static (non-API) version in React.\n\nYou'll identify the main `Component`s on the page and create React components for each, breaking down those `Component`s into smaller ones as needed.\n\n## Objectives\n\n- Learn to identify parts of a web site as `Component`s\n- Use `create-react-app` to build a React project\n- Understand and use React components\n\n## Stretch Objectives\n\n- Understand and use \"props\" in React\n- Use `Array.prototype.map` to render a collection of components in React\n\n### Explorer Mode\n\n- [x] Reuse your Octodex as a starting point for this assignment. Or use an existing well factored (HTML and CSS) Octodex.\n- [x] Figure out the main components of the page. These will be the main components in your `<App>` component.\n- [x] You should have at _least_ two components...\n- [x] Create your React app\n- [ ] Copy the CSS from your Octodex into `index.css`\n- [x] Clear out the implementation in the `render` method of `App` and have it render your main components.\n- [x] Create those components and paste the appropriate HTML from your Octodex into the `render` method of those components.\n- [x] Break down those components and use `this.props` to dynamically customize the components that need it.\n\n### Adventure Mode\n\n- [x] Place the definition of each Octocat in an `array` and use `map` to generate the octocat components\n\n### Epic Mode\n\n- [ ] Research how to put the `array` of octocats in a `octocats.json` file and `import` that into your app.\n\n## Additional Resources\n\n- [React Documentation](https://reactjs.org/docs/getting-started.html)\n- [.map, .reduce & .filter, Oh My!](https://www.datchley.name/working-with-collections/)\n- [Array.prototype.map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)\n"}}
{"actor":{"display_login":"JOLee83"}}