ReactPy Documentation

ReactPy is a library for building user interfaces in Python without needing JavaScript. It uses a component-based architecture similar to ReactJS. Key concepts include:

• Components: Reusable UI elements created using the @component decorator.
• Hooks: Special functions (starting with use, such as use_state()) that allow components to 'hook into' ReactPy capabilities like state management. Hooks must only be called during the rendering process.
• State: Managed via hooks like use_state(), which provides a state variable and a state setter to allow components to 'remember' information (like input values or shopping carts) and respond to user interactions.

ReactPy has several external packages for extended functionality:

• reactpy-router: Support for URL routing.
• reactpy-js-component-template: Template for creating Custom Javascript Components.
• reactpy-django: Integration for Django.
• reactpy-jupyter: Integration for Jupyter.

To run ReactPy in production, you must choose a backend implementation and configure it with a ReactPy view. The general pattern is to initialize your chosen backend's Application and then use the configure function from that backend to attach your component.

Example pattern:

from my_chosen_backend import Application
from reactpy import component, html
from reactpy.backend.my_chosen_backend import configure

@component
def HelloWorld():
    return html.h1("Hello, world!")

app = Application()
configure(app, HelloWorld)

You then run the resulting app using an ASGI or WSGI server from the command line.

To make UI elements interactive, assign a function to an event attribute (e.g., "onClick") within an element's properties dictionary. You can define handlers inside your component to access local scope, or use lambda functions for simple logic.

Note: print() statements in handlers will appear in the terminal where the ReactPy server is running, not in the browser console.

ReactPy allows you to construct HTML interfaces directly in Python using the reactpy.html module. You can nest HTML elements (like div, h1, ul, li) to recreate standard HTML structures.

from reactpy import html

html.div(
    html.h1("My Todo List"),
    html.ul(
        html.li("Design a cool new app"),
        html.li("Build it"),
        html.li("Share it with the world!"),
    )
)

To automatically enforce the Rules of Hooks in your development workflow, you can install the flake8-reactpy-hooks plugin. This plugin will catch common mistakes like using hooks inside conditional statements or calling them outside of component/hook definitions when running flake8.

pip install flake8-reactpy-hooks