@my-react

A React like framework, can be used to replace all of the react/react-dom api for test、learn、debug ...

This website is built with @my-react project.
Version: @my-react/react [18.2.0]; @my-react/react-dom [18.2.0] (enableMockReact: )

Support bundler :

Support framework :

View on GitHub Online play View on NPM


        tsx
        
      
1import { useState, useCallback } from '@my-react/react';
2import { createRoot } from '@my-react/react-dom';
3
4/**
5 * hello world
6 */
7
8const useCount = () => {
9  const [state, setState] = useState(0);
10  const add = useCallback(() => setState(i => i + 1), []);
11  const del = useCallback(() => setState(i => i - 1), []);
12
13  return [state, add, del];
14};
15
16const App = () => {
17  const [state, add, del] = useCount();
18
19  return <div>
20    <p>{state}</p>
21    <button onClick={add}>add</button>
22    <button onClick={del}>del</button>
23  </div>
24}
25
26createRoot(document.querySelector('#root')).render(<App />);

@my-react/react-reconciler-compact

A compact version of @my-react/react-reconciler, which has same APIs with react-reconciler.

Support render :

Ink|React Three Fiber

Ink example：pnpm run prepare:terminal && pnpm run test:terminal

React Three Fiber example：pnpm run test:three


        tsx
        
      
1import { useState, useCallback } from '@my-react/react';
2import { createReconciler } from '@my-react/react-reconciler-compact';
3
4const Reconciler = createReconciler({
5  // Define the reconciler configuration here
6});
7
8const App = () => {
9  const [state, setState] = useState(0);
10
11  return <div>
12    <p>{state}</p>
13    <button onClick={() => setState(i => i + 1)}>add</button>
14    <button onClick={() => setState(i => i - 1)}>del</button>
15  </div>
16}
17
18const container = Reconciler.createContainer(document.querySelector('#root'));
19
20Reconciler.updateContainer(<App />, container, null, () => {
21  console.log('Render complete');
22});

Quick start in Next.js

Currently version of @my-react not support React `RSC`.

This project is a experimental project.

Online Example Example

// 1. create a Next.js project

// 2. install @my-react
pnpm add @my-react/react @my-react/react-dom

pnpm add -D @my-react/react-refresh @my-react/react-refresh-tools

// 3. config next.config.js
const withNext = require('@my-react/react-refresh-tools/withNext');

module.exports = withNext(nextConfig);

// 4. start
pnpm run dev

Read-only

NextJS + @my-react

body {
    font-family: sans-serif;
    -webkit-font-smoothing: auto;
    -moz-font-smoothing: auto;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: auto;
    text-rendering: optimizeLegibility;
    font-smooth: always;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
  }
  
  h1 {
    font-size: 1.5rem;
  }

Open Sandbox

Quick start in Vite

This project is a experimental project.

Example

// 1. create a Vite React template

// 2. install @my-react
pnpm add @my-react/react @my-react/react-dom

pnpm add -D @my-react/react-refresh @my-react/react-vite

// 3. config vite.config.ts
import react from "@my-react/react-vite";

export default defineConfig({
  plugins: [react({
    // for remix
    // remix: true,

    // for react router v7
    // reactRouter: true,
  })],
});

// 4. start
pnpm run dev

Read-only

Vite + @my-react

body {
    font-family: sans-serif;
    -webkit-font-smoothing: auto;
    -moz-font-smoothing: auto;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: auto;
    text-rendering: optimizeLegibility;
    font-smooth: always;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
  }
  
  h1 {
    font-size: 1.5rem;
  }

Open Sandbox

Three.js with @my-react

This project is a experimental project.

Try to click DevTool to see the component tree.

All Example:

import { Canvas, useFrame } from "@my-react/react-three-fiber";
import { useRef, useState } from "react";

import type { ThreeElements } from "@my-react/react-three-fiber";

function Box(props: ThreeElements["mesh"]) {
  const ref = useRef<THREE.Mesh>(null!);
  const [hovered, hover] = useState(false);
  const [clicked, click] = useState(false);
  useFrame((state, delta) => (ref.current.rotation.x += delta));
  return (
    <mesh
      {...props}
      ref={ref}
      scale={clicked ? 1.5 : 1}
      onClick={(event) => click(!clicked)}
      onPointerOver={(event) => hover(true)}
      onPointerOut={(event) => hover(false)}
    >
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color={hovered ? "hotpink" : "orange"} />
    </mesh>
  );
}

export const Exp = () => {
  return (
    <Canvas>
      <ambientLight intensity={Math.PI / 2} />
      <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} />
      <pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />
      <Box position={[-1.2, 0, 0]} />
      <Box position={[1.2, 0, 0]} />
    </Canvas>
  );
};

Read-only

@my-react DevTool Beta

A chrome extension help to debug @my-react app, just like React DevTool.

@my-react DevTool

// 1. clone the @my-react devtool repo
git clone `https://github.com/MrWangJustToDo/myreact-devtools.git`

// 2. init project
pnpm install

// 3. prepare
pnpm run build:packages

// 4. dev / build
// local dev by web
pnpm run dev:web
// install this extension in chrome
pnpm run build:extension

// 5. connect a @my-react app
// copy the connect command in the webUI into the @my-react app console

Read-only

Packages

@my-react/react	@my-react/react (hook)	@my-react/react-dom	@my-react/react-reactive	@my-react/react-refresh	@my-react/react-refresh-tools	@my-react/react-vite	@my-react/react-rspack	@my-react/react-terminal
`createELement`	`useState`	`render`	`createReactive`	`babel plugin`	`webpack plugin`	`vite plugin`	`rspack plugin`	`render`
`cloneElement`	`useCallback`	`hydrate`	`reactive`	`refresh runtime`	`next.js plugin`
`isValidElement`	`useMemo`	`renderToString`	`ref`		`webpack loader`
`Children`	`useReducer`	`findDOMNode`	`computed`
`forwardRef`	`useRef`	`createPortal`	`watch`
`lazy`	`useEffect`	`unmountComponentAtNode`	`onBeforeMount`
`createContext`	`useLayoutEffect`	`renderToNodeStream`	`onBeforeUnmount`
`createRef`	`useImperativeHandle`	`createRoot`	`onBeforeUpdate`
`memo`	`useContext`	`hydrateRoot`	`onMounted`
`Component`	`useDebugValue`	`renderToStaticMarkup`	`onUnmounted`
`PureComponent`	`useSignal`	`renderToStaticNodeStream`	`onUpdated`
`StrictMode`	`useDeferredValue`	`renderToPipeableStream`
`Fragment`	`useId`	`renderToReadableStream`
`Suspense`	`useInsertionEffect`
`createFactory`	`useSyncExternalStore`
`startTransition`	`useTransition`