<SYSTEM_TASK:>
Given the following text description, write Python code to implement the functionality described below step by step
<END_TASK>
<USER_TASK:>
Description:
 Tutorial for flexx.ui - creating widgets and user interfaces
Step1:  Displaying widgets
Widgets can be inserted into the notebook by making them a cell output
Step2:  Widgets have many input signals to modify their appearance and behavior
Step3:  Layout
Layout is done using special layout widgets, and written in a structured way using the with statement
Step4:  React
Defining reactions is easy
Step5:  Compound widgets
The above quickly gets messy. You can better create new widgets by wrapping together other widgets
Step6:  Reactions in JS
If you want reactions to be handled in JS, use a JS nested class
<ASSISTANT_TASK:>
Python Code:
from flexx import app, ui, react
app.init_notebook()
Explanation: Tutorial for flexx.ui - creating widgets and user interfaces
End of explanation
b = ui.Button(text='foo')
b
Explanation: Displaying widgets
Widgets can be inserted into the notebook by making them a cell output:
End of explanation
b.text('Push me!')
Explanation: Widgets have many input signals to modify their appearance and behavior:
End of explanation
with ui.HBox() as hbox:
    slider = ui.Slider(flex=0)
    label = ui.Label(flex=1, text='xx')
hbox
Explanation: Layout
Layout is done using special layout widgets, and written in a structured way using the with statement:
End of explanation
@react.connect('slider.value')
def show_slider_value(v):
    label.text(str(v))
Explanation: React
Defining reactions is easy:
End of explanation
class MyWidget(ui.Widget):
    def init(self):
        with ui.HBox():
            self._slider = ui.Slider(flex=0)
            self._label = ui.Label(flex=1, text='xx')
    
    @react.connect('_slider.value')
    def show_slider_value(self, v):
        self._label.text(str(v))
w = MyWidget()
w
Explanation: Compound widgets
The above quickly gets messy. You can better create new widgets by wrapping together other widgets:
End of explanation
class MyWidget2(ui.Widget):
    def init(self):
        with ui.HBox():
            self.slider = ui.Slider(flex=0)
            self.label = ui.Label(flex=1, text='xx')
    
    class JS:
        @react.connect('slider.value')
        def show_slider_value(self, v):
            self.label.text(str(v))
    
w = MyWidget2()
w
Explanation: Reactions in JS
If you want reactions to be handled in JS, use a JS nested class:
End of explanation
<END_TASK>