/remini

Mini React implementation made for fun and practice. Please do not use in production.

Primary LanguageTypeScript

remini

Mini React implementation made for fun and practice. Please do not use in production.

Example

import { useState, createElement as c, render } from "./lib";

const Counter = () => {
  const [count, setCount] = useState(0);

  return c(
    "div",
    {},
    c("div", {}, `Value: ${count}`),
    c("button", { onClick: () => setCount(count + 1) })
  );
};

render(c(Counter), document.getElementById("root"));

How to play with it?

yarn start to start the dev server at localhost:1234.

yarn test to see the tests passing.

Might come later

  • Accepting style object as alternative to string prop
  • Updater version of setState
  • refs
  • Context API
  • <Fragment />

Useful reading

Blogged Answers: A (Mostly) Complete Guide to React Rendering Behavior

React as a UI Runtime

How Does setState Know What to Do?

The how and why on React’s usage of linked list in Fiber to walk the component’s tree

Inside Fiber: in-depth overview of the new reconciliation algorithm in React

In-depth explanation of state and props update in React

Build your own React

XSS via a spoofed React element