Element API

The element() function is the core building block of PyReact. It creates virtual DOM elements.

Function Signature

element(type, props={}, *children)

Creates a virtual DOM element.

Parâmetros:

  • type (str | Component | Fragment) – The type of element. Can be: - A string (HTML tag name like ‘div’, ‘span’, ‘h1’) - A component class or function - A fragment (Fragment)

  • props (dict, optional) – Properties/attributes for the element

  • children (element | str | list) – Child elements

Retorna:

A virtual DOM element

Tipo de retorno:

Element

Basic Usage

Create HTML elements:

from pyreact import element

# Simple element
element('div')

# Element with props
element('div', {'class': 'container', 'id': 'main'})

# Element with children
element('div', {},
    element('h1', {}, 'Title'),
    element('p', {}, 'Paragraph')
)

HTML Elements

Create standard HTML elements:

# Text content
element('h1', {}, 'Hello World')
element('p', {}, 'This is a paragraph')

# Attributes
element('input', {'type': 'text', 'placeholder': 'Enter name'})
element('a', {'href': 'https://example.com', 'target': '_blank'}, 'Link')

# Styles
element('div', {
    'style': {
        'backgroundColor': 'red',
        'padding': '10px'
    }
})

Component Elements

Create component instances:

from pyreact import element
from my_components import Button, Card

# Function component
element(Button, {'text': 'Click me', 'onClick': handle_click})

# Class component
element(Card, {'title': 'My Card'},
    element('p', {}, 'Card content')
)

Fragments

Group elements without adding extra DOM nodes:

from pyreact import element, Fragment

def ListItem(props):
    return element(Fragment, {},
        element('dt', {}, props['term']),
        element('dd', {}, props['definition'])
    )

Children

Pass children in different ways:

# As positional arguments
element('div', {},
    element('p', {}, 'First'),
    element('p', {}, 'Second')
)

# As a list
children = [
    element('p', {}, 'First'),
    element('p', {}, 'Second')
]
element('div', {}, *children)

# Mixed
element('ul', {'class': 'list'},
    *[element('li', {}, f'Item {i}') for i in range(5)]
)

Special Props

Key

Unique identifier for list items:

element('ul', {},
    *[element('li', {'key': item['id']}, item['text'])
      for item in items]
)

Ref

Reference to DOM element:

from pyreact import create_ref

class MyComponent(Component):
    def __init__(self, props):
        super().__init__(props)
        self.input_ref = create_ref()

    def focus_input(self):
        self.input_ref.current.focus()

    def render(self):
        return element('input', {'ref': self.input_ref})

Style

Inline styles:

element('div', {
    'style': {
        'color': 'red',
        'fontSize': '16px',  # camelCase
        'marginTop': '10px'
    }
})

className

CSS class names:

element('div', {'class': 'container active'})

# Multiple classes
element('div', {'class': 'btn btn-primary btn-large'})

dangerouslySetInnerHTML

Insert raw HTML (use with caution):

element('div', {
    'dangerouslySetInnerHTML': {'__html': '<strong>Bold</strong>'}
})

Event Handlers

Attach event handlers:

element('button', {
    'onClick': lambda e: print('Clicked'),
    'onMouseEnter': lambda e: print('Mouse entered'),
    'onFocus': lambda e: print('Focused')
})

Boolean Attributes

Boolean attributes:

element('input', {
    'type': 'checkbox',
    'checked': True,  # checked
    'disabled': False  # not disabled
})

Data Attributes

Custom data attributes:

element('div', {
    'data-id': '123',
    'data-type': 'user',
    'data-active': 'true'
})

Best Practices

  1. Always use keys for lists - Helps PyReact identify which items changed

  2. Use fragments for grouped content - Avoid unnecessary wrapper divs

  3. Extract repeated elements - Create components for repeated patterns

  4. Keep props simple - Don’t pass complex logic in props

Next Steps