Hybrid server-side LiveView with client-side React components
Mix server-side LiveView state with client-side React components
Managed server-side with LiveView
React component with client-side state
Server-rendered, client-hydrated components
Nested component composition
Server-managed data with React UI components
Styled notification components
Full source code for React integration
from djust import LiveView
class ReactDemoView(LiveView):
"""
React integration demo - showcases
React components within LiveView
"""
template_name = "demos/react.html"
def mount(self, request, **kwargs):
# Import React components
from . import react_components
self.server_count = 0
self.client_count = 0
self.todos = [
{'text': 'Try React integration',
'done': False},
{'text': 'Build amazing apps',
'done': False},
]
def increment_server(self):
"""Increment server-side counter"""
self.server_count += 1
def add_todo_item(self, text=""):
"""Add a new todo item"""
if text.strip():
self.todos.append({
'text': text,
'done': False
})from djust.react import ReactComponent
@ReactComponent.register
class Counter(ReactComponent):
"""Client-side counter component"""
props = ['initialCount', 'label']
def render(self):
return """
<div className="counter-widget">
<div className="counter-label">
{props.label}
</div>
<div className="counter-display">
{state.count}
</div>
</div>
"""
@ReactComponent.register
class Button(ReactComponent):
"""Reusable button component"""
props = ['variant', 'children']<!-- Server Counter (LiveView) -->
<div>
<h3>Server Count: {{ server_count }}</h3>
<button @click="increment_server">
Increment Server
</button>
</div>
<!-- Client Counter (React) -->
<Counter
initialCount="{{ client_count }}"
label="Client Count" />
<!-- React Buttons -->
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<!-- React Cards -->
<Card title="Welcome">
Server-rendered card with hydration
</Card>React components rendered to HTML on server using Rust
Components become interactive on client-side with React hydration
Mix server-side LiveView state with client-side React state