Components

Components are the building blocks of PyReact applications. They are reusable pieces of UI that can manage their own state and props.

Component Types

PyReact supports two types of components:

  1. Function Components - Simple components defined as functions

  2. Class Components - Complex components with state and lifecycle methods

Function Components

Function components are simple and concise:

from pyreact import element

def Greeting(props):
    name = props.get('name', 'World')
    return element('h1', {}, f'Hello, {name}!')

# Usage
element(Greeting, {'name': 'PyReact'})

Class Components

Class components offer more features:

from pyreact import element, Component

class Counter(Component):
    def __init__(self, props):
        super().__init__(props)
        self.state = {'count': 0}

    def increment(self, event):
        self.setState({'count': self.state['count'] + 1})

    def render(self):
        return element('div', {},
            element('p', {}, f'Count: {self.state["count"]}'),
            element('button', {'onClick': self.increment}, 'Increment')
        )

Component Lifecycle

Class components have lifecycle methods:

class MyComponent(Component):
    def component_did_mount(self):
        """Called after the component is mounted"""
        print('Component mounted')

    def component_did_update(self, prev_props, prev_state):
        """Called after the component updates"""
        print('Component updated')

    def component_will_unmount(self):
        """Called before the component is unmounted"""
        print('Component will unmount')

    def render(self):
        return element('div', {}, 'My Component')

Component Composition

Components can be composed together:

def Header(props):
    return element('header', {},
        element('h1', {}, props['title'])
    )

def Footer(props):
    return element('footer', {},
        element('p', {}, props['text'])
    )

def App(props):
    return element('div', {},
        element(Header, {'title': 'My App'}),
        element('main', {}, 'Content goes here'),
        element(Footer, {'text': '© 2026'})
    )

Best Practices

  1. Keep components small - Each component should do one thing well

  2. Use meaningful names - Component names should be descriptive

  3. Reuse components - Create reusable components for common patterns

  4. Lift state up - Share state between components by lifting it to their common ancestor

Next Steps