Skip to content

iossocket/tiny-react

Repository files navigation

TINY-REACT

  1. nvm use 20.10.0
  2. pnpm i
  3. pnpm run test

DEBUG FROM SOURCE CODE

  1. ENTER examples folder
  2. RUN npm i
  3. RUN npm run dev

Under the hood

  1. ReactDOM.createRoot(document.getElementById("root") as HTMLElement)
ReactDOM.createRoot(document.getElementById("root") as HTMLElement) -> ReactDOMRoot

ReactDOMRoot:
  _internalRoot: FiberRoot = createFiberRoot(document.getElementById("root"))
  
  FiberRoot:
    containerInfo =  document.getElementById("root")
    current: Fiber = createFiber(HostRoot, null, null)
      current.stateNode = _internalRoot
    finishedWork = null

image

  1. what was react-reconciler designed for?
    1. expose scheduleUpdateOnFiber to react
    2. interact with scheduler, register task for scheduling and what for the callback
    3. execute the callback of task, setup virtual dom in memory. meanwhile interact with react-dom, according to virtual DOM, setup(construct) DOM
    4. interact with react-dom render DOM node.

About

implement tiny react framework from sketch

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published