How to write PureScript react components to replace JavaScript

Post by neolefty » Thu, Jun 25, 2020, 12:32 PM UTC

johnrackles wrote: post #39

Softcadbury wrote: post #20

Earlier quoted context omitted.

You should also use useCallback for handleClick

Can you explain why? I don't think I've ever used useCallback and certainly not for this type of functionality. I'd love to learn

    const handleClick = useCallback(() => {
        const modifier = counterType === "Increment" ? 1 : -1
        setCounter(counter + modifier)
        onClick()
    }, [onClick, counter, counterType, modifier])

Post by monsieurbanana » Thu, Jun 25, 2020, 1:06 PM UTC

slifin wrote: post #33

edjroot wrote: post #32

Earlier quoted context omitted.

Awesome! Would you mind talking some more about your experience with it? I just got started with Clojure and Fulcro[1] (a full-stack framework) and I'm really, really excited about the possibilities. Have you heard about it? Here are some features off the top of my head (at least that's what they claim): - Well-integrated stack, so very little friction - “Datomic on the front end”: Client-side time-traveling database…

I'm making this same journey (I'm on video 5), and I'm making some notes for each video in Roam and teaching/learning each video every week via Google Meet on Bristol's Clojure Meetup I recommend using clj-kondo to catch the kinds of silly mistakes a type system is usually good for, yesterday we discovered that the react component interop is really good, we decided to try using https://chakra-ui.com/ over semantic ui…

Post by CraigJPerry » Thu, Jun 25, 2020, 1:27 PM UTC

diggan wrote: post #25

chvid wrote: post #3

This is the corresponding code written in React using hooks: export const Counter = ({label, counterType, onClick}) => { const [counter, setCounter] = useState(0); return ( { counterType == "Increment" && setCounter(counter + 1); counterType == "Decrement" && setCounter(counter - 1); onClick && onClick(); }}> {label}: {counter} ); } I think the case for PureScript React would be more convincing if the code you ended…

Did someone say concise? Here is a ClojureScript + Reagent example for whoever is interested in that: (defn Counter [{:keys [label counterType onClick] :or {onClick (fn [])}}] (let [count (r/atom 0)] [:button {:onClick #(do (swap! count (condp = counterType :increment inc :decrement dec)) (onClick))} (str label ": " @count)])))

  + There's a signal to noise ratio that's off the charts
  + You've not cheated to achieve succinctness; there's no blackbox.nowDrawTheRestOfTheOwl()

  - I don't think that's "pretty" code
  - i don't find it easy to parse, i had to read your example with my index finger pressed against the screen as i traced through it - i didn't have to do that with the Typescript further example down-thread

Post by oweqruiowe » Thu, Jun 25, 2020, 1:37 PM UTC

diggan wrote: post #25

chvid wrote: post #3

This is the corresponding code written in React using hooks: export const Counter = ({label, counterType, onClick}) => { const [counter, setCounter] = useState(0); return ( { counterType == "Increment" && setCounter(counter + 1); counterType == "Decrement" && setCounter(counter - 1); onClick && onClick(); }}> {label}: {counter} ); } I think the case for PureScript React would be more convincing if the code you ended…

Did someone say concise? Here is a ClojureScript + Reagent example for whoever is interested in that: (defn Counter [{:keys [label counterType onClick] :or {onClick (fn [])}}] (let [count (r/atom 0)] [:button {:onClick #(do (swap! count (condp = counterType :increment inc :decrement dec)) (onClick))} (str label ": " @count)])))

Post by shirogane86x » Thu, Jun 25, 2020, 1:40 PM UTC

azangru wrote: post #46

nsonha wrote: post #28

Earlier quoted context omitted.

As a gateway to haskell?

Would you write client-side web apps in Haskell?