Hello World Sample

Create a new Xamarin Forms project in Visual Studio 2019, update the Xamarin Forms packages to latest version, finally add the ReactorUI packages.

Remove the file MainPage.xaml (including the code behind file) and any reference to MainPage class in the App.xaml.cs file:

Initial workspace

We first need to create a ReactorUI application linked to the Xamarin Forms Application object. RxApplication also requires a component type to instantiate a component as root. Replace the App class code with this:

public partial class App : Application
{
    private RxApplication _rxApp;

    public App()
    {
        InitializeComponent();

        _rxApp = RxApplication.Create<MainComponent>(this);
        _rxApp.Run();
    }

    protected override void OnStart()
    {
        _rxApp.Run();
    }

    protected override void OnSleep()
    {
        _rxApp.Stop();
    }

    protected override void OnResume()
    {
        _rxApp.Run();
    }
}

Now we need to define the MainComponent class: it's a component so it derives from ReactorUI RxComponent abstract type:

public class MainComponent : RxComponent
{
    public override VisualNode Render()
    {
        throw new System.NotImplementedException();
    }
}

Any class deriving from RxComponent must provide a Render function that ReactorUI calls to build the visual tree (if you are familiar with ReactJS you'll recognize it). NOTE: component classes must be public or internal.

As starter let's create a NavigationPage with a ContentPage with a Label inside it:

    public class MainComponent : RxComponent
    {
        public override VisualNode Render()
        {
            return new RxNavigationPage()
            {
                new RxContentPage()
                {
                    new RxLabel("Hello World ReactorUI!")
                }
            };
        }
    }

Run the project (F5) and see the resulting app

Android emulator running the app

We now enable hot reload for the app so that we can make changes to app on the fly. Add this code to the ReactorUI application in the App.xaml.cs (App class constructor):

_rxApp = RxApplication.Create<MainComponent>(this)
    .WithHotReload();
_rxApp.Run();

Start the app with or without debugging and try to make a change to the app then click the Hot Reload toolbar button (or press CTRL+F7 / ⌘+F7) (See Setting Up page if you don't see the button).

ReactorUI Hot Reload in action