Build Your Own React

Summary

function createElement(type, props, ...children) { children: children.map(child => typeof child === "object" : createTextElement(child)function createTextElement(text) {function createDom(fiber) { fiber.type == "TEXT_ELEMENT" ? document.createTextNode("") : document.createElement(fiber.type) updateDom(dom, {}, fiber.props)const isEvent = key => key.startsWith("on")const isProperty = key => key !== "children" && !isEvent(key)const isNew = (prev, next) => key =>const isGone = (prev, next) => key => !(key in next)function updateDom(dom, prevProps, nextProps) { isNew(prevProps, nextProps)(key) .filter(isGone(prevProps, nextProps)) .filter(isNew(prevProps, nextProps)) dom[name] = nextProps[name] .filter(isNew(prevProps, nextProps)) deletions.forEach(commitWork) commitWork(wipRoot.child)function commitWork(fiber) { const domParent = fiber.parent.dom fiber.effectTag === "PLACEMENT" && domParent.appendChild(fiber.dom) fiber.effectTag === "UPDATE" && } else if (fiber.effectTag === "DELETION") { domParent.removeChild(fiber.dom) commitWork(fiber.sibling)function render(element, container) {let nextUnitOfWork = nullfunction workLoop(deadline) { while (nextUnitOfWork && !shouldYield) { nextUnitOfWork = performUnitOfWork( shouldYield = deadline.timeRemaining() < 1 if (!nextUnitOfWork && wipRoot) { requestIdleCallback(workLoop)requestIdleCallback(workLoop)function performUnitOfWork(fiber) { fiber.dom = createDom(fiber) const elements = fiber.props.children reconcileChildren(fiber, elements) nextFiber = nextFiber.parentfunction reconcileChildren(wipFiber, elements) { wipFiber.alternate && wipFiber.alternate.child index < elements.length || const element = elements[index] element.type == oldFiber.type if (element && !sameType) { if (oldFiber && !sameType) { oldFiber.effectTag = "DELETION" oldFiber = oldFiber.sibling wipFiber.child = newFiber prevSibling.sibling = newFiber return <h1>Hi {props.name}</h1>const element = <App name="foo" />const container = document.getElementById("root...