# <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 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)
- [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.
<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/dev/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": "https://github.com/reactive-python/reactpy-django",
"name": "reactpy-django",
"maintainer": "",
"docs_url": null,
"requires_python": ">=3.9",
"maintainer_email": "",
"keywords": "interactive,reactive,widgets,DOM,React,ReactJS,ReactPy",
"author": "Mark Bakhit",
"author_email": "archiethemonger@gmail.com",
"download_url": "https://files.pythonhosted.org/packages/83/2c/b736050fb84c85503f62d98bd43bd257e49b0c207f8ba514bc0014337e1c/reactpy_django-3.8.0.tar.gz",
"platform": "Linux",
"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 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- [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 (Channel Layers)](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/dev/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": "3.8.0",
"project_urls": {
"Homepage": "https://github.com/reactive-python/reactpy-django"
},
"split_keywords": [
"interactive",
"reactive",
"widgets",
"dom",
"react",
"reactjs",
"reactpy"
],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "f5f100a7272e9fbf8bb937f3040085570dc08cb8afffc53ed6b33608fa1a5395",
"md5": "73c3c24ec0df947c09170447ed981edf",
"sha256": "757b15c8c80d8b98a8d93bdc2fd8dcc839c023c79a06441eaea2a816631fd1c1"
},
"downloads": -1,
"filename": "reactpy_django-3.8.0-py2.py3-none-any.whl",
"has_sig": false,
"md5_digest": "73c3c24ec0df947c09170447ed981edf",
"packagetype": "bdist_wheel",
"python_version": "py2.py3",
"requires_python": ">=3.9",
"size": 98932,
"upload_time": "2024-02-21T01:55:26",
"upload_time_iso_8601": "2024-02-21T01:55:26.153910Z",
"url": "https://files.pythonhosted.org/packages/f5/f1/00a7272e9fbf8bb937f3040085570dc08cb8afffc53ed6b33608fa1a5395/reactpy_django-3.8.0-py2.py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "832cb736050fb84c85503f62d98bd43bd257e49b0c207f8ba514bc0014337e1c",
"md5": "5d26d8e2e5864f131d01322abcd541b7",
"sha256": "1a14a50cff69f3ad9acd11b4c634581791d272c772eb2b8b827b790879efa6b7"
},
"downloads": -1,
"filename": "reactpy_django-3.8.0.tar.gz",
"has_sig": false,
"md5_digest": "5d26d8e2e5864f131d01322abcd541b7",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.9",
"size": 89966,
"upload_time": "2024-02-21T01:55:28",
"upload_time_iso_8601": "2024-02-21T01:55:28.058869Z",
"url": "https://files.pythonhosted.org/packages/83/2c/b736050fb84c85503f62d98bd43bd257e49b0c207f8ba514bc0014337e1c/reactpy_django-3.8.0.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2024-02-21 01:55:28",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "reactive-python",
"github_project": "reactpy-django",
"travis_ci": false,
"coveralls": false,
"github_actions": true,
"requirements": [],
"lcname": "reactpy-django"
}
JSON
