{"id":13773924,"url":"https://github.com/iamdustan/tiny-react-renderer","last_synced_at":"2025-04-05T07:01:17.828Z","repository":{"id":66083840,"uuid":"57908709","full_name":"iamdustan/tiny-react-renderer","owner":"iamdustan","description":"Learn you a React Renderer for Great Good","archived":false,"fork":false,"pushed_at":"2017-12-05T18:52:41.000Z","size":163,"stargazers_count":778,"open_issues_count":3,"forks_count":48,"subscribers_count":24,"default_branch":"master","last_synced_at":"2024-10-20T12:40:00.739Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/iamdustan.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}},"created_at":"2016-05-02T17:45:54.000Z","updated_at":"2024-10-02T03:06:38.000Z","dependencies_parsed_at":null,"dependency_job_id":"e9b4ee2c-35f6-4d16-9fc9-800dc772a11f","html_url":"https://github.com/iamdustan/tiny-react-renderer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamdustan%2Ftiny-react-renderer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamdustan%2Ftiny-react-renderer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamdustan%2Ftiny-react-renderer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamdustan%2Ftiny-react-renderer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iamdustan","download_url":"https://codeload.github.com/iamdustan/tiny-react-renderer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247299828,"owners_count":20916190,"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-08-03T17:01:21.831Z","updated_at":"2025-04-05T07:01:17.715Z","avatar_url":"https://github.com/iamdustan.png","language":"JavaScript","funding_links":[],"categories":["Learn","JavaScript"],"sub_categories":[],"readme":"# Tiny React Renderer\n\nCreating a React Renderer will give you the opportunity to apply the same React\nknowledge that you and your team already know and enjoy from the web and native\nto whatever host environment you need.\n\nCreating a renderer is a fairly straight-forward affair once you know what\nyou’re looking for.\n\nMany languages have this concept of a `main`—the entry point to your\napplication. If you look at any React application code you’ve written you’ll see\nthat you “start” your app with a call like the following:\n\n```jsx\n// web\nReactDOM.render(React.createElement(MyApp), document.getElementById('app'));\n\n// native\nAppRegistry.registerComponent('MyApp', () =\u003e MyApp);\n```\n\nThis is where your application enters into the React domain and comes alive. Your\nroot React element is instantiated and attached to the host environment.\n\nIf you follow either the ReactDOM or React Native codebases from where these\nmethods are defined you will quickly find yourself at the `React{Host}Mount.js`\nfile. Our renderer also begins there.\n\nWith that let’s get started! Our tour continues in [./src/stack/mount.js](./src/stack/mount.js).\n\n## Work in Progress\n\nPlease note this guide is a work in progress. Much of this knowledge is derived\nfrom my experience in creating [React Hardware](https://github.com/iamdustan/react-hardware).\n\n## Tests\n\n* `npm test` will run the tests with the stack-based renderer\n* `npm test -- --fiber` will run the tests with the upcoming fiber implementation\n\n## Renderer Implementations\n\n* Stack\n* Fiber\n\nThe React that we have worked with to date has been using what is called the\nstack renderer. This is because it is implemented on the traditional JavaScript\nstack and operates within those confines.\n\nFiber, on the other-hand, can be thought of like a React VM. It is influenced by\nOCaml, algebraic effects, and other functional ideas. From an implementation\nlevel, Fiber has a first-class renderer API allowing creating custom renderers a\nmuch nicer experience.\n\nThe documentation for stack is no in maintenance mode and will not be very\naccurate as time progresses. This can be found in `./src/stack`. The Fiber API\nchanges will be followed throughout its development to a stable release in\n`./src/fiber`\n\n## Thanks\n\n* [@thejameskyle](https://github.com/thejameskyle): for the inspiration of repo style\n* [@ryanflorence](https://github.com/ryanflorence) and [@mjackson](https://github.com/mjackson) for React Router and the problem that inspired this\n* [@gaearon](https://github.com/gaearon), [@matthewwithanm](https://github.com/matthewwithanm),\n  [@vjeux](https://github.com/vjeux), [@zpao](https://github.com/zpao),\n  [@Yomguithereal](https://github.com/Yomguithereal), [@axemclion](https://github.com/axemclion),\n  and everyone else who has helped me poke around the React codebase.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiamdustan%2Ftiny-react-renderer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fiamdustan%2Ftiny-react-renderer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiamdustan%2Ftiny-react-renderer/lists"}