/ ReasonML

Enable ReasonML in Any React App

So you’ve heard about ReasonML, read a few articles, and are ready to hop aboard the ReasonExpress™️. Unfortunately, your React codebase is all JS, and you don’t have the time to do a full rewrite from scratch. That's quite a showstopper, right? BUT WAIT THERE’S MORE! Here’s my simple five-step guide to getting BuckleScript’s build system working along with your current setup, so that your journey with ReasonML can be as frictionless as possible! 🚄

  1. Install the necessary dependencies by running the following commands in your terminal:

    yarn add --dev bs-platform npm-run-all
    yarn add reason-react # + `bs-react-native` if writing a RN/Expo app
    
  2. Download this BuckleScript config (bsconfig.json) and place it in your project's root directory (adjacent to package.json).

  3. Customize bsconfig.json for your needs:

    • Replace the "name" property with your app’s name.
    • Add "bs-react-native" to the "bs-dependencies" array if writing a RN/Expo app.
    • Set the "sources" directory to the directory where you want your ReasonML code to live (not the root of the project, but in a subfolder like src as presently stated in the config).
  4. Add some build scripts to your package.json:

    • Add a "with-reason" script that is set to "run-p start watch-reason".
    • Add a "build-reason" script that is set to "bsb -make-world -clean-world".
    • Add a "watch-reason" script that is set to "bsb -make-world -clean-world -w".
    • Add a "postinstall" script that is set to "npm run build-reason".
    • (Optional) If using Expo and you don’t already have a start script set up, you should probably set "start" to "exp r".
  5. Edit some dotfiles:

    • Add lib, .merlin, and .bsb.lock to your .gitignore.
    • Create (or append to) a .eslintignore file and add **/**/*.bs.js to it (only if you’re using ESlint).

Start your app with yarn with-reason, and you can now start writing ReasonML code! You can integrate it into your app by importing your BuckleScript-generated files (X.bs.js) into your existing JS codebase. Here’s a working example of this integration: 💪🏾.

Happy coding, Reasoners!