Recreating React From Scratch (with Typescript!)

Annie Sun
Annie Sun
Cover Image for Recreating React From Scratch (with Typescript!)
Annie Sun
Annie Sun

React is by far the most popular web framework out there today. It's a really beautiful framwork, and I've always wonderew how does the magic work under the hood? This write-up explains how I tried recreating React!

Now React is a huge, powerful framework. and I am but a mere CS student, so my little recreation covers only a few key features of React. Topics I delved into include rendering, attributes, event handling, & hooks!


The core part of any web-framework is that it has to make stuff show up on the page. React uses a Virtual DOM, which now is a bit controversial, but I thought this method was easiest to understand and recreate.

Somehow I never really understood what "The Virtual DOM" meant until I realized it's just a fancy schmancy way of saying representing the displayed HTML as a Javascript object.

For example something like this in code:

    tag: "div",
    className: "container",
    children: [
        tag: "p"
        children: ["Item #1"]
        tag: "p"
        children: ["Item #2"]

Would map to something like this in HTML

<div className="container">
  <p>Item #1</p>
  <p>Item #2</p>

At it's core React is made up of basic building blocks that generate Javascript objects like so:

React.createElement("div", props)

How do custom components work? Well all components are functions, and these functions all return JSX which is just a cleaner way of representing those basic functions.

Custom components just return a pre-assembled collection of building blocks, which just fill in props as given.

  <Text>Item #1</Text>

Translates to:

  children: [Text("Item #1")]

And decomposing this function even more would result in something like so:

React.createElement("div", { 
  className: "custom-container-style" ## pre-existing prop
  children: [React.createElement("p", { 
    className: "custom-text-style", 
    children: [Item #1"] 


Future Plans