{"id":20651503,"url":"https://github.com/rudreshveerkhare/reactpy","last_synced_at":"2025-07-14T09:13:40.404Z","repository":{"id":57460374,"uuid":"448222182","full_name":"RudreshVeerkhare/ReactPy","owner":"RudreshVeerkhare","description":"React implementation in Python 3, which runs on the client-side.","archived":false,"fork":false,"pushed_at":"2022-03-29T06:23:59.000Z","size":18187,"stargazers_count":28,"open_issues_count":1,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-29T06:11:21.793Z","etag":null,"topics":["brython","pypi-package","python3","react","react-fiber","scratch-implementation","webdevelopment"],"latest_commit_sha":null,"homepage":"","language":"Python","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/RudreshVeerkhare.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-01-15T08:28:54.000Z","updated_at":"2024-10-19T03:13:01.000Z","dependencies_parsed_at":"2022-09-01T19:13:23.716Z","dependency_job_id":null,"html_url":"https://github.com/RudreshVeerkhare/ReactPy","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/RudreshVeerkhare%2FReactPy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RudreshVeerkhare%2FReactPy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RudreshVeerkhare%2FReactPy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RudreshVeerkhare%2FReactPy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RudreshVeerkhare","download_url":"https://codeload.github.com/RudreshVeerkhare/ReactPy/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249347159,"owners_count":21255140,"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":["brython","pypi-package","python3","react","react-fiber","scratch-implementation","webdevelopment"],"created_at":"2024-11-16T17:27:48.121Z","updated_at":"2025-04-17T14:04:06.900Z","avatar_url":"https://github.com/RudreshVeerkhare.png","language":"Python","readme":"# ReactPy\n\n**ReactPy** is a implementation of React in Python using [Brython](https://brython.info/). ReactPy application runs on the client side, which are written in **Python 3**. It's Component based and follows the same virtual DOM and Fiber architecture as ReactJS. ReactPy also supports PYX syntax which is equivalent to JSX in Javascript.\n\n## Getting Started\n\nCreating a ReactPy app is very simple and the process in very much inspired from ReactJS.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/RudreshVeerkhare/ReactPy/raw/main/media/ReactPy_init.gif\" /\u003e\n\u003c/p\u003e\n\n### Installation\n\nReactPy has a PyPI package\n\n```\npip install ReactPy\n```\n\n### Setting Up\n\nOnce ReactPy is installed, then to setup boiler plate -\n\n1. Create an empty folder for your application.\n2. Then run the following command to Initialize ReactPy\n\n```sh\npython3 -m ReactPy --init\n```\n\n### Setup live reload server\n\nReactPy comes with a simple live reload development server, to use start it -\n\n```sh\npython3 -m ReactPy --serve\n```\n\nThis will start a development server at http://127.0.0.1:5500/\n\n### Create a deployment build\n\nTo create a deployment build of your application -\n\n```sh\npython3 -m ReactPy --build\n```\n\nThis will create a `build` directory in project folder. Then this can be very easily deployed to services like [Netlify Drop](https://docs.netlify.com/site-deploys/create-deploys/#drag-and-drop) by uploading `build` folder for deployment.\n\n### Syntax Highlighting\n\nTo get syntax highlighting on`.pyx` files in ReactPy applications, install [ReactPy Syntax Highlighter](https://marketplace.visualstudio.com/items?itemName=RudreshVeerkhare.reactpy) in VSCODE from Visual Studio Marketplace.\n\n## Examples\n\nTodo List using ReactPy - [https://react-py-todo.netlify.app/](https://react-py-todo.netlify.app/)\n\n### Passing Props\n\n```python\nimport ReactPy\nfrom browser import document\n\ndef Greetings(props):\n    return \u003ch1\u003eHi, {\" \" + props[\"name\"]}\u003c/h1\u003e\n\nelement = \u003cGreetings name=\"World!\"/\u003e\nReactPy.render(element, document.getElementById(\"root\"))\n```\n\n### Counter\n\n```python\nimport ReactPy\nfrom browser import document\n\ndef Counter(props):\n    count, setCount = ReactPy.useState(0)\n    return  \u003cdiv\u003e\n                \u003ch1\u003eCount :{count}\u003c/h1\u003e\n                \u003cbutton onClick={lambda e: setCount(count + 1)}\u003e+\u003c/button\u003e\n                \u003cbutton onClick={lambda e: setCount(count - 1)}\u003e-\u003c/button\u003e\n            \u003c/div\u003e\n\nelement = \u003cCounter/\u003e\nReactPy.render(element, document.getElementById(\"root\"))\n```\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/RudreshVeerkhare/ReactPy/raw/main/media/Counter.gif\" /\u003e\n\u003c/p\u003e\n\n### Timer\n\n```python\nimport ReactPy\nfrom browser import document\nfrom browser.timer import set_interval, clear_interval\n\ndef Timer(props):\n    seconds, setSeconds = ReactPy.useState(props[\"timelimit\"])\n    running, setRunning = ReactPy.useState(False)\n\n    if seconds \u003c 1:\n        setRunning(False)\n\n    def _tick():\n        setSeconds(lambda s: s - 1)\n\n    def __effect():\n        if running:\n            print(\"Set Interval\")\n            __interval = set_interval(_tick, 1000)\n            return lambda: clear_interval(__interval)\n\n    ReactPy.useEffect(__effect, [running])\n\n    color = \"red\" if not running else \"blue\"\n\n    return\n        \u003cdiv\u003e\n            \u003cdiv style={{\"color\": color}}\u003eSeconds : {seconds}\u003c/div\u003e\n            \u003cbutton onClick={lambda e: setRunning(lambda r: not r)}\u003eStart / Stop\u003c/button\u003e\n        \u003c/div\u003e\n\nelement = \u003cTimer timelimit={5}/\u003e\nReactPy.render(element, document.getElementById(\"root\"))\n```\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/RudreshVeerkhare/ReactPy/raw/main/media/Timer.gif\" /\u003e\n\u003c/p\u003e\n\n### Live Input\n\n```python\nimport ReactPy\nfrom browser import document\n\ndef LiveInput(props):\n    value, setValue = ReactPy.useState(\"\")\n\n    return\n        \u003cdiv\u003e\n            \u003cinput value={value + \"\"} onInput={lambda e: setValue(e.target.value)}/\u003e\n            \u003ch1\u003e{value}\u003c/h1\u003e\n        \u003c/div\u003e\n\nelement = \u003cLiveInput/\u003e\nReactPy.render(element, document.getElementById(\"root\"))\n```\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/RudreshVeerkhare/ReactPy/raw/main/media/LiveInput.gif\" /\u003e\n\u003c/p\u003e\n\n### API Call\n\n```python\nimport ReactPy\nfrom ReactPy.utils import lmap\nfrom browser import document\nfrom browser.ajax import get\n\ndef UserCard(props):\n    return \u003cdiv style={{\n            \"border\": \"1px solid black\",\n            \"padding\": \"5px\",\n            \"margin\": \"10px\",\n        }}\u003e\n            \u003ch2\u003e{props[\"name\"]}\u003c/h2\u003e\n            \u003cp\u003eemail: {\" \" + props[\"email\"]}\u003c/p\u003e\n            \u003cp\u003ewebsite: {\" \" + props[\"website\"]}\u003c/p\u003e\n        \u003c/div\u003e\n\ndef UserList(props):\n    users, setUsers = ReactPy.useState([])\n\n    def __effect():\n        def _on_complete(res):\n            print(res.json)\n            setUsers(res.json)\n\n        get(\"https://jsonplaceholder.typicode.com/users\", oncomplete = _on_complete)\n\n    ReactPy.useEffect(__effect, [])\n\n    return  \u003cdiv\u003e\n                {lmap(\n                    lambda x: \u003cUserCard name={x[\"name\"]} email={x[\"email\"]} website={x[\"website\"]}/\u003e,\n                    users\n                ) if len(users) \u003e 0 else \u003ch1\u003eLoading...\u003c/h1\u003e}\n            \u003c/div\u003e\n\nelement = \u003cUserList/\u003e\nprint(element)\nReactPy.render(element, document.getElementById(\"root\"))\n```\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/RudreshVeerkhare/ReactPy/raw/main/media/API%20Call.gif\" /\u003e\n\u003c/p\u003e\n\n## Contributions\n\nCheck [Contribution.md]() for Detailed Information.\n\n## Note\n\nThis project is still in beta, so if you find any bugs please raise an issue.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frudreshveerkhare%2Freactpy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frudreshveerkhare%2Freactpy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frudreshveerkhare%2Freactpy/lists"}