purescript-react / purescript-react-basic-hooks

An implementation of React hooks on top of purescript-react-basic
https://pursuit.purescript.org/packages/purescript-react-basic-hooks/
Apache License 2.0
198 stars 31 forks source link

What is the equivalent to render for react-basic-native? #49

Closed jerbaroo closed 3 years ago

jerbaroo commented 3 years ago

Hi, I'm really interested in using this library for a react-native application at the company I work for. However I am having a hard time getting the most simple example working. I can't seem to find the equivalent to render for react-basic-hooks.

jerbaroo commented 3 years ago

To give a little more context, I am trying to finish this example:

main :: Effect Unit
main = do
  ex <- mkCounter
  ??? ex 0

mkCounter :: Component Int
mkCounter = do
  component "Counter" \initialValue -> React.do
    counter /\ setCounter <- useState initialValue
    pure $ R.button
      { onPress: capture_ (setCounter (_ + 1))
      , title: "Increment: " <> (show counter)
      }
jerbaroo commented 3 years ago

Okay turns out it is this simple :)

# Main.purs
main :: Effect JSX
main = do
  ex <- mkCounter
  pure $ ex 0
# App.js
import { main } from "./output/Main";

export default function App() {
  return main();
}
megamaddu commented 3 years ago

render from React.Basic.DOM works for components made with this library. react-basic-native should have its own equivalent "render the app root" concept, and that should also be compatible with this library.

jerbaroo commented 3 years ago

Okay thank you for the information.

I am trying out a react-basic-native application and went with the approach outlined in the comment above, does that look okay to you?

Just to confirm, when you say "should have its own equivalent "render the app root" concept" you mean that this does not current exist?

megamaddu commented 3 years ago

It's just that I'm not very familiar with react native, so I don't know if I can answer whether that's a good approach 😅. I know react native app mounting is a bit different from web though. If you're just worrying about making the top level PS type a react component and then wiring that up in JS that should be fine.