Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: 2 months ago
JSON representation

It's React, but in Python. Now with Django integration.

Awesome Lists containing this project

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)