Skip to content

reactive-python/reactpy-django

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

41da464 · Sep 27, 2023
Sep 16, 2023
Sep 27, 2023
Aug 27, 2023
Sep 27, 2023
Sep 26, 2023
Aug 18, 2023
Aug 27, 2023
Sep 27, 2023
Jul 29, 2021
Sep 21, 2023
Mar 30, 2023
Sep 8, 2023
Sep 25, 2023
Aug 26, 2023
Aug 27, 2023
Feb 2, 2023
Aug 4, 2023
Sep 16, 2023

Repository files navigation

ReactPy Django

ReactPy-Django is used to add used to add ReactPy support to an existing Django project.

ReactPy 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. 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 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.

from reactpy import component, html

@component
def hello_world(recipient: str):
    return html.h1(f"Hello {recipient}!")

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.

{% load reactpy %}
<!DOCTYPE html>
<html>
  <body>
    {% component "example_project.my_app.components.hello_world" recipient="World" %}
  </body>
</html>

Resources

Follow the links below to find out more about this project.