Document creation of stateful react components

[pkese]

I've spent some effort on creating a custom react component using props and state (including componentDidMount, componentWillReceiveProps, setState and such).

There's a few lines in source code suggesting to do something like:

type MyComponent(initialProps) =
    inherit React.Component<MyProps, MyState>(initialProps)
    base.setInitState({ value = 5 })
    ...

... that I tried to follow, but then I got issues with React reporting errors about component's Children being an object rather than react component and such.
I did fiddle something creating some Pojo objects for MyState and MyProps types, but I'm not really sure what I did and if I did it correctly (I was more like a monkey that somehow managed to write a Shakespeare novel).

It would be really nice to have the concept of strongly typed state and props described somewhere in the documentation.

[pkese]

...I also had to

let inline myComponent model = ofType<MyComponent, MyProps, MyState> { model = model } []

...to make it usable (I found that pattern in https://blog.vbfox.net/2018/02/06/fable-react-1-react-in-fable-land.html and it works), although I'm not sure what it does and why this is necessary.

Please understand... this is not a rant... I just listed a couple of things that I'm struggling with. Although I'm experienced with React , I got a bit overwhelmed with the F#-type details when trying to use React with Fable. I'm not sure how to overcome this knowledge gap. Thanks.

[alfonsogarciacaro]

Hi @pkese! Thanks a lot for your comments. No worries, you're totally right, we're focusing on Elmish apps and still miss documentation about how to write React components directly. This document about how to use 3rd-party React components was recently added and covers some parts, like using the Pojo attribute to compile a record as a plain object instead of a class so Rresteact doesn't complain (we want to remove the need of the attribute in Fable 2).

For the rest and for now, you can check the react-todomvc sample that implements React components directly without using any framework. It's a bit old but the only thing that has changed is the need to use override when implementing methods from the React.Component parent (like render, shouldComponentUpdate, etc).

It's necessary to use ofType because React doesn't instantiate directly component classes (this is transparent to JS devs because of the JSX syntax). You can find other helpers to render React components/elements here (most of them compile to React.createElement).

BTW, you can use the reactiveCom helper to quickly write an Elmish-like stateful React component just by passing functions and without implementing the class yourself.

[SirUppyPancakes]

Just thought I'd drop these here, which helped me get started creating stateful React components in Fable: https://blog.vbfox.net/2018/02/06/fable-react-1-react-in-fable-land.html https://blog.vbfox.net/2018/02/08/fable-react-2-optimizing-react.html

They even go over some of the important optimizations related to lambdas and lists/keys.

[njlr]

Another thing to watch out for is that the Props type must be an object (e.g. an F# record) if you use a string or similar it will fail at run-time. Perhaps Fable could generate a compiler error here?

[MangelMaxime]

Fable can't do that you no because it doesn't know about React.

However, it's possible to create an Fsharp Analyzer which can analyze the code for you and generate warning/errors.

It's can be integrated in Ionide or invoked by CLI

[njlr]

Fable can't do that you no because it doesn't know about React.

However, it's possible to create an Fsharp Analyzer which can analyze the code for you and generate warning/errors.

It's can be integrated in Ionide or invoked by CLI

I'm not familiar with the Fable internals, but could the Fable.React bindings be annotated with something that tells the Fable compiler to throw an error?