fable-react icon indicating copy to clipboard operation
fable-react copied to clipboard

Documentation

Open realvictorprm opened this issue 8 years ago • 5 comments

The in editor documentation is dense. Couldn't we add some documentation?

realvictorprm avatar Jun 04 '17 16:06 realvictorprm

This is mostly bindings for React with some very minor deviations to make things a bit more idiomatic from F#, so the extensive React documentation also applies here. Which kind of documentation would you like to see?

alfonsogarciacaro avatar Jun 05 '17 20:06 alfonsogarciacaro

I'd like to see an element being created, used in a component, and the component being rendered. Preferably with a "Stateless React Component". Something like this.

const destination = document.querySelector('#container');
const Title = (props, context) => <h1> Hello {props.name}! </h1>;
ReactDom.render(<Title name={"Voronoi Potato"} />, destination );

How would this look in fable-react?

voronoipotato avatar Jun 06 '17 14:06 voronoipotato

@voronoipotato The react-todomvc sample shows how to define React components with functions :)

alfonsogarciacaro avatar Jun 06 '17 22:06 alfonsogarciacaro

so my example would be something like?

module R = Fable.Helpers.React
open R.Props

type titleProp = {name:string}
let destination = Browser.document.querySelector("#container")
let Title props = R.h1 [][R.str ("Hello " + props.name)]
ReactDom.render(Title {name="alfonso"}, destination )

If this is correct could you put it on the fable react Readme.MD so that people can get the gist of the patterns without having to go through the example app? It's tough to understand something you don't have context for, going through a full fledged example can be a bit of information overload and it's definitely not identical to how javascript does it. It wasn't obvious that there was an example app so a link to that might also be good. Thanks of course for your contributions, but I do want to use my inexperience to help you understand what is hard for a novice.

voronoipotato avatar Jun 13 '17 15:06 voronoipotato

Absolutely, your comments are very helpful, thank you! :clap:

We're releasing the stable Fable 1.1 soon so we can focus more on documentation. Of course, it's also very helpful if you could PR to the documents with the things that you felt missing (you can leave some TODOs in your PR with questions but for the things you're unsure about).

Your sample should be right. I think you're only missing R.fn in the last line:

ReactDom.render(R.fn Title {name="alfonso"}, destination )

alfonsogarciacaro avatar Jun 14 '17 16:06 alfonsogarciacaro