2b:null 2c:["$","title",null,{"children":"React class component using hooks | Selene Blok | Observable"}] 31:T6f5,{ class TodoApp extends Component { constructor(props) { super(props); this.state = { items: [], text: '' }; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } render() { return React.createElement( "div", null, React.createElement( "h3", null, "TODO" ), React.createElement(createComponent(TodoList), { items: this.state.items }), React.createElement( "form", { onSubmit: this.handleSubmit }, React.createElement( "label", { htmlFor: "new-todo" }, "What needs to be done?" ), React.createElement("input", { id: "new-todo", onChange: this.handleChange, value: this.state.text }), React.createElement( "button", null, "Add #", this.state.items.length + 1 ) ) ); } handleChange(e) { this.setState({ text: e.target.value }); } handleSubmit(e) { e.preventDefault(); if (!this.state.text.length) { return; } const newItem = { text: this.state.text, id: Date.now() }; this.setState(state => ({ items: state.items.concat(newItem), text: '' })); } } class TodoList extends Component { render() { return React.createElement( "ul", null, this.props.items.map(item => React.createElement( "li", { key: item.id }, item.text )) ); } } return render(React.createElement(createComponent(TodoApp), null)); }32:Td24,{ // Source: https://codepen.io/gaearon/pen/gWWZgR?editors=0010 // JSX compiled via Babel function Square(props) { return React.createElement("button", { className: "square", onClick: props.onClick }, props.value || '\xA0'); } class Board extends Component { renderSquare(i) { return React.createElement(Square, { value: this.props.squares[i], onClick: () => this.props.onClick(i) }); } render() { return React.createElement("div", null, React.createElement("div", { className: "board-row" }, this.renderSquare(0), this.renderSquare(1), this.renderSquare(2)), React.createElement("div", { className: "board-row" }, this.renderSquare(3), this.renderSquare(4), this.renderSquare(5)), React.createElement("div", { className: "board-row" }, this.renderSquare(6), this.renderSquare(7), this.renderSquare(8))); } } class Game extends Component { constructor(props) { super(props); this.state = { history: [{ squares: Array(9).fill(null) }], stepNumber: 0, xIsNext: true }; } handleClick(i) { const history = this.state.history.slice(0, this.state.stepNumber + 1); const current = history[history.length - 1]; const squares = current.squares.slice(); if (calculateWinner(squares) || squares[i]) { return; } squares[i] = this.state.xIsNext ? "X" : "O"; this.setState({ history: history.concat([{ squares: squares }]), stepNumber: history.length, xIsNext: !this.state.xIsNext }); } jumpTo(step) { this.setState({ stepNumber: step, xIsNext: step % 2 === 0 }); } render() { const history = this.state.history; const current = history[this.state.stepNumber]; const winner = calculateWinner(current.squares); const moves = history.map((step, move) => { const desc = move ? 'Go to move #' + move : 'Go to game start'; return React.createElement("li", { key: move }, React.createElement("button", { onClick: () => this.jumpTo(move) }, desc)); }); let status; if (winner) { status = "Winner: " + winner; } else { status = "Next player: " + (this.state.xIsNext ? "X" : "O"); } return React.createElement("div", { className: "game" }, React.createElement("div", { className: "game-board" }, React.createElement(createComponent(Board), { squares: current.squares, onClick: i => this.handleClick(i) })), React.createElement("div", { className: "game-info" }, React.createElement("div", null, status), React.createElement("ol", null, moves))); } } // ======================================== function calculateWinner(squares) { const lines = [[0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 4, 8], [2, 4, 6]]; for (let i = 0; i < lines.length; i++) { const [a, b, c] = lines[i]; if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) { return squares[a]; } } return null; } return render(React.createElement(createComponent(Game), null)); }33:T5a5,createComponent = memoize(Class => { const Inner = React.memo(({ self, props, state, didUpdate }) => { useUpdate(didUpdate) // TODO: this shouldn’t cause a re-render const gDSFP = self.constructor.getDerivedStateFromProps if (gDSFP) { const update = gDSFP(props, state) if (update) self.setState(update) } self.props = props self.state = state return self.render() }, (_, { self, props, state }) => self.shouldComponentUpdate ? !self.shouldComponentUpdate(props, state) : false) Inner.displayName = '(internal)' const Component = actualProps => { const props = Class.defaultProps ? Object.assign({}, Class.defaultProps, actualProps) : actualProps const prevProps = usePrevious(props) const self = useInstance(Class, props) const [state, setState] = useSetState(self.state) self.setState = setState const prevState = usePrevious(state) React.useEffect(() => { self.componentDidMount && self.componentDidMount() return self.componentWillUnmount && self.componentWillUnmount.bind(self) }, []) return React.createElement(Inner, { self, props, state, didUpdate: React.useCallback( () => self.componentDidUpdate && self.componentDidUpdate(prevProps, prevState, /* snapshot */), [prevProps, prevState], ) }) } Component.displayName = Class.displayName || Class.name return Component })34:[] 2f:{"id":"23fa2ecad57660bd","slug":"react-class-component-using-hooks","title":"React class component using hooks","thumbnail":"176e2682d7aa3e1f239323bfcc518c49db63c731e49232ef4d5a8515dee77923","access_level":"public","create_time":"$D2020-12-04T12:34:58.659Z","update_time":"$D2020-12-04T12:35:04.055Z","view_time":null,"first_public_time":"$D2020-12-04T12:35:08.523Z","fork":{"id":"ad239ad375081c4f","slug":"react-class-component-using-hooks","title":"React class component using hooks","owner":{"id":"d2030a8eee317bb7","login":"j-f1","name":"Jed Fox"}},"stars":0,"starred":false,"owner":{"type":"team","id":"3cdeccc1ad2f7c8e","login":"selenecodes","name":"Selene Blok","avatar_url":"https://avatars-next.observableusercontent.com/100c4338f6c570d93da1037a8d94a51f2040e227a3480ee2b464abd22afaa553","tier":"starter_2024"},"version":309,"publish_version":309,"role":null,"authored":false,"authors":[{"type":"individual","id":"7fe63d183a47404d","login":"selenecodes","name":"Selene Blok","avatar_url":"https://avatars-next.observableusercontent.com/25a7c960cccc8fbc811dfa2c0c4a56f86a2f798f0c0ab2995624797232075f8f","tier":null}],"members":[{"type":"individual","id":"7fe63d183a47404d","login":"selenecodes","name":"Selene Blok","avatar_url":"https://avatars-next.observableusercontent.com/25a7c960cccc8fbc811dfa2c0c4a56f86a2f798f0c0ab2995624797232075f8f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"React class component using hooks","cells":[{"id":0,"value":"md`\n# React class component using hooks\nThe only API difference is that you have to call \\`createComponent(class)\\`.\n\n**Legacy methods are not supported**.\n\nTODO:\n- Proper ref support\n- \\`setState()\\` callback\n- \\`props\\` arg to \\`setState()\\` updater\n- \\`forceUpdate()\\`\n- \\`static contextType\\`\n\n

Done

~~\\`constructor()\\`~~\n
~~\\`render()\\`~~\n
~~\\`componentDidUpdate(...)\\`~~\n

\n\n

~~\\`defaultProps\\`~~\n
~~\\`displayName\\`~~\n
~~\\`state\\`~~\n
~~\\`setState()\\`~~\n
~~\\`static getDerivedStateFromProps()\\`~~\n

\n\n

~~\\`componentDidMount()\\`~~\n
~~\\`componentWillUnmount()\\`~~\n

\n\n

~~\\`shouldComponentUpdate()\\`~~\n

\n\n

Needs new hooks

\\`static getDerivedStateFromError()\\`\n
\\`componentDidCatch()\\`\n
\\`getSnapshotBeforeUpdate()\\`\n

\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"{\n class HelloMessage extends Component {\n render() {\n return React.createElement(\n \"div\",\n null,\n \"Hello \",\n this.props.name\n );\n }\n }\n\n return render(React.createElement(createComponent(HelloMessage), { name: \"Taylor\" }));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"{\n class Timer extends Component {\n constructor(props) {\n super(props);\n this.state = { seconds: 0 };\n }\n\n tick() {\n this.setState(state => ({\n seconds: state.seconds + 1\n }));\n }\n\n componentDidMount() {\n this.interval = setInterval(() => this.tick(), 1000);\n }\n\n componentWillUnmount() {\n clearInterval(this.interval);\n }\n\n render() {\n return React.createElement(\n \"div\",\n null,\n \"Seconds: \",\n this.state.seconds\n );\n }\n }\n\n return render(React.createElement(createComponent(Timer), null));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"class Component {\n constructor(props) {\n this.props = props\n this.state = {}\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"function useInstance(Component, ...args) {\n const instanceRef = React.useRef(null)\n if (!instanceRef.current) {\n instanceRef.current = new Component(...args)\n }\n return instanceRef.current\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"function usePrevious(value) {\n const ref = React.useRef()\n React.useEffect(() => {\n ref.current = value;\n })\n return ref.current\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"function useUpdate(callback) {\n const isUpdate = React.useRef(false)\n React.useEffect(isUpdate.current ? callback : () => {})\n isUpdate.current = true\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"md`\n- - -\n### Example Utilities\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"h = React.createElement","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"function render(tree) {\n const root = html`

`\n ReactDOM.render(tree, root)\n return root\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"md`\n### Dependencies\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"React = r('react')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"ReactDOM = r('react-dom')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"function useSetState(initialState = {}) {\n // source: https://github.com/streamich/react-use/blob/6f86b9e4/src/useSetState.ts\n const [state, set] = React.useState(initialState)\n const setState = patch => {\n if (typeof patch === 'function') {\n set(prevState => Object.assign(state, patch(prevState)))\n } else {\n set(prevState => Object.assign({}, prevState, patch))\n }\n }\n\n return [state, setState]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"r = require.alias({\n 'react': 'react@16.7.0-alpha.0/umd/react.production.min.js',\n 'react-dom': 'react-dom@16.7.0-alpha.0/umd/react-dom.production.min.js',\n 'react-pirate': 'react-pirate@1.1.3'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"memoize = require('lodash.memoize@4.1.2/index.js').catch(() => window[\"memoize\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"