https://github.com/rudreshveerkhare/reactpy
React implementation in Python 3, which runs on the client-side.
https://github.com/rudreshveerkhare/reactpy
brython pypi-package python3 react react-fiber scratch-implementation webdevelopment
Last synced: 3 months ago
JSON representation
React implementation in Python 3, which runs on the client-side.
- Host: GitHub
- URL: https://github.com/rudreshveerkhare/reactpy
- Owner: RudreshVeerkhare
- License: mit
- Created: 2022-01-15T08:28:54.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-03-29T06:23:59.000Z (over 3 years ago)
- Last Synced: 2025-03-29T06:11:21.793Z (6 months ago)
- Topics: brython, pypi-package, python3, react, react-fiber, scratch-implementation, webdevelopment
- Language: Python
- Homepage:
- Size: 17.3 MB
- Stars: 28
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
README
# ReactPy
**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.
## Getting Started
Creating a ReactPy app is very simple and the process in very much inspired from ReactJS.
### Installation
ReactPy has a PyPI package
```
pip install ReactPy
```
### Setting Up
Once ReactPy is installed, then to setup boiler plate -
1. Create an empty folder for your application.
2. Then run the following command to Initialize ReactPy
```sh
python3 -m ReactPy --init
```
### Setup live reload server
ReactPy comes with a simple live reload development server, to use start it -
```sh
python3 -m ReactPy --serve
```
This will start a development server at http://127.0.0.1:5500/
### Create a deployment build
To create a deployment build of your application -
```sh
python3 -m ReactPy --build
```
This 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.
### Syntax Highlighting
To 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.
## Examples
Todo List using ReactPy - [https://react-py-todo.netlify.app/](https://react-py-todo.netlify.app/)
### Passing Props
```python
import ReactPy
from browser import document
def Greetings(props):
return
Hi, {" " + props["name"]}
element =
ReactPy.render(element, document.getElementById("root"))
```
### Counter
```python
import ReactPy
from browser import document
def Counter(props):
count, setCount = ReactPy.useState(0)
return
Count :{count}
+
-
element =
ReactPy.render(element, document.getElementById("root"))
```
### Timer
```python
import ReactPy
from browser import document
from browser.timer import set_interval, clear_interval
def Timer(props):
seconds, setSeconds = ReactPy.useState(props["timelimit"])
running, setRunning = ReactPy.useState(False)
if seconds < 1:
setRunning(False)
def _tick():
setSeconds(lambda s: s - 1)
def __effect():
if running:
print("Set Interval")
__interval = set_interval(_tick, 1000)
return lambda: clear_interval(__interval)
ReactPy.useEffect(__effect, [running])
color = "red" if not running else "blue"
return
Seconds : {seconds}
Start / Stop
element =
ReactPy.render(element, document.getElementById("root"))
```
### Live Input
```python
import ReactPy
from browser import document
def LiveInput(props):
value, setValue = ReactPy.useState("")
return
{value}
element =
ReactPy.render(element, document.getElementById("root"))
```
### API Call
```python
import ReactPy
from ReactPy.utils import lmap
from browser import document
from browser.ajax import get
def UserCard(props):
return
{props["name"]}
email: {" " + props["email"]}
website: {" " + props["website"]}
def UserList(props):
users, setUsers = ReactPy.useState([])
def __effect():
def _on_complete(res):
print(res.json)
setUsers(res.json)
get("https://jsonplaceholder.typicode.com/users", oncomplete = _on_complete)
ReactPy.useEffect(__effect, [])
return
{lmap(
lambda x: ,
users
) if len(users) > 0 else Loading...
}
element =
print(element)
ReactPy.render(element, document.getElementById("root"))
```
## Contributions
Check [Contribution.md]() for Detailed Information.
## Note
This project is still in beta, so if you find any bugs please raise an issue.