2c:null 2d:["$","title",null,{"children":"April 1st: React Day 2 | mmakutonin | Observable"}] 32:[] 30:{"id":"d48664b1a24a99cf","slug":"april-1st-react-day-2","title":"April 1st: React Day 2","thumbnail":"1a659d5f5423d4702d320d72099a18861b894798431d1cce07cabf485925de35","access_level":"public","create_time":"$D2019-10-30T18:37:41.556Z","update_time":"$D2019-10-30T18:37:41.556Z","view_time":null,"first_public_time":"$D2019-10-30T18:37:44.561Z","has_unpublished_edits":null,"fork":{"id":"2e248fc223c36c45","slug":"april-1st-react-day-2","title":"April 1st: React Day 2","owner":{"id":"d0ed83f45d7d5784","login":"samchencode","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"bb1ac85e6e617203","login":"mmakutonin","name":"","avatar_url":"https://avatars-next.observableusercontent.com/18644906b3e077e181742c57a3ff5752e32c431739eda8d84a9dfe241f87fd08","tier":"starter_2024"},"version":148,"publish_version":148,"role":null,"authored":false,"authors":[{"type":"individual","id":"9e68373e4597f5c1","login":"mmakutonin","name":"","avatar_url":"https://avatars-next.observableusercontent.com/18644906b3e077e181742c57a3ff5752e32c431739eda8d84a9dfe241f87fd08","tier":null}],"members":[{"type":"individual","id":"9e68373e4597f5c1","login":"mmakutonin","name":"","avatar_url":"https://avatars-next.observableusercontent.com/18644906b3e077e181742c57a3ff5752e32c431739eda8d84a9dfe241f87fd08","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"08de1be22b352915","slug":"it-280b-sp19","title":"IT-280B SP'19","owner":{"id":"bb1ac85e6e617203","login":"mmakutonin","name":""}},"type":"notebook","body":{"titling":"auto","title":"April 1st: React Day 2","cells":[{"id":39,"value":"md`# April 1st: React Day 2\n\nIt's almost time to break into programming teams. Please start thinking about project ideas and choose a team of three. We'll have one team of four. \n\nToday we'll finish up covering core React Concepts. The rest will be up to you to ask for as you code your projects.\n - Event Handling / Inputs\n - Lifting State Up\n - React Life Cycle\n\n## Environment Setup\nIf you haven't installed all the tools on day one, here are updated instructions on how to install the tools we'll be using to develop our own React or React Native apps. \n[LINK](https://observablehq.com/d/a311dbce3769f0d4)\n\nPlease come to next class with your computer and with all the tools installed. Message on \\`#homework-help\\` if you're having trouble, please.\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"md`## Exercises\n\nPlease assume React is imported and in scope. Assume further that the variable \\`App\\` will be rendered in the browser by ReactDOM. Why will these code snippets produce an error?\n\nHere's a React sandbox if you want to test anything out.\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"embed(\"https://codesandbox.io/embed/new?fontsize=14\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"md`\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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"md`\n## Handling Events in React\n\nWe now know how to render HTML and CSS with React. But what happens when we want to respond to user input? [This was clunky in vanilla JavaScript.](https://codepen.io/tylerama/pen/xkbqL) Everything had to be in global scope and your code could easily become spaghetti. React makes things a bit more organized and intuitive. \n\nReact supports most event handlers for DOM elements. Just pass an event handler function as an attribute into any element. The event handler must be named the event name prefixed with \"on\" in camelcase. Make sure your event handler is bound to a lexical context before it's passed in if it uses \\`this\\`.\n\nData corresponding to the user input is passed into the handler function as an Event object. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"embed(\"https://codesandbox.io/embed/v1qnwxjv2y?fontsize=14&hidenavigation=1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"md`\nWhen using inputs of any kind, we store the value of the input into \\`this.state\\`. Every time the user changes a value, we update \\`this.state\\`. The value of the input is to be set to the value in \\`this.state\\`.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"embed(\"https://codesandbox.io/embed/vvwqxxn4p3?fontsize=14&hidenavigation=1&module=%2Fsrc%2FForm.jsx\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"md` ## Lifting State Up\n\nValues in the state should be passed from a parent component to its children.\nWhen two components depend on the same state value, we shouldn't store the value in either one of the components. State should be stored in the parent and then passed down into each via props.\n\nIn the example below, three child components need to update according to one \\`tempInKelvin\\` value in the state of the app. Therefore they must all receive a version of it in their props. Notice that the change handler that performs \\`this.setState\\` on the converter is passed into each of the child components before its used.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"mermaid`\ngraph TD;\n A(Converter: this.state.tempInKelvin)-- tempInKelvin -->B(Temp: this.props.temp);\n A-- tempInCelsius -->C(Temp: this.props.temp);\n A-- tempInFahrenheit -->D(Temp: this.props.temp);\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"embed(\"https://codesandbox.io/embed/3vyop17401?autoresize=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2FTemp.jsx\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"md` ## React Life Cycle\n\nYou don't need to memorize most of these. Just know React doesn't provide only the render method. It does a lot before it renders a component. Each component has a life cycle. Some things are best done at stages of the life cycle other than \\`render\\`. \n\nSince every \\`setState\\` runs render once, never perform a \\`setState\\` within the render function. There will be an infinite recursive loop. \n\n[![React Life Cycle](https://cdn-images-1.medium.com/max/1750/0*OoDfQ7pzAqg6yETH.)](https://medium.com/@baphemot/understanding-react-react-16-3-component-life-cycle-23129bc7a705)\n\n\\`componentDidMount\\` is a good time to get data from web services or perform operations to get the component ready.\n\n\\`componentDidUnmount\\` is a good time to destroy resources that won't be used again to clean up memory.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"embed(\"https://codesandbox.io/embed/0pl6j5lrnw?autoresize=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2FChuckNorris.jsx\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"md` ## Appendix\n\nNothing to see here. Run along now~\n\n### Helpers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"embed = url => html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"md` ### Imports `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"import { mermaid } from '@cowboyd/mermaid'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"