Skip to content

Create a Component

Overview

You can let ReactPy know what functions are components by using the @component decorator.

Declaring a function as a root component

You will need a file to start creating ReactPy components.

We recommend creating a components.py file within your chosen Django app to start out. For this example, the file path will look like this: ./example_project/my_app/components.py.

Within this file, you can define your component functions and then add ReactPy's @component decorator.

1
2
3
4
5
from reactpy import component, html

@component
def hello_world(recipient: str):
    return html.h1(f"Hello {recipient}!")
What should I name my ReactPy files and functions?

You have full freedom in naming/placement of your files and functions.

We recommend creating a components.py for small Django apps. If your app has a lot of components, you should consider breaking them apart into individual modules such as components/navbar.py.

Ultimately, components are referenced by Python dotted path in my-template.html (see next step). So, at minimum your component path needs to be valid to Python's importlib.

What does the decorator actually do?

While not all components need to be decorated, there are a few features this decorator adds to your components.

  1. The ability to be used as a root component.
    • The decorator is required for any component that you want to reference in your Django templates (see next step).
  2. The ability to use hooks.
    • The decorator is required on any component where hooks are defined.
  3. Scoped failures.
    • If a decorated component generates an exception, then only that one component will fail to render.
Last update: August 26, 2023
Authors: Mark Bakhit