# ReactPy: Build ReactJS Interfaces in Pure Python

**URL:** <https://forum.djangoproject.com/t/reactpy-build-reactjs-interfaces-in-pure-python/19913>\
**Category:** Show & Tell\
**Created:** [March 30, 2023, 11:59pm UTC](https://forum.djangoproject.com/t/reactpy-build-reactjs-interfaces-in-pure-python/19913 "2023-03-30T23:59:59Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Archmonger](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/archmonger/32/4343_2.png) [@Archmonger](https://forum.djangoproject.com/u/Archmonger)\
**Post date:** [March 30, 2023, 11:59pm UTC](https://forum.djangoproject.com/t/reactpy-build-reactjs-interfaces-in-pure-python/19913/1 "2023-03-30T23:59:59Z")

</div>

[ReactPy Django](https://github.com/reactive-python/reactpy-django) is a library for building user interfaces in Python without Javascript. ReactPy interfaces are made from components which look and behave similar to those found in ReactJS.

Using our Django Template Tag, you can insert dynamically rendered Python components into your Django templates. Just like ReactJS, you use events and hooks to perform a variety of event-driven re-renders without ever reloading the page.

# At a Glance

## `my_app/components.py`

You will need a file to define your [ReactPy](https://github.com/reactive-python/reactpy) components. We recommend creating a `components.py` file within your chosen **Django app** to start out. Within this file, we will create a simple `hello_world` component.

```python
from reactpy import component, html

@component
def hello_world(recipient: str):
    return html.h1(f"Hello {recipient}!")

```

## [`my_app/templates/my-template.html`](https://docs.djangoproject.com/en/dev/topics/templates/)

In your **Django app** ’s HTML template, you can now embed your ReactPy component using the `component` template tag. Within this tag, you will need to type in your dotted path to the component function as the first argument.

Additionally, you can pass in `args` and `kwargs` into your component function. For example, after reading the code below, pay attention to how the function definition for `hello_world` (_in the previous example_) accepts a `recipient` argument.

```html
{% load reactpy %}
<!DOCTYPE html>
<html>
  <body>
    {% component "example_project.my_app.components.hello_world" recipient="World" %}
  </body>
</html>

```

---

<div class="post-metadata">

**Author:** ![baseplate-admin](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/baseplate-admin/32/10889_2.png) [@baseplate-admin](https://forum.djangoproject.com/u/baseplate-admin)\
**Post date:** [April 2, 2023, 3:59pm UTC](https://forum.djangoproject.com/t/reactpy-build-reactjs-interfaces-in-pure-python/19913/2 "2023-04-02T15:59:52Z")

</div>

Hi there,

The package looks neat. But do you guys have a live example of this package ( [the site](https://idom-docs.herokuapp.com/) mentioned in the [docs](https://hub.gke2.mybinder.org/user/reactive-python-reactpy-jupyter-nul20b1f/lab/tree/notebooks/introduction.ipynb) seems broken )

---

<div class="post-metadata">

**Author:** ![Archmonger](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/archmonger/32/4343_2.png) [@Archmonger](https://forum.djangoproject.com/u/Archmonger)\
**Post date:** [April 2, 2023, 6:40pm UTC](https://forum.djangoproject.com/t/reactpy-build-reactjs-interfaces-in-pure-python/19913/3 "2023-04-02T18:40:49Z")

</div>

The live examples in ReactPy core [have been broken](https://github.com/reactive-python/reactpy/discussions/960) for a few days as a consequence of our rename from `idom` to `reactpy`.