Comments (5)
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.
from fable-react.
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?
from fable-react.
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?
from fable-react.
@voronoipotato The react-todomvc sample shows how to define React components with functions :)
from fable-react.
Absolutely, your comments are very helpful, thank you! 👏
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 TODO
s 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 )
from fable-react.
Related Issues (20)
- React Server Components integration HOT 2
- Can't figure out how to wrap my view with a Higher Order Component HOT 4
- JsInterop helper for wrapping a higher order component HOT 2
- Can't reference React in Fable HOT 2
- Fable.ReactServer.cssProp very slow HOT 4
- Add Custom DU to DOMAttr HOT 1
- FunctionComponent.Lazy and SSR HOT 1
- Update samples to Fable 3
- ReactDOM.hydrate is no longer supported in React 18 HOT 17
- Can't update shared state passed with useContext? HOT 3
- Q: Use ReactElement import member for Storybook HOT 3
- Missing 'open' from Fable.React.Props? HOT 2
- Last Fable.React upgrade breaks my code HOT 7
- Publish source files from Fable.React.Types and Fable.ReactDom.Types to nuget HOT 5
- Fable.React version 8 depends on React.Dom gte 18 lt 19 according to femto
- Add Pointer Events HOT 3
- Why is useCallback not implemented? HOT 3
- How to obtain a component ref in a function component? HOT 5
- FunctionComponent.Of functions cache breaks reusable code HOT 1
- voidEl breaks with: $ELEMENT is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`. HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fable-react.