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 />);
Currently version of @my-react not support React `RSC`.
This project is only a experimental project, not recommend use in the production environment.
js
1// 1. create a Next.js project
2
3// 2. install @my-react
4pnpm add @my-react/react @my-react/react-dom
5
6pnpm add -D @my-react/react-refresh @my-react/react-refresh-tools
7
8// 3. config next.config.js
9const withNext = require('@my-react/react-refresh-tools/withNext');
10
11module.exports = withNext(nextConfig);
12
13// 4. start
14pnpm run dev
15
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; }
This project is only a experimental project, not recommend use in the production environment.
Example
js
1// 1. create a Vite React template
2
3// 2. install @my-react
4pnpm add @my-react/react @my-react/react-dom
5
6pnpm add -D @my-react/react-refresh @my-react/react-vite
7
8// 3. config vite.config.ts
9import react from "@my-react/react-vite";
10
11export default defineConfig({
12 plugins: [react()],
13});
14
15// 4. start
16pnpm run dev
17
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; }
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 |
|
|
|
|
|