31:[] 2f:{"title":"October 14th: React Day 2","cells":[{"id":0,"value":"md`# October 14th: React Day 2\n## Review:\nLet's take a look at the code below and try to figure out how it works.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"embed(\"https://codesandbox.io/embed/j24xwm831y?fontsize=14\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"md` ## \\`this.state \\`\n\n\\`this.state\\` is a plain old JavaScript object.\nThis contains any internal data that describes the behavior of the component at different points in runtime. \n\n\\`this.state\\` should have attributes that you expect to change, or *mutate*, during runtime, and that are specific to a component.\n\nEverytime \\`this.state\\` changes, you must change it with \\`this.setState( newState )\\` where \\`newState\\` is an Object containing what the new state of the attribute that was mutated should look like. \n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"embed(\"https://codesandbox.io/embed/8km5q5l1x0?fontsize=14\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"md`\nTo end class, let's debug some React code. Each code snippet, when run in a React App, will produce one or more errors. Why?\n\\`\\`\\`jsx\n/* 1 : There is one problem here. */\nconst App = () =>

\n\\`\\`\\`\n\n\\`\\`\\`jsx\n/* 2 : There are two problems here. */\nconst App = class MyBox extends React.Component {\n constructor() {\n this.state = { contents:[] }\n }\n\n render() {\n return (\n const { contents } = this.state\n

\n This box contains { contents.join(\", \") }\n

\n )\n }\n}\n\\`\\`\\`\n\n\\`\\`\\`jsx\n/* 3 : There is one problem here. */\nconst Emoji =

\nconst App = () => \n\\`\\`\\`\n\n\\`\\`\\`jsx\n/* 4 : There are three problems here */\nconst numbers = [ 1, 2, 3, 4, 5 ]\nconst NumDisplay = ({ num }) =>

num

\nconst App = () => numbers.map( x => NumDisplay )\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"md`## Exercises:\nPlease add a feature to the below React Sandbox that makes the program fetch a new Pokemon every 2 seconds and display it in the image tag.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"embed('https://codesandbox.io/embed/dazzling-cache-79uxp?fontsize=14')","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"md`\n# Appendix\n\nNothing to see down here\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"embed = url => html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}