lecture5.mdx

import { Head, Appear } from "mdx-deck"; import Logo from "./assets/images/logos/rdc-icon.svg"; export { default as theme } from "./theme"; import { CodeSurfer } from "mdx-deck-code-surfer"; import ultramin from "prism-react-renderer/themes/ultramin";

Happy Thursday!

Today: Reviewing and building on React

---

Review

---

More Review

---

A review of Lab

---

---

Component as a function

function HelloWorld(props) {
  return <p>Hello world!</p>;
}

---

Component as a class

class HelloWorld extends React.Component {
  render() {
    return <p>Hello world!</p>;
  }
}

---

Using functions in the class

class Greeting extends React.Component {
  askForName() {
    return prompt("What's your name?");
  }

  render() {
    const name = this.askForName();
    return <p>Hello, {name}!</p>;
  }
}

---

Demo!

---

Quick React DevTools Demo!