That’s a little while about you heard about the usage of ReasonML with the React library but you didn’t had time to take a look seriously ? In this article, we’re gonna see how to quickly create a React application which will serve as our common thread for the next articles !
Use a generator
Resuming the documentation, Spin has severals templates to scaffold a project.
For a native application, there are 4 templates :
- bin : a native project who generated a binary
- cli : a CLI deployable on Opam (OCaml package manager)
- lib : a library deployable on Opam (OCaml package manager)
- ppx : a PPX library for native and BuckleScript usage
For a BuckleScript application, there is only one template at the time this article is written :
- bs-react : a React application written in ReasonML
So, we are gonna use
bs-react to generate our project, we can now setup spin and generate a template :
# install spin yarn global add @tmattio/spin # Or npm -g install @tmattio/spin # generate our project spin new bs-react the-commerce
You will have to configure the project through CLI.
A little subtility, the generator suggests adding TailwindCSS, an utilitary CSS framework which is very interesting. We will include it in our application.
And voilà ! Our application has been generated, let’s take a look closer to the content..
Under the hood
We can see that Spin generate 3 configurations files in the folder
No need to come back on Tailwind which has been presented a few lines upper.
The structure of a Spin project
This is very close to create-react-app, with an
index file who serves as entry point of the application and an
App file who contains the React code of our app.
We can note the presence of files like
Route but don’t linger on this today (in a futur article 😉).
It doesn’t really exist a convention, but mostly people agreed on a point : keep the file structure as flat as possible. It simplifies a lot the architecture and the entry cost for a novice.
Personally, I use this kind of structure in my Reason React projects :
> components # composants used in several pages > pages # pages of the application > services # API call, notifications, bug tracker, etc.. > resources # types used pretty much everywhere > vendor # bindings that does not exist on npm > locales # i18N > tests # when there are :p
We have a Reason React project with a solid structure ! Now let’s code 😁 !