{"id":16221783,"url":"https://github.com/noriller/react-reusability-poc","last_synced_at":"2026-04-13T12:31:15.577Z","repository":{"id":126647850,"uuid":"552467897","full_name":"Noriller/react-reusability-poc","owner":"Noriller","description":"React: learn once, write the logic once, render it in React Web and React Native!","archived":false,"fork":false,"pushed_at":"2022-10-16T18:54:55.000Z","size":324,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-08T00:45:42.566Z","etag":null,"topics":["javascript","poc","react","react-hooks","react-native","reactjs"],"latest_commit_sha":null,"homepage":"","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/Noriller.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":"2022-10-16T17:00:26.000Z","updated_at":"2022-10-16T18:26:29.000Z","dependencies_parsed_at":"2023-05-06T05:31:45.707Z","dependency_job_id":null,"html_url":"https://github.com/Noriller/react-reusability-poc","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Noriller/react-reusability-poc","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Noriller%2Freact-reusability-poc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Noriller%2Freact-reusability-poc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Noriller%2Freact-reusability-poc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Noriller%2Freact-reusability-poc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Noriller","download_url":"https://codeload.github.com/Noriller/react-reusability-poc/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Noriller%2Freact-reusability-poc/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31753009,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-13T09:16:15.125Z","status":"ssl_error","status_checked_at":"2026-04-13T09:16:05.023Z","response_time":93,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["javascript","poc","react","react-hooks","react-native","reactjs"],"created_at":"2024-10-10T12:09:48.717Z","updated_at":"2026-04-13T12:31:15.559Z","avatar_url":"https://github.com/Noriller.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Reusability POC\n\nThis is a proof of concept of how you can write React code once and render it in both Web and Native apps.\n\n## How to use\n\n```bash\nyarn install\nyarn --global add expo-cli\n\nyarn start # for react native\n# yarn tunnel # if the normal way don't work or your phone is in another network\nyarn dev # for react web\n```\n\n## The humble object\n\nUsually used for testing, you split the logic from the GUI and make the GUI humble.\n\nThis separations makes it easier to test the logic since you don't need to worry about the GUI and how to call the functions through it.\n\nThis also makes it easier to render the same logic in different components, even if those components will be rendered by different engines.\n\n## The POC\n\nWith that in mind, I used a basic `create-expo-app` and a `create-react-app` and \"merged\" them.\n\nI made a `Counter` component split into the \"logic\", and then the \"web\" and \"native\" components.\n\nSince React for web and for native has different needs and components to be able to render, each has it's own implementation. But the logic behind them is exactly the same and could be reused without problems.\n\nFor this example I wanted to have all components and logic next to each other, and while I do think that having everything next to each other improves the experience for writing everything, I know that it would take a lot of configuring stuff (transpiler, test, lint, etc).\n\nThen again I used the most basic options just because I wanted to see if with minimal configuration I would be able to do this.\n\n### Making this better\n\nFor React Native, we pretty much \"only\" have `expo` as an alternative. For the Web part however... `cra`, `vite`, `next`, `remix`, `redwood`...\n\nThe idea I believe would be most stable and meta-framework agnostic to work and to deploy would be to make this into a `monorepo`.\n\nWe could neatly split the dependencies and config and then split the logic hooks from the web/native parts.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnoriller%2Freact-reusability-poc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnoriller%2Freact-reusability-poc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnoriller%2Freact-reusability-poc/lists"}