31:[] 2f:{"title":"Lesson 10: Finally Starting React","cells":[{"id":0,"value":"md`# Lesson 10: Finally Starting React\n\nAfter 9 lessons, we're finally here. \n\nReact's \"JSX\" can be thought of as basically HTML plus extra custom tags (kinda a lie but we'll get there next lesson). This means HTML elements are the smallest building blocks of our React pages. Since this is a React tutorial, I'm not gonna go too far into html. \n\nI'll explain what the tags I'm using do, but to learn of other tags you can use, please consult [W3Schools Documentation](https://www.w3schools.com/html/).\n\n# Hello World\n`\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"renderReact(jsxi({ HelloWorld })``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"class HelloWorld extends React.Component {\n render() {\n return jsx`

Hello from React!

`\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`# Components and Props`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"renderReact(jsxi({OuterComponent})`` )","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"class OuterComponent extends React.Component {\n render() {\n return jsxi({InnerComponent})`\n

Hi from Outer Component!

\n \n \n

\n `\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"class InnerComponent extends React.Component {\n render() {\n return jsxi({ props: this.props })`\n

\n Hi from Inner Component! My parent said { props.say }\n

` \n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"md`# State & Life Cycle`","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"renderReact(jsxi({ StateComponent })``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"class StateComponent extends React.Component {\n \n constructor(props) {\n super(props);\n this.state = {\n counter: 0,\n greeting: \"Hello World!\",\n }\n }\n \n async componentDidMount() {\n while(true) {\n await wait(500);\n this.setState({ counter: this.state.counter + 1 });\n } \n }\n\n render() {\n \n const { greeting, counter } = this.state;\n const rainbow = [ \"#FF0000\", \"#FF7F00\", \"#FFFF00\", \"#00FF00\", \"#0000FF\", \"#7A00E5\", \"#D300C9\" ];\n \n const rainbowGreeting = greeting.split(\"\")\n .map( (v,k) => `${v}` )\n .reduce( (ag,v) => ag + v, \"\"); \n \n return jsx`\n

${rainbowGreeting}

\n `\n }\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"md`# Handling Events`","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"renderReact(jsxi({EventComponent})``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"class EventComponent extends React.Component {\n \n constructor() {\n super();\n this.state = {\n counter:0 \n }\n }\n \n handleClick() {\n this.setState({ counter: this.state.counter + 1 }) \n }\n \n render() {\n return jsxi({ state: this.state, handleClick:this.handleClick.bind(this) })`\n

Counter: { state.counter }

\n \n

\n `\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"md`---\n## Appendix\n\n#### Imports `","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"import { wait, renderReact, jsxi, jsx, React } from '@midnightpineapple/adding-react-to-observable-notebook'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}