Comments (6)
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.
from fable-react.
...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.
from fable-react.
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.
from fable-react.
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?
from fable-react.
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
from fable-react.
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?
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.