Creating a Standalone React App

Overview¶

If you want to build a new app or website with React, we recommend starting with a standalone executor.

If your app has constraints not well-served by existing web frameworks, you prefer to build your own framework, or you just want to learn the basics of a React app, you can use ReactPy in standalone mode.

Using ReactPy for full-stack¶

ReactPy is a component library that helps you build a full-stack web application. For convenience, ReactPy is also bundled with several different standalone executors.

These standalone executors are the easiest way to get started with ReactPy, as they require no additional setup or configuration.

Running via ASGI SSR¶

ReactPy can run in server-side standalone mode, where both page loading and component rendering occurs on an ASGI server.

This executor is the most commonly used, as it provides maximum extensibility.

First, install ReactPy and your preferred ASGI webserver.

pip install reactpy[asgi] uvicorn[standard]

Next, create a new file called main.py containing the ASGI application:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

from reactpy import component, html
from reactpy.executors.asgi import ReactPy


@component
def hello_world():
    return html.div("Hello World")


my_app = ReactPy(hello_world)

Finally, use your webserver of choice to start ReactPy:

uvicorn main:my_app

Running via ASGI CSR¶

ReactPy can run in client-side standalone mode, where the initial page is served using the ASGI protocol. This is configuration allows direct execution of Javascript, but requires special considerations since all ReactPy component code is run on the browser via WebAssembly.

First, install ReactPy and your preferred ASGI webserver.

pip install reactpy[asgi] uvicorn[standard]

Next, create a new file called main.py containing the ASGI application, and a root.py file containing the root component:

1
2
3
4
5
6
7

from pathlib import Path

from reactpy.executors.asgi import ReactPyCsr

my_app = ReactPyCsr(
    Path(__file__).parent / "components" / "root.py", initial="Loading..."
)

1
2
3
4
5
6

from reactpy import component, html


@component
def root():
    return html.div("Hello World")

Finally, use your webserver of choice to start ReactPy:

uvicorn main:my_app

Running via WSGI SSR¶

Support for WSGI executors is coming in a future version.

Running via WSGI CSR¶

Support for WSGI executors is coming in a future version.