# <img src="https://raw.githubusercontent.com/reactive-python/reactpy/main/branding/svg/reactpy-logo-square.svg" align="left" height="45"/> ReactPy-Django
<p>
<a href="https://github.com/reactive-python/reactpy-django/actions?query=workflow%3ATest">
<img src="https://github.com/reactive-python/reactpy-django/workflows/Test/badge.svg?event=push">
</a>
<a href="https://pypi.python.org/pypi/reactpy-django">
<img src="https://img.shields.io/pypi/v/reactpy-django.svg?label=PyPI">
</a>
<a href="https://github.com/reactive-python/reactpy-django/blob/main/LICENSE.md">
<img src="https://img.shields.io/badge/License-MIT-purple.svg">
</a>
<a href="https://reactive-python.github.io/reactpy-django/">
<img src="https://img.shields.io/website?down_message=offline&label=Docs&logo=read%20the%20docs&logoColor=white&up_message=online&url=https%3A%2F%2Freactive-python.github.io%2Freactpy-django%2F">
</a>
<a href="https://discord.gg/uNb5P4hA9X">
<img src="https://img.shields.io/discord/1111078259854168116?label=Discord&logo=discord">
</a>
</p>
[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](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.
<table align="center">
<thead>
<tr>
<th colspan="2" style="text-align: center">Supported Backends</th>
<tr>
<th style="text-align: center">Built-in</th>
<th style="text-align: center">External</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="https://reactpy.dev/docs/guides/getting-started/installing-reactpy.html#officially-supported-servers">
Flask, FastAPI, Sanic, Tornado
</a>
</td>
<td>
<a href="https://github.com/reactive-python/reactpy-django">Django</a>,
<a href="https://github.com/reactive-python/reactpy-jupyter">Jupyter</a>,
<a href="https://github.com/idom-team/idom-dash">Plotly-Dash</a>
</td>
</tr>
</tbody>
</table>
# At a Glance
## `my_app/components.py`
<!--py-header-start-->
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.
<!--py-header-end-->
<!--py-code-start-->
```python
from reactpy import component, html
@component
def hello_world(recipient: str):
return html.h1(f"Hello {recipient}!")
```
<!--py-code-end-->
## [`my_app/templates/my_template.html`](https://docs.djangoproject.com/en/stable/topics/templates/)
<!--html-header-start-->
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.
<!--html-code-start-->
```jinja
{% load reactpy %}
<!DOCTYPE html>
<html>
<body>
{% component "example_project.my_app.components.hello_world" recipient="World" %}
</body>
</html>
```
<!--html-code-end-->
# 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)
Raw data
{
"_id": null,
"home_page": null,
"name": "reactpy_django",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.9",
"maintainer_email": null,
"keywords": "React, ReactJS, ReactPy, asgi, components, django, http, interactive, reactive, server",
"author": null,
"author_email": "Mark Bakhit <archiethemonger@gmail.com>",
"download_url": "https://files.pythonhosted.org/packages/8c/06/1d8f274389aa0cefba60ab4ecec310719381a9000821af987b217829968c/reactpy_django-5.1.1.tar.gz",
"platform": null,
"description": "# <img src=\"https://raw.githubusercontent.com/reactive-python/reactpy/main/branding/svg/reactpy-logo-square.svg\" align=\"left\" height=\"45\"/> ReactPy-Django\n\n<p>\n <a href=\"https://github.com/reactive-python/reactpy-django/actions?query=workflow%3ATest\">\n <img src=\"https://github.com/reactive-python/reactpy-django/workflows/Test/badge.svg?event=push\">\n </a>\n <a href=\"https://pypi.python.org/pypi/reactpy-django\">\n <img src=\"https://img.shields.io/pypi/v/reactpy-django.svg?label=PyPI\">\n </a>\n <a href=\"https://github.com/reactive-python/reactpy-django/blob/main/LICENSE.md\">\n <img src=\"https://img.shields.io/badge/License-MIT-purple.svg\">\n </a>\n <a href=\"https://reactive-python.github.io/reactpy-django/\">\n <img src=\"https://img.shields.io/website?down_message=offline&label=Docs&logo=read%20the%20docs&logoColor=white&up_message=online&url=https%3A%2F%2Freactive-python.github.io%2Freactpy-django%2F\">\n </a>\n <a href=\"https://discord.gg/uNb5P4hA9X\">\n <img src=\"https://img.shields.io/discord/1111078259854168116?label=Discord&logo=discord\">\n </a>\n</p>\n\n[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...\n\n- [SEO compatible rendering](https://reactive-python.github.io/reactpy-django/latest/reference/settings/#reactpy_prerender)\n- [Client-Side Python components](https://reactive-python.github.io/reactpy-django/latest/reference/template-tag/#pyscript-component)\n- [Single page application (SPA) capabilities](https://reactive-python.github.io/reactpy-django/latest/reference/router/#django-router)\n- [Distributed computing](https://reactive-python.github.io/reactpy-django/latest/reference/settings/#reactpy_default_hosts)\n- [Performance enhancements](https://reactive-python.github.io/reactpy-django/latest/reference/settings/#performance-settings)\n- [Customizable reconnection behavior](https://reactive-python.github.io/reactpy-django/latest/reference/settings/#stability-settings)\n- [Customizable disconnection behavior](https://reactive-python.github.io/reactpy-django/latest/reference/template-tag)\n- [Multiple root components](https://reactive-python.github.io/reactpy-django/latest/reference/template-tag/)\n- [Cross-process communication/signaling](https://reactive-python.github.io/reactpy-django/latest/reference/hooks/#use-channel-layer)\n- [Django view to ReactPy component conversion](https://reactive-python.github.io/reactpy-django/latest/reference/components/#view-to-component)\n- [Django static file access](https://reactive-python.github.io/reactpy-django/latest/reference/components/#django-css)\n- [Django database access](https://reactive-python.github.io/reactpy-django/latest/reference/hooks/#use-query)\n\n## What is ReactPy?\n\n[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.\n\n<table align=\"center\">\n <thead>\n <tr>\n <th colspan=\"2\" style=\"text-align: center\">Supported Backends</th>\n <tr>\n <th style=\"text-align: center\">Built-in</th>\n <th style=\"text-align: center\">External</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>\n <a href=\"https://reactpy.dev/docs/guides/getting-started/installing-reactpy.html#officially-supported-servers\">\n Flask, FastAPI, Sanic, Tornado\n </a>\n </td>\n <td>\n <a href=\"https://github.com/reactive-python/reactpy-django\">Django</a>,\n <a href=\"https://github.com/reactive-python/reactpy-jupyter\">Jupyter</a>,\n <a href=\"https://github.com/idom-team/idom-dash\">Plotly-Dash</a>\n </td>\n </tr>\n </tbody>\n</table>\n\n# At a Glance\n\n## `my_app/components.py`\n\n<!--py-header-start-->\n\nYou 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.\n\n<!--py-header-end-->\n<!--py-code-start-->\n\n```python\nfrom reactpy import component, html\n\n@component\ndef hello_world(recipient: str):\n return html.h1(f\"Hello {recipient}!\")\n```\n\n<!--py-code-end-->\n\n## [`my_app/templates/my_template.html`](https://docs.djangoproject.com/en/stable/topics/templates/)\n\n<!--html-header-start-->\n\nIn 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.\n\nAdditionally, 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.\n\n<!--html-code-start-->\n\n```jinja\n{% load reactpy %}\n<!DOCTYPE html>\n<html>\n <body>\n {% component \"example_project.my_app.components.hello_world\" recipient=\"World\" %}\n </body>\n</html>\n```\n\n<!--html-code-end-->\n\n# Resources\n\nFollow the links below to find out more about this project.\n\n- [Try ReactPy (Jupyter Notebook)](https://mybinder.org/v2/gh/reactive-python/reactpy-jupyter/main?urlpath=lab/tree/notebooks/introduction.ipynb)\n- [Documentation](https://reactive-python.github.io/reactpy-django)\n- [GitHub Discussions](https://github.com/reactive-python/reactpy-django/discussions)\n- [Discord](https://discord.gg/uNb5P4hA9X)\n- [Contributor Guide](https://reactive-python.github.io/reactpy-django/latest/about/code/)\n- [Code of Conduct](https://github.com/reactive-python/reactpy-django/blob/main/CODE_OF_CONDUCT.md)\n",
"bugtrack_url": null,
"license": "MIT",
"summary": "It's React, but in Python. Now with Django integration.",
"version": "5.1.1",
"project_urls": {
"Changelog": "https://reactive-python.github.io/reactpy-django/latest/about/changelog/",
"Documentation": "https://reactive-python.github.io/reactpy-django/",
"Source": "https://github.com/reactive-python/reactpy-django"
},
"split_keywords": [
"react",
" reactjs",
" reactpy",
" asgi",
" components",
" django",
" http",
" interactive",
" reactive",
" server"
],
"urls": [
{
"comment_text": null,
"digests": {
"blake2b_256": "c7f4ef0852a85006f0562fbd72f339c857aebb6e447d0c936c425fdcb0db10fa",
"md5": "2a3226c1efa7c76ae41bda6995927d93",
"sha256": "5afddaeefc9678523948471ec78fbc8109ec8ff405bd81ab5932d953f8ec258b"
},
"downloads": -1,
"filename": "reactpy_django-5.1.1-py3-none-any.whl",
"has_sig": false,
"md5_digest": "2a3226c1efa7c76ae41bda6995927d93",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.9",
"size": 1513504,
"upload_time": "2024-12-02T10:26:44",
"upload_time_iso_8601": "2024-12-02T10:26:44.282643Z",
"url": "https://files.pythonhosted.org/packages/c7/f4/ef0852a85006f0562fbd72f339c857aebb6e447d0c936c425fdcb0db10fa/reactpy_django-5.1.1-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": null,
"digests": {
"blake2b_256": "8c061d8f274389aa0cefba60ab4ecec310719381a9000821af987b217829968c",
"md5": "48e4f29911f216688aeedba843dbb447",
"sha256": "869aa22772ebf8320a3b999b3fed7ffbeb7d706bf7389bb557318fdb0081c695"
},
"downloads": -1,
"filename": "reactpy_django-5.1.1.tar.gz",
"has_sig": false,
"md5_digest": "48e4f29911f216688aeedba843dbb447",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.9",
"size": 6828726,
"upload_time": "2024-12-02T10:26:46",
"upload_time_iso_8601": "2024-12-02T10:26:46.517971Z",
"url": "https://files.pythonhosted.org/packages/8c/06/1d8f274389aa0cefba60ab4ecec310719381a9000821af987b217829968c/reactpy_django-5.1.1.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2024-12-02 10:26:46",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "reactive-python",
"github_project": "reactpy-django",
"travis_ci": false,
"coveralls": false,
"github_actions": true,
"lcname": "reactpy_django"
}
JSON
