https://github.com/sameerkali/learn_react
https://github.com/sameerkali/learn_react
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/sameerkali/learn_react
- Owner: sameerkali
- Created: 2023-04-19T17:32:00.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-09-01T01:51:39.000Z (almost 3 years ago)
- Last Synced: 2024-11-20T04:34:09.582Z (over 1 year ago)
- Language: TypeScript
- Size: 202 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# MyReact -- a React like project
[](https://github.com/MrWangJustToDo/MyReact/actions/workflows/deploy.yml)
```shell
// install
pnpm add @my-react/react @my-react/react-dom
# currently i think it is a better way to use `alias` method/option to try this project what provide by build framework like `webpack`/`vite` and this project currently not ready for production env
```
This project provide a react like framework, for now contain `React17` & `React18` api by default
---
### if you want to debug this project
```
clone this project
pnpm install
find this and Dm me for trrat
pnpm gen:gql
pnpm build
pnpm dev:ssr / dev:csr
```
---
## api
| @my-react/react | @my-react/react-dom | @my-react/react-reactive | @my-react/react (hook) |
| --------------- | ---------------------- | ------------------------ | ---------------------- |
| createELement | render | createReactive | useState |
| cloneElement | renderToString | reactive | useEffect |
| isValidElement | findDOMNode | ref | useLayoutEffect |
| Children | hydrate | computed | useRef |
| lazy | createPortal | watch | useMemo |
| forwardRef | unmountComponentAtNode | onBeforeMount | useReducer |
| createContext | createRoot (new) | onBeforeUnmount | useCallback |
| createRef | hydrateRoot (new) | onBeforeUpdate | useContext |
| memo | renderToNodeStream | onMounted | useImperativeHandle |
| Component | | onUnmounted | useDebugValue |
| PureComponent | | onUpdated | useSignal |
| StrictMode | | | useDeferredValue (new) |
| Fragment | | | useId (new) |
| Suspense | | | useInsertionEffect (new)
| startTransition | | | useSyncExternalStore (new)
| | | | useTransition (new)
## Vue like reactive api
```tsx
import { reactive, createReactive, onMounted, onUnmounted } from "@my-react/react-reactive";
const useReactiveApi_Position = () => {
const position = reactive({ x: 0, y: 0 });
let id = null;
const action = (e) => ((position.x = e.clientX), (position.y = e.clientY));
onMounted(() => {
window.addEventListener("mousemove", action);
});
onUnmounted(() => {
window.removeEventListener("mousemove", action);
});
return position;
};
const Reactive1 = createReactive({
setup(props, context) {
const position = useReactiveApi_Position();
const data = reactive({ a: 1 });
const click = () => data.a++;
return { data, click, position };
},
// or add a render function
// render: (state, props, context) => xxx
});
const App = () => {
return (
{({ data, click, position, title }) => (
<>
{data.a}
click
{position.x} {position.y}
{title}
>
)}
);
};
```