Create a react-hooks-minimal template


#1

This post is meant mostly to record a problem that came up on the discord channel:

Though the latest react-hooks template is wonderful indeed, it is a lot more to look through and understand than the previous template. This was frustrating for a beginner who really wanted a minimal template.

Suggestion: bring back the react-hooks template from 5.2.0-dev.2 and rename it react-hooks-minimal


#2

Yes! I totally agree, that would be great. For someone new to both reason and react at the same time, the new template is a bit overwhelming.


#3

I support this demand!


#4

It’s not a demand - it’s a request / suggestion.

Just as an experiment, I tried rebuilding bucklescript with the additional template, but when I create a project and then try to build from it, I get an error.


#5

I agree and I also think we need something very minimal. And controversially enough I actually think it should include a bundler by default. One idea is to make a minimal template that use Parcel 2 (currently alpha though) because it also enables the new Fast Refresh feature of React. Parcel is also so easy to get started with and the base setup will cover most use cases I think.

Thanks for bringing this up!


#6

@zth, very good point! I kinda liked the way the previous template worked … we get a webpack config in there and if you needed something extra you would edit it. But maybe parcel is much easier in that regard, I don’t have enough experience with it, would you choose parcel over webpack for a new reason project?


#7

Very nice that this has come up. I’ve heard the same kind of feedback from developers who want to try reason - people just get scared away before even giving it a fair shot - makes our attempts to grow the community a tad more difficult.

For instance, right from the start, in Index.re: I’ve read the comments with the explanation, but the first thing you see doesn’t feel like a pleasant first encounter with Reason, nor is it representative of ReasonML code. Hell, it scares even me away :sweat_smile:

[@bs.val] external document: Js.t({..}) = "document";

let style = document##createElement("style");
document##head##appendChild(style);
style##innerHTML #= ExampleStyles.style;

The phrasing in the README is another aspect that requires some consideration. “We’ve included a convenience UNUSED_webpack.config.js, in case you want to ship your project to production.” This sort of implies that Reason applications are not meant/ready to be shipped to production (of course we know this is not the case! :sunglasses:)

I think it is fair to say that most beginners prefer a minimal example with a place to start. With that in mind, the suggestion to use Parcel sounds intriguing for sure. I’ve tried v1 and it really “just worked” with 0 configuration (as advertised).


#8

I have thrown together a minimal reason template with webpack, since it seemed easier at the moment. Could someone take a look and see what can be improved? https://github.com/MargaretKrutikova/reason-minimal-template
I tested it on a friend who is just trying reason for the first time, and he seemed to like it :slight_smile:
I would want to submit a PR to bucklescript later on. Feedback is very much appreciated!


#9

This is great! I think that’s perfect for a starter. Maybe adding a file-loader for images etc would be something, but I’m not sure. Great work!


#10

This looks great. Would it be possible to add a noun property so that you could invoke the component as:

<App noun="clickity-click"/>

and the component would then render the counter using the noun, as in

clickity-click count: 1

The code in the component would then have something like this (I haven’t tried it but I think I have the syntax right)

let make = (~noun) => {
...
<span> {(noun ++ " count: " ++ (state.count |> string_of_int)) |> React.string} </span>

#11

Hm… I am not sure what you mean, what is the purpose of noun?


#12

The purpose is to have a component with a property. I made a pull request to your repository with the code. I changed noun to userName – I think that makes things a little clearer. (I also added a style and some comments.)