{"id":13773976,"url":"https://github.com/clayrisser/create-react-renderer","last_synced_at":"2025-05-01T02:47:48.868Z","repository":{"id":116526241,"uuid":"228701680","full_name":"clayrisser/create-react-renderer","owner":"clayrisser","description":"learn to build a custom react renderer","archived":false,"fork":false,"pushed_at":"2024-08-28T03:46:44.000Z","size":2372,"stargazers_count":32,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-01T02:47:48.395Z","etag":null,"topics":["react","react-renderer"],"latest_commit_sha":null,"homepage":"https://nuevesolutions.com","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/clayrisser.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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}},"created_at":"2019-12-17T21:06:50.000Z","updated_at":"2025-04-14T16:22:22.000Z","dependencies_parsed_at":"2024-11-09T04:04:13.746Z","dependency_job_id":"697cd038-2b70-49d0-ab99-49769a2ebb03","html_url":"https://github.com/clayrisser/create-react-renderer","commit_stats":null,"previous_names":["codejamninja/create-react-renderer"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clayrisser%2Fcreate-react-renderer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clayrisser%2Fcreate-react-renderer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clayrisser%2Fcreate-react-renderer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clayrisser%2Fcreate-react-renderer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/clayrisser","download_url":"https://codeload.github.com/clayrisser/create-react-renderer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251815442,"owners_count":21648367,"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":["react","react-renderer"],"created_at":"2024-08-03T17:01:22.546Z","updated_at":"2025-05-01T02:47:48.800Z","avatar_url":"https://github.com/clayrisser.png","language":"TypeScript","funding_links":[],"categories":["Learn","TypeScript"],"sub_categories":[],"readme":"# create-react-renderer\n\n\u003e learn to build a custom react renderer\n\n![](assets/create-react-renderer.png)\n\nPlease ★ this repo if you found it useful ★ ★ ★\n\n### Watch the Video Below\n\n[![Alt text](https://img.youtube.com/vi/SXx-CymMjDM/0.jpg)](https://www.youtube.com/embed/SXx-CymMjDM)\n\nDISCLAIMER: These definitions are not official. They are based on my own understanding of react renderers.\nThey are not intended for understanding how to use react, but rather are for providing the context of\nunderstanding how a react renderer works.\n\n## Built by Silicon Hills LLC\n\n[![index](https://user-images.githubusercontent.com/6234038/71054254-f284ad80-2116-11ea-9013-d68306726854.jpeg)](https://nuevesolutions.com)\n\nSilicon Hills offers premium Node and React develpoment and support services. Get in touch at [nuevesolutions.com](https://nuevesolutions.com).\n\n## Setup\n\n```sh\nnpm install\n```\n\n## React Renderer Bindings Diagram\n\nThe diagram represents the following code\n\n```jsx\n\u003cForm\u003e\n  \u003cButton /\u003e\n  \u003cInput /\u003e\n\u003c/Form\u003e\n```\n\n![React Renderer Bindings Diagram](slides/assets/react-renderer-binding-diagram.jpg)\n\n## Definitions\n\n### Virtual DOM\nA tree structure that represents the current rendered state. Every branch and leaf on the tree is either a\ncomponent or element.\n\n### Reconciliation\n\n**Reconciliation** is the process of determining which parts of the virtual dom need to be changed\nby diffing the current virtual dom tree with the new virtual dom tree.\n\n### Reconciler\nThe **reconciler** is the bindings to the react reconciliation lifecycle methods. This is NOT the react\nlifecycle hooks even though it is closley related to the react lifecycle hooks.\n\n### Fiber\nA **fiber** virtual stack frame of work for the react reconciler. You can think of it as the low level api the\nreconciler is built on top of.\n\n### Node\nA **node** is the interface of the renderer that the react renderer is binding to. For example\n`window.document` would be the **node** used in a react renderer that binds to the dom.\n\n### Root Node\nThe **root node** is the node used in the top of the react virtual dom tree.\n\n### Element\nYou can think of an **element** as a react component that is directly bound to the reconciliation lifecycle methods.\nThis is NOT the same thing as a react component, although it can be used like a react component.\nBecause it is directly bound to the react reconciliation lifecycle methods it is more powerful, but also more complex.\n**Elements** form the foundation that all react components are built on top of.\n\n`\u003cdiv\u003e`, `\u003cbutton\u003e` and `\u003ch1\u003e` are all examples of elements in the react dom renderer.\n\n### Base Element\nThe **base element** is the element all other elements inherit from.\n\n### Component\nAn encapsulation of components and/or elements.\n\n### Root Element\nThe **root element** is the element used in the top of the react virtual dom tree. This element is\nnot created with JSX but is initialized during the initial render.\n\n### Root\nThis represents the root of the react virutal dom tree.\n\n## Phases\n\n### [Phase A](/phaseA)\nsetup the reconciler\n\n### [Phase B](/phaseB)\ncreate some custom elements\n\n### [Phase C](/phaseC)\nbind some custom elements to reconciler\n\n### [Phase D](/phaseD)\nsetup node\n\n### [Phase E](/phaseE)\nbind base element lifecycle methods\n\n### [Phase F](/phaseF)\nbind critical element lifecycle methods to reconciler lifecycle methods\n\n### [Phase G](/phaseG)\ncreate base elements\n\n### [Phase H](/phaseH)\ncreate text bindings\n\n### [Phase I](/phaseI)\nfinish reconciler bindings\n\n### [Phase J](/phaseJ)\nadd default props\n\n### [Phase K](/phaseK)\nadd options\n\n### [Phase L](/phaseL)\ncreate components\n\n## Tips\n\n### Abstraction is your friend\n\nTry to start small. Build your renderer in many layers of abstraction.\nThis renderer uses the following layers of abstraction.\n\n`reconciler` \u003c- `BaseElement` \u003c- `elements` \u003c- `components` \u003c- `more components`\n\n### Few elements, lots of components\n\nElements are hard to build and hard to debug. It's best to have a few broad and general elements\nand then build lots of specific components on top of the broad elements.\n\n### Start small, increment in small steps\n\n### Use typescript\n\nThis can catch lots of unnecessary bugs.\n\n### Test test test (unit test)\n\n### Build a solid foundation\n\n## Debugging\n\nUnderstanding the react lifecycle can really help with debugging.\n\n### Ref debugging\n\nYou can get access to the node data from a ref. For example, the following will log the data\nfrom the node used in the `\u003cSmart /\u003e` element. This is very helpful because the ref runs\nbefore the entire render cycle is finished. This is helpful for debugging bugs that are\npreventing rendering from finishing.\n\n```ts\n\u003cSmart code=\"const hello = 'world'\" ref={(ref: any) =\u003e console.log(ref.node)} /\u003e\n```\n\nThis only works on element refs. Since elements are abstractions of your nodes, you can't see the\nvalue of nodes in component refs.\n\nFor example, the following would log `undefined`\n\n```ts\n\u003cFunctionDeclaration name=\"hello\" ref={(ref: any) =\u003e console.log(ref.node)} /\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclayrisser%2Fcreate-react-renderer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fclayrisser%2Fcreate-react-renderer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclayrisser%2Fcreate-react-renderer/lists"}