A powerful transpiler that converts Python classes into React components, enabling developers to write React applications using Python syntax.
- Component Classes: Write React components as Python classes
- State Management: Automatic conversion of
self.stateto ReactuseStatehooks - Event Handling: Convert Python methods to JavaScript event handlers
- JSX-like Syntax: Use helper functions like
div(),h1(),button()for elements - F-string Support: Python f-strings become JavaScript template literals
- HTML Generation: Complete HTML pages with working React components
No external dependencies required! PyReact uses only Python standard library modules.
git clone <repository-url>
cd pyreactfrom pyreact import Component, div, h1, button
class Counter(Component):
def __init__(self, props=None):
super().__init__(props)
self.state = {'count': 0}
def increment(self):
self.set_state({'count': self.state['count'] + 1})
def render(self):
return div(
h1(f"Count: {self.state['count']}"),
button("Increment", onclick=self.increment)
)from pyreact import PyReactTranspiler
transpiler = PyReactTranspiler()
js_code = transpiler.transpile_component(Counter)
print(js_code)# Generate a complete HTML page
html_file = transpiler.save_html_demo(
components=['Counter'],
filename="demo.html",
title="My PyReact App"
)class Counter(Component):
def __init__(self, props=None):
super().__init__(props)
self.state = {'count': 0}
def increment(self):
self.set_state({'count': self.state['count'] + 1})
def decrement(self):
self.set_state({'count': self.state['count'] - 1})
def render(self):
return div(
h1(f"Count: {self.state['count']}"),
button("Increment", onclick=self.increment),
button("Decrement", onclick=self.decrement)
)class Greeting(Component):
def __init__(self, props=None):
super().__init__(props)
self.state = {'name': 'World'}
def render(self):
name = self.props.get('name', self.state['name'])
return div(
h2(f"Hello, {name}!"),
p("Welcome to PyReact!")
)PyReact provides helper functions for common HTML elements:
- Text Elements:
h1(),h2(),h3(),p(),span() - Layout:
div(),section(),header(),footer() - Interactive:
button(),input_field(),textarea(),select() - Lists:
ul(),ol(),li() - Forms:
form(),label(),option() - Media:
img(),a() - Utility:
br(),hr()
PyReact converts your Python components to modern React function components:
# Python
class Counter(Component):
def __init__(self, props=None):
super().__init__(props)
self.state = {'count': 0}
def increment(self):
self.set_state({'count': self.state['count'] + 1})
def render(self):
return div(h1(f"Count: {self.state['count']}"))// Generated JavaScript
function Counter(props) {
const [state, setState] = React.useState({count: 0});
const increment = () => {
setState(prevState => ({...prevState, count: prevState.count + 1}));
};
return React.createElement('div', null, [
React.createElement('h1', null, [`Count: ${state.count}`])
]);
}python3 example.pyThis will:
- Transpile three example components (Counter, Greeting, ClickTracker)
- Generate JavaScript code
- Create a complete HTML demo page (
pyreact_demo.html) - Open the HTML file in your browser to see working React components!
Main transpiler class:
transpiler = PyReactTranspiler()
# Transpile a single component
js_code = transpiler.transpile_component(MyComponent)
# Get all transpiled JavaScript
complete_js = transpiler.generate_complete_js()
# Generate HTML demo page
html_content = transpiler.generate_html_page(['Component1', 'Component2'])
# Save HTML demo to file
filename = transpiler.save_html_demo(['MyComponent'], 'demo.html')class MyComponent(Component):
def __init__(self, props=None):
super().__init__(props)
self.state = {} # Initial state
def set_state(self, new_state):
# Updates component state (triggers re-render in React)
pass
def render(self):
# Must return an Element (created with helper functions)
return div("Hello World")- ✅ Component Classes with inheritance
- ✅ State Management (
self.state,self.set_state) - ✅ Event Handlers (
onclick,onchange, etc.) - ✅ Props access via
self.props - ✅ F-strings → Template literals
- ✅ Method Calls between components
- ✅ Nested Elements and composition
- ✅ HTML Generation with React integration
- Context API support
- Lifecycle methods (componentDidMount, etc.)
- Custom hooks equivalent
- Component composition patterns
- TypeScript output option
- Bundle optimization
- Source maps
- Error boundaries
MIT License - feel free to use in your projects!
Contributions welcome! This is a proof-of-concept that demonstrates Python-to-JavaScript transpilation for React-like components.
PyReact - Write React in Python! 🐍 ⚛️