@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: )

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 />);

Quick start in Next.js

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

This project is only a experimental project, not recommend use in the production environment.

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

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 only a experimental project, not recommend use in the production environment.

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()],
});

// 4. start
pnpm run dev

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

@my-react DevTool Alpha

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
pnpm run build:extension
// install this extension in chrome

// 4. start
pnpm run build:web

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

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
`createELement`	`useState`	`render`	`createReactive`	`babel plugin`	`webpack plugin`	`vite plugin`
`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`