Quick Start

Create your first PyReact application in less than 5 minutes.

Create a New Project

Use the CLI to create a new project:

pyreact-framework create my-app
cd my-app

This creates a project structure:

my-app/
├── src/
│   ├── index.py          # Entry point
│   ├── components/       # Reusable components
│   └── styles/           # CSS files
├── pyproject.toml        # Project configuration
└── README.md

Start Development Server

Start the development server with hot reload:

pyreact-framework dev

The application will be available at http://localhost:3000.

Your First Component

Create a simple counter component:

src/components/Counter.py
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 decrement(self, event):
        self.setState({'count': self.state['count'] - 1})

    def render(self):
        return element('div', {'class': 'counter'},
            element('h2', {}, f'Count: {self.state["count"]}'),
            element('button', {'onClick': self.decrement}, '-'),
            element('button', {'onClick': self.increment}, '+')
        )

Use the Component

Import and use your component:

src/index.py
from pyreact import element, render
from components.Counter import Counter

def App():
    return element('div', {'class': 'app'},
        element('h1', {}, 'My First PyReact App'),
        element(Counter, {})
    )

render(App(), root='root')

Build for Production

Build your application for production:

pyreact-framework build

The build output will be in the dist/ directory.

Next Steps