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?

/examples contains examples of small web apps wrote with the library.

/packages/remini is the main library. It contains test that can be run with yarn test.

Packages

• babel-plugin – contains Babel plugin for transforming files to support fast refresh and the runtime that is used for refreshing components.

• remini – main library.

• vite-plugin – plugin for Vite to support fast refresh.

Might come later

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

Missing from React

• Non-blocking rendering
• Ref forwarding
• Code splitting
• Portals
• Suspense
• Server components

Useful reading

• Blogged Answers: A (Mostly) Complete Guide to React Rendering Behavior
• React as a UI Runtime
• A Complete Guide to useEffect
• 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
• What are the downsides of preact?

HMR

• Dan Abramov's comment describing how to implement HMR
• My Wishlist for Hot Reloading
• React Native docs about Fast Refresh
• handleHotUpdate in Vite
• HMR API docs in Vite
• Babel Plugin Handbook

Actual implementations

• Preact's refresh plugin
• React Refresh package
• Vite plugin-react-refresh
• Description how tagging with signatures work

Later

• Read more about Reconcilliation
• Implement support for Code-splitting
• Forwarding refs
• Portals
• Server components

TODO

• Fast refresh duplicates SVG nodes