✨ Announcing our seed funding led by Lux Capital! Read more about it on our blog ✨
[ Learn ]
[ Concepts ]
[ Reference ]
Components
Components are the building blocks of Reflex's frontend.
They let you split the UI into independent, reusable pieces, and let you think about each piece in isolation.
Reflex components wrap React components behind the scenes, enabling a pure Python development experience.
Components are created with Python functions. They are configured with keyword arguments, called props, and can be nested to create complex UIs.
Component Basics
Components are made up of children and props.
Children
- Text or other Reflex components nested inside a component.
- Passed as positional arguments.
Props
- Attributes that affect the behavior and appearance of a component.
- Passed as keyword arguments.
Children
- Text or other Reflex components nested inside a component.
- Passed as positional arguments.
Props
- Attributes that affect the behavior and appearance of a component.
- Passed as keyword arguments.
Let's take a look at the
rx.text component.Hello World!
rx.text("Hello World!", color="blue", font_size="1.5em")Here
"Hello World!" is the child text to display, while color and font_size are props that modify the appearance of the text.Regular Python data types can be passed in as children to components.
This is useful for passing in text, numbers, and other simple data types.
Another Example
Now let's take a look at a more complex component, which has other components nested inside it. The
rx.hstack component is a container that arranges its children horizontally.50
∞
rx.hstack(
# Static 50% progress
rx.circular_progress(
rx.circular_progress_label("50", color="green"),
value=50,
),
# "Spinning" progress
rx.circular_progress(
rx.circular_progress_label(
"∞", color="rgb(107,99,246)"
),
is_indeterminate=True,
),
)Some props are specific to a component. For example, the
value prop of the rx.circular_progress component controls the progress bar's value. Styling props like
color are shared across many components. You can find all the props for a component by checking its documentation page in the component library.
Pages
Reflex apps are organized into pages. Pages link a specific URL route to a component.
You can create a page by defining a function that returns a component. By default, the function name will be used as the path, but you can also specify a path explicitly.
def index():
return rx.text("Root Page")
def about():
return rx.text("About Page")
app = rx.App()
app.add_page(index, route="/")
app.add_page(about, route="/about")In this example we add a page called
index at the root route. If you're running in dev mode, you can access it at http://localhost:3000. Similarly, the
about page will be available at http://localhost:3000/about.
Copyright © 2023 Pynecone, Inc.