How to write PureScript react components to replace JavaScript
thomashoneyman.com
How to write PureScript react components to replace JavaScript
1–10 of 74 posts
Re: How to write PureScript react components to replace JavaScript
#2Not to hijack the thread, but I’ve recently learned that Purescript-Native has a Go target [1].
Does anyone have experience with this? How practical would it be to use this where one would otherwise use Go?
[1] https://discourse.purescript.org/t/purescript-native-can-now...
Re: How to write PureScript react components to replace JavaScript
#3This 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}
);
}
Re: How to write PureScript react components to replace JavaScript
#4You can also use React Hooks in PureScript with purescript-react-basic-hooks[1].
Or for a more native PureScript approach to single-page web apps, check out purescript-halogen[2] and purescript-halogen-hooks[3] (created by the author of this article).
[1]: https://github.com/spicydonuts/purescript-react-basic-hooks
[2]: https://github.com/purescript-halogen/purescript-halogen
[3]: https://github.com/thomashoneyman/purescript-halogen-hooks
Re: How to write PureScript react components to replace JavaScript
#5This 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…
The snippets in the article are not using React with hooks. I imagine it would be more similar to your example if the snippets used purescript-react-basic-hooks[1]
[1]: https://github.com/spicydonuts/purescript-react-basic-hooks
Re: How to write PureScript react components to replace JavaScript
#6This 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…
Exactly my thought.
I've always loved FP, I write JS in a FP style at work, and have always wanted to get into learning something like Elm/PureScript (and eventually Haskell) but I feel like it takes ages to get productive. That PureScript React example alone has me thinking twice.
But as a general question, what would be a better way to approach these languages?
Re: How to write PureScript react components to replace JavaScript
#7This 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…
Exactly my thought. I've always loved FP, I write JS in a FP style at work, and have always wanted to get into learning something like Elm/PureScript (and eventually Haskell) but I feel like it takes ages to get productive. That PureScript React example alone has me thinking twice. But as a general question, what would be a better way to approach these languages?
Consider looking at ReasonML and ReasonReact, you can write stringly typed code at first, later you can start relying on type inference and ADTs
Re: How to write PureScript react components to replace JavaScript
#8This 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…
It’s not react, but author of this post also developed a hooks library for Purescript Halogen: https://github.com/thomashoneyman/purescript-halogen-hooks
Re: How to write PureScript react components to replace JavaScript
#9This 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…
Also, you can get compile-time strict typing in Typescript with some minor annotations added to that:
export const Counter: FunctionComponent void
}> = ({ label, counterType, onClick }) => {
const [counter, setCounter] = useState(0);
return (
{
counterType == "Increment" && setCounter(counter + 1);
counterType == "Decrement" && setCounter(counter - 1);
onClick && onClick();
}}>
{label}: {counter}
);
}Re: How to write PureScript react components to replace JavaScript
#10This 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…
Exactly my thought. I've always loved FP, I write JS in a FP style at work, and have always wanted to get into learning something like Elm/PureScript (and eventually Haskell) but I feel like it takes ages to get productive. That PureScript React example alone has me thinking twice. But as a general question, what would be a better way to approach these languages?
That is why I like Typescript as an option. Protect me from my dumb mistakes with types, but let me be fast and loose like JS.