Skip to content

Your first app

Install the package, initialize an app and enter its folder:

pyreact-forge init counter-app
cd counter-app

Replace app.py with this complete example:

from pyreact_forge import component, html, use_state

@component
def App():
    count, set_count = use_state(0)
    return html.main(
        html.h1("My Python front end"),
        html.p(f"Count: {count}"),
        html.button(
            "Add one",
            on_click=lambda: set_count(lambda previous: previous + 1),
        ),
    )

Keep forge.json simple:

{"entry":"app:App","title":"Python counter","packages":[]}

Run pyreact-forge dev and open the printed URL. Clicking the button updates the count without navigating or asking a Python application server to process it.

Read the example

  1. @component creates a reusable React component type from a Python function.
  2. use_state(0) returns the current value and a setter.
  3. html.main, html.p and html.button create element descriptions.
  4. on_click becomes React's onClick prop.
  5. The functional updater calculates the next value from the latest queued state.

You do not call mount in this app.py: the CLI bootstrap mounts the component identified by entry. Manually mounting is reserved for custom integrations.

Add styles

Put this in styles.css:

body { margin: 0; background: #f4f7f1; font: 18px system-ui; }
main { max-width: 600px; margin: 80px auto; padding: 24px; }
button { border: 0; border-radius: 10px; padding: 12px 20px;
         background: #244c37; color: white; cursor: pointer; }

The development server reloads the page after source changes. This alpha does not preserve component state across development reloads.

Continue with components and props or the complete task-app tutorial.