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