Usage
When bs-platform
, reason-react
and reason-react-native
are installed, you can run the following command
yarn bsb -make-world
⚠️ If this process looks fast to you, don't be surprised, that's because ReScript is fast!
This command should compile all .re
files to their .bs.js
counterparts.
This means if you have an src/App.re
file, you should now have src/App.bs.js
file too.
You may also notice some compilation artifacts:
.bsb.lock
.merlin
lib/bs
You may want to gitignore all of these:
*.bs.js .bsb.lock .merlin lib/bs
If you used our template, it should be done already.
You have multipes way to not have to think about compilation for your daily workflow
To get the best development experience possible, we recommend you to use VSCode with Reason Language Server extension. Optionally you can add Flow Language Server extension if you have existing JavaScript covered by Flow.
⚠️ If you don’t want to use VSCode, we still recommend you to get a ReasonML editor plugin.
By having an IDE that handle ReasonML compilation, you will not have to run a command in the terminal to handle this & will just have to follow the standard React Native workflow, your ReasonML files being compiled to JavaScript.
You will also have inline errors & much more feature that won't be provided by using a CLI workflow.
When you open VSCode with the Reason Language Server plugin (RLS), you won't have to do anything. The plugin will detect bs-platform
& will handle the compilation/watching process for you.
In case you are facing something weird, you can always trigger a cleanup by doing Cmd/Ctrl + Shift + P
and look for Restart Reason Language Server
.
⛑ Even if you decide to use Vscode or a smiliar IDE to ease your day to day development workflow, you should have a look to CLI workflow so you know how it works.
When you use React Native, you usually always have a terminal opened around with Metro Bundler running, which bundle the JavaScript files.
Now you need to also have a process watching for your ReasonML files to compile then to JavaScript. The easiest way is to rely on ReScript bsb
watch option -w
:
yarn bsb -make-world -w
If you are not familiar with ReScript bsb
you should know that you might sometimes have weird compilation errors due to outdated build artifacts. This should not happen often but in case you are facing something weird, you can try using bsb
-clean-world
option
yarn bsb -clean-world
On a daily basis, you can use this complete command that will clean, build & watch for changes
yarn bsb -clean-world -make-world -w
You might want to add this two commands in your package.json
scripts:
"scripts": {
"re:build": "bsb -clean-world -make-world",
"re:watch": "bsb -clean-world -make-world -w",
"start": "react-native start",
"ios": "react-native run-ios",
"android": "react-native run-android",
}
Note: you probably have start
already.
If you are doing this change in your scripts, you can now use this development workflow
In one terminal:
yarn re:watch
As soon as .re
files are being compiled to .bs.js
, you can either start the project on iOS Simulator (included in Xcode) or an Android Emulator (if you are unfamiliar with Android Studio, you might be interested by Genymotion).
In another terminal:
yarn ios
or
yarn android
This commands should open up a virtual device & start React Native metro bundler. This packager will serves the compiled Reason code to the React Native client.
Now you can start coding by editing files in src/
!
Note: as soon as you have the app installed in a simulator/emulator, you can just run
yarn start
This avoid rebuilding the entire native parts & will just start React Native metro bundler.
@todo
Meanwhile, check out Reason React interop page.
You can also browse the source of reason-react-native because that's exactly what this project is doing!
@todo
Meanwhile, check out Reason React interop page
👉 At this step, you should check our in-depth Example or go directly check our Cheatsheet