Components

There are 2 kind of components: Stateless components that we saw in the Hello World sample and Stateful components that maintains a state.

To create a stateful component in ReactorUI just derive from RxComponent<T> where T is a class that defines the state of the component.

Let's change the Hello World project adding a component that implement a counter page. Replace the code in the MainComponent.cs file with the following (you can edit the file on the fly and hot reload the page):

public class MainComponentState : IState
{
    public int Counter { get; set; }
}

public class MainComponent : RxComponent<MainComponentState>
{
    public override VisualNode Render()
    {
        return new RxNavigationPage()
        {
            new RxContentPage()
            {
                new RxStackLayout()
                {
                    new RxLabel($"You clicked {State.Counter} times!")
                        .FontSize(Xamarin.Forms.NamedSize.Large),
                    new RxButton("Click Here!")
                        .OnClick(OnButtonClicked)
                }
                .VCenter()
                .HCenter()
            }
            .Title("Hello World")
        };
    }

    private void OnButtonClicked()
    {
        SetState(s => s.Counter++);
    }
}