Greeting functional class components with Hooks from React Conf 2018

hooks-example.js

import * as React from "react";
import { Card, Row, Input, Text } from "./components";
import ThemeContext from "./ThemeContext";

export default function Greeting(props) {
  let theme = useContext(ThemeContext);

  let [name, setName] = useState("Harry");
  let [surname, setSurname] = useState("Potter");
  useEffect(() => {
    document.title = `${name} ${surname}`;
  });

  let [width, setWidth] = useState(window.innerWidth);
  useEffect(() => {
    let handleResize = () => setWidth(window.innerWidth);
    window.addEventListener("resize", handleResize);
    return () => {
      window.removeEventListener("resize", handleResize);
    };
  });

  return (
    <Card theme={theme}>
      <Row label='Name'>
        <Input value={name} onChange={setName} />
      </Row>
      <Row label='Surname'>
        <Input value={surname} onChange={setSurname} />
      </Row>
      <Row label='Width'>
        <Text>{width}</Text>
      </Row>
    </Card>
  );
}