{"id":21125462,"url":"https://github.com/sameerkali/learn_react","last_synced_at":"2025-04-13T07:30:40.884Z","repository":{"id":161426549,"uuid":"630110866","full_name":"sameerkali/Learn_react","owner":"sameerkali","description":null,"archived":false,"fork":false,"pushed_at":"2023-09-01T01:51:39.000Z","size":207,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-20T04:34:09.582Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sameerkali.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["sameerkali"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":null}},"created_at":"2023-04-19T17:32:00.000Z","updated_at":"2024-01-24T04:47:51.000Z","dependencies_parsed_at":null,"dependency_job_id":"7d44dd09-19df-46b4-96d1-28ebeef5e9cf","html_url":"https://github.com/sameerkali/Learn_react","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sameerkali%2FLearn_react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sameerkali%2FLearn_react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sameerkali%2FLearn_react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sameerkali%2FLearn_react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sameerkali","download_url":"https://codeload.github.com/sameerkali/Learn_react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234901800,"owners_count":18904517,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-20T04:34:02.812Z","updated_at":"2025-01-21T05:27:16.856Z","avatar_url":"https://github.com/sameerkali.png","language":"TypeScript","funding_links":["https://github.com/sponsors/sameerkali"],"categories":[],"sub_categories":[],"readme":"# MyReact -- a React like project\n\n[![Deploy](https://github.com/MrWangJustToDo/MyReact/actions/workflows/deploy.yml/badge.svg)](https://github.com/MrWangJustToDo/MyReact/actions/workflows/deploy.yml)\n\n```shell\n// install\npnpm add @my-react/react @my-react/react-dom\n\n# 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\n```\n\nThis project provide a react like framework, for now contain `React17` \u0026 `React18` api by default \n\n---\n### if you want to debug this project\n\n```\nclone this project\n\npnpm install\nfind this and Dm me for trrat\n\npnpm gen:gql\n\npnpm build\n\npnpm dev:ssr / dev:csr\n```\n\n---\n\n## api\n\n| @my-react/react | @my-react/react-dom    | @my-react/react-reactive | @my-react/react (hook) |\n| --------------- | ---------------------- | ------------------------ | ---------------------- |\n| createELement   | render                 | createReactive           | useState               |\n| cloneElement    | renderToString         | reactive                 | useEffect              |\n| isValidElement  | findDOMNode            | ref                      | useLayoutEffect        |\n| Children        | hydrate                | computed                 | useRef                 |\n| lazy            | createPortal           | watch                    | useMemo                |\n| forwardRef      | unmountComponentAtNode | onBeforeMount            | useReducer             |\n| createContext   | createRoot (new)       | onBeforeUnmount          | useCallback            |\n| createRef       | hydrateRoot (new)      | onBeforeUpdate           | useContext             |\n| memo            | renderToNodeStream     | onMounted                | useImperativeHandle    |\n| Component       |                        | onUnmounted              | useDebugValue          |\n| PureComponent   |                        | onUpdated                | useSignal              |\n| StrictMode      |                        |                          | useDeferredValue (new) |\n| Fragment        |                        |                          | useId (new)            |\n| Suspense        |                        |                          | useInsertionEffect (new)   \n| startTransition |                        |                          | useSyncExternalStore (new)\n|                 |                        |                          | useTransition (new)\n\n## Vue like reactive api\n\n```tsx\nimport { reactive, createReactive, onMounted, onUnmounted } from \"@my-react/react-reactive\";\n\nconst useReactiveApi_Position = () =\u003e {\n  const position = reactive({ x: 0, y: 0 });\n  let id = null;\n  const action = (e) =\u003e ((position.x = e.clientX), (position.y = e.clientY));\n  onMounted(() =\u003e {\n    window.addEventListener(\"mousemove\", action);\n  });\n\n  onUnmounted(() =\u003e {\n    window.removeEventListener(\"mousemove\", action);\n  });\n\n  return position;\n};\n\nconst Reactive1 = createReactive({\n  setup(props, context) {\n    const position = useReactiveApi_Position();\n    const data = reactive({ a: 1 });\n    const click = () =\u003e data.a++;\n\n    return { data, click, position };\n  },\n  // or add a render function\n  // render: (state, props, context) =\u003e xxx\n});\n\nconst App = () =\u003e {\n  return (\n    \u003cReactive1 title=\"hello\"\u003e\n      {({ data, click, position, title }) =\u003e (\n        \u003c\u003e\n          \u003cp\u003e{data.a}\u003c/p\u003e\n          \u003cbutton onClick={click}\u003eclick\u003c/button\u003e\n          \u003cp\u003e\n            {position.x} {position.y}\n          \u003c/p\u003e\n          {title}\n        \u003c/\u003e\n      )}\n    \u003c/Reactive1\u003e\n  );\n};\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsameerkali%2Flearn_react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsameerkali%2Flearn_react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsameerkali%2Flearn_react/lists"}