Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/reactive-python/reactpy-django
It's React, but in Python. Now with Django integration.
https://github.com/reactive-python/reactpy-django
django html python react reactjs reactpy
Last synced: 7 days ago
JSON representation
It's React, but in Python. Now with Django integration.
- Host: GitHub
- URL: https://github.com/reactive-python/reactpy-django
- Owner: reactive-python
- License: mit
- Created: 2021-05-16T20:45:39.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-09-24T08:34:12.000Z (24 days ago)
- Last Synced: 2024-10-07T09:35:06.923Z (11 days ago)
- Topics: django, html, python, react, reactjs, reactpy
- Language: Python
- Homepage: https://reactive-python.github.io/reactpy-django/
- Size: 3.48 MB
- Stars: 327
- Watchers: 10
- Forks: 18
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
- stars - reactive-python/reactpy-django - It's React, but in Python. Now with Django integration. (Python)
- stars - reactive-python/reactpy-django - It's React, but in Python. Now with Django integration. (Python)
README
# 
ReactPy-Django
[ReactPy-Django](https://github.com/reactive-python/reactpy-django) is used to add [ReactPy](https://reactpy.dev/) support to an existing **Django project**. This package also turbocharges ReactPy with features such as...
- [SEO compatible rendering](https://reactive-python.github.io/reactpy-django/latest/reference/settings/#reactpy_prerender)
- [Client-Side Python components](https://reactive-python.github.io/reactpy-django/latest/reference/template-tag/#pyscript-component)
- [Single page application (SPA) capabilities](https://reactive-python.github.io/reactpy-django/latest/reference/router/#django-router)
- [Distributed computing](https://reactive-python.github.io/reactpy-django/latest/reference/settings/#reactpy_default_hosts)
- [Performance enhancements](https://reactive-python.github.io/reactpy-django/latest/reference/settings/#performance-settings)
- [Customizable reconnection behavior](https://reactive-python.github.io/reactpy-django/latest/reference/settings/#stability-settings)
- [Customizable disconnection behavior](https://reactive-python.github.io/reactpy-django/latest/reference/template-tag)
- [Multiple root components](https://reactive-python.github.io/reactpy-django/latest/reference/template-tag/)
- [Cross-process communication/signaling (Channel Layers)](https://reactive-python.github.io/reactpy-django/latest/reference/hooks/#use-channel-layer)
- [Django view to ReactPy component conversion](https://reactive-python.github.io/reactpy-django/latest/reference/components/#view-to-component)
- [Django static file access](https://reactive-python.github.io/reactpy-django/latest/reference/components/#django-css)
- [Django database access](https://reactive-python.github.io/reactpy-django/latest/reference/hooks/#use-query)
## What is ReactPy?
[ReactPy](https://reactpy.dev/) is a library for building user interfaces in Python without Javascript. ReactPy interfaces are made from components that look and behave similar to those found in [ReactJS](https://reactjs.org/). Designed with simplicity in mind, ReactPy can be used by those without web development experience while also being powerful enough to grow with your ambitions.
Supported Backends
Built-in
External
Flask, FastAPI, Sanic, Tornado
Django,
Jupyter,
Plotly-Dash
# At a Glance
## `my_app/components.py`
You will need a file to define your [ReactPy](https://github.com/reactive-python/reactpy) components. We recommend creating a `components.py` file within your chosen **Django app** to start out. Within this file, we will create a simple `hello_world` component.
```python
from reactpy import component, html
@component
def hello_world(recipient: str):
return html.h1(f"Hello {recipient}!")
```
## [`my_app/templates/my_template.html`](https://docs.djangoproject.com/en/dev/topics/templates/)
In your **Django app**'s HTML template, you can now embed your ReactPy component using the `component` template tag. Within this tag, you will need to type in the dotted path to the component.
Additionally, you can pass in `args` and `kwargs` into your component function. After reading the code below, pay attention to how the function definition for `hello_world` (_from the previous example_) accepts a `recipient` argument.
```jinja
{% load reactpy %}
{% component "example_project.my_app.components.hello_world" recipient="World" %}
```
# Resources
Follow the links below to find out more about this project.
- [Try ReactPy (Jupyter Notebook)](https://mybinder.org/v2/gh/reactive-python/reactpy-jupyter/main?urlpath=lab/tree/notebooks/introduction.ipynb)
- [Documentation](https://reactive-python.github.io/reactpy-django)
- [GitHub Discussions](https://github.com/reactive-python/reactpy-django/discussions)
- [Discord](https://discord.gg/uNb5P4hA9X)
- [Contributor Guide](https://reactive-python.github.io/reactpy-django/latest/about/code/)
- [Code of Conduct](https://github.com/reactive-python/reactpy-django/blob/main/CODE_OF_CONDUCT.md)