{"id":20565751,"url":"https://github.com/phenax/react-is-a-programming-language","last_synced_at":"2025-09-25T23:30:25.357Z","repository":{"id":238298292,"uuid":"796274349","full_name":"phenax/react-is-a-programming-language","owner":"phenax","description":"Proving react is a turing-complete programming language by making it do things it wasn't meant to do","archived":false,"fork":false,"pushed_at":"2024-05-10T15:08:09.000Z","size":168,"stargazers_count":18,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-16T04:38:50.590Z","etag":null,"topics":["react","reactjs","turing-complete"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/phenax.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2024-05-05T13:20:59.000Z","updated_at":"2024-08-27T15:20:29.000Z","dependencies_parsed_at":"2024-05-05T14:40:05.897Z","dependency_job_id":null,"html_url":"https://github.com/phenax/react-is-a-programming-language","commit_stats":null,"previous_names":["phenax/react-is-a-programming-language"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phenax%2Freact-is-a-programming-language","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phenax%2Freact-is-a-programming-language/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phenax%2Freact-is-a-programming-language/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phenax%2Freact-is-a-programming-language/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/phenax","download_url":"https://codeload.github.com/phenax/react-is-a-programming-language/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234261618,"owners_count":18804569,"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","reactjs","turing-complete"],"created_at":"2024-11-16T04:38:57.656Z","updated_at":"2025-09-25T23:30:20.041Z","avatar_url":"https://github.com/phenax.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Reactjs is a turing complete programming language\n\nNote: Uses react canary (19)\n\nOur [App.tsx](./src/App.tsx) here calculates factorial of a number, fibonacci sequence and does a bit of arithmetics but it does all that using react (not JS). What I mean by that is:\n- No function recursion\n- No loops\n- No if-else/`?:` ternaries/`\u0026\u0026 ||` ternaries\n- No switch-case\n- No arithmetic operators\n\n**So every bit of computation in this repo (as much as possible) is done using react only.**\n\n![Screenshot](./screenshot.jpg)\n\n\n## Example\nHere's how the factorial component looks like:\n```tsx\nconst Factorial: FC\u003cany\u003e = React.memo(({ n }) =\u003e {\n  const [count, setCount] = useState(n);\n  const [result, setResult] = useState(\u003cOne /\u003e);\n\n  useLoop();\n\n  return (\n    \u003c\u003e\n      Calculating factorial of {n}...\n      \u003cIfElse condition={count \u003c= 1}\u003e\n        \u003cAdd\u003e{result}\u003c/Add\u003e\n        \u003cCallElement key={count} fn={\n          \u003cEvaluateAll fns={[\n            \u003cAdd\u003e\u003cDecrement\u003e{numberToNode(count)}\u003c/Decrement\u003e\u003c/Add\u003e,\n            \u003cMultiply a={result} b={numberToNode(count)} /\u003e\n          ]} /\u003e\n        }\u003e\n          {([newCount, newResult]) =\u003e \u003cCallFunction fn={() =\u003e {\n            setCount(newCount);\n            setResult(numberToNode(newResult))\n          }} /\u003e}\n        \u003c/CallElement\u003e\n      \u003c/IfElse\u003e\n    \u003c/\u003e\n  );\n});\n\nconst App = () =\u003e {\n  return (\n    \u003cCallElement fn={\u003cFactorial n={5} /\u003e}\u003e\n      {result =\u003e (\u003cdiv\u003e5! = {result}\u003c/div\u003e)}\n    \u003c/CallElement\u003e\n  );\n};\n```\n\n\n## How it works\nNot that anyone needs this information but here it is anyway...\n\n#### useLoop\nJust a forever loop created by updating a state inside a `useEffect` with a dependency on the state itself. (Has a tiny delay to get the render to run reliably)\n\n#### CallElement\nRemoving some of the noise, the core of what happens looks like this:\n```tsx\n    \u003cSuspense fallback={\u003cReturn.Provider\u003e{computation}\u003c/Return.Provider\u003e}\u003e\n      \u003cAwaitResource\u003e{getResultOfComputation}\u003c/AwaitResource\u003e\n    \u003c/Suspense\u003e\n```\n\n`Suspense` wraps the computation where `AwaitResource` is waiting for some promise to resolve. So react renders the fallback.\n`Return` context provides a function inside your computation which is meant to be invoked when the computation is done.\nWhen the function is invoked, it resolves the promise which the `AwaitResource` component is waiting for.\nThis then renders the `AwaitResource` along with the result of the computation.\n\n\n#### CallFunction\nJust a useEffect that calls the function when rendered.\n\n\n#### IfElse\nNothing fancy. Renders the first child if the condition is true, otherwise renders the second child.\n\nIndex of child picked = `Number(!condition)`\n\n\n#### Natural numbers\nNumbers are represented as react elements.\n- `0` is `\u003c\u003e\u003c/\u003e`\n- `1` is `\u003cdiv data-type=\"nat\" /\u003e`\n- `2` is `\u003c\u003e\u003cdiv data-type=\"nat\" /\u003e\u003cdiv data-type=\"nat\" /\u003e\u003c/\u003e`\n- ...\n\nSo, the number of the `nat` dom nodes is what represents our number.\n- Addition, is a combination of 2 nat react elements that represent natural numbers `\u003c\u003e\u003cOne /\u003e\u003cOne /\u003e\u003cOne /\u003e\u003c/\u003e`.\n- Multiplication is just the react element for the second number repeated the first number of times.\n- Decrement removes the `data-type` attribute from one of the nodes. (No subtraction implemented yet but it'd be this multiple times)\n\nNote: `Add` component also doubles as a natural number node to number converter.\n\n\u003e Sort of cheating here by using dom nodes so if anyone knows a way to do arithmetics without the dom, please let me know!\n\n#### EvaluateAll\nJust `CallElement` for each react element in the array. Essentially `Promise.all` for react elements.\n\n\n## How to run it?\nWhy would you want to do something like that? But if you're sure you want to...\n\n- Clone this thing\n- Install dependencies `bun i` (Uses bun because I'm cool like that)\n- `bun run dev`\n- Open `localhost:5173` in your browser\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphenax%2Freact-is-a-programming-language","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fphenax%2Freact-is-a-programming-language","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphenax%2Freact-is-a-programming-language/lists"}