Mini React implementation made for fun and practice. Please do not use in production.
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"));/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.
-
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.
- Accepting
styleobject as alternative to string prop - Updater version of
setState -
refs - Context API
-
<Fragment /> - SSR
- Fast refresh
- key prop
- Non-blocking rendering
- Ref forwarding
- Code splitting
- Portals
- Suspense
- Server components
- 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?
- 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
- Preact's refresh plugin
- React Refresh package
- Vite plugin-react-refresh
- Description how tagging with signatures work
- Read more about Reconcilliation
- Implement support for Code-splitting
- Forwarding refs
- Portals
- Server components
- Fast refresh duplicates SVG nodes