Reason Scripts
$ yarn create react-app my-app -- --scripts-version reason-relay-scripts
Reason Scripts provides a JS-like development environment for developing web apps with the Reason programming language and React. It bootstraps an environment to automatically compile all Reason code to JS, provide features like reloading and bundling, and seamlessly use JS code from Reason.
Getting Started
Yarn
UsingNote that using
yarn create
requires Yarn 0.25 or later
To create a new app using Reason and React, run:
$ npm install -g bs-platform
$ yarn create react-app <app-name> -- --scripts-version reason-relay-scripts
$ cd <app-name>
$ yarn start
Using npm
$ npm install -g bs-platform create-react-app
$ create-react-app <app-name> --scripts-version reason-relay-scripts
$ cd <app-name>
$ npm start
Directory Layout
Creating a new app makes an <app-name>
directory with the following layout:
<app-name>/
README.md
node_modules/
package.json
bsconfig.json
.gitignore
public/
favicon.ico
index.html
src/
index.re
index.css
app.re
app.css
logo.svg
Features
Everything from Create React App
- Highly-optimized build configuration
- Pre-configured test runner
- Friendly developer environment
- "eject" Webpack config
- Environment variable configuration
- Automatic PWA configuration
- Low configuration builds
Reason Entrypoint
The entry point to the app is src/index.re
. From the start your new
app will be based on Reason, but can seamlessly interop with existing JS
files and projects!
Automatic Compilation of Reason/Ocaml files
Any Reason/Ocaml file will be automatically compiled to a JS file. For example,
a file called math_fns.re
can be required by a JS file:
const sum =
Jest Integration
Reason Scripts will automatically configure a Jest environment
to test Reason code. Any code found in a file ending with _test.re
, _test.ml
or test.js
will be considered a test and run with Jest. From these files, the normal
Jest API can be used interacting with any other modules defined in your app. For example:
/* math_fns.re */ let add x y => x + y;
/* math_fns_test.re */ open Jest; test "addition" (fun () => { let num_1 = 10; let num_2 = 12; expect (Math_fns.add num_1 num_2) |> toBe 22;});
Or if you prefer writing your tests in JavaScript, just don't forget to import the tested module:
/* maths_fns.test.js */
For more documentation on the Jest API, see bs-jest
Importing non-Reason files
You can require CSS files with:
[%bs.raw {|require('./App.css')|}];
or any other kind of file (like SVG's) with:
let logo : string = [%bs.raw {|require('./logo.svg')|}];
Help, Tips, and Tricks
Editor support is provided by Merlin. To generate a See our full editor integration guide here: https://reasonml.github.io/guide/editor-tools/editors-pluginsMy editor isn't autocompleting
.merlin
file, run the app
with npm start
or yarn start
.
Use I don't want reason-relay-scripts to clear my terminal
FORCE_COLOR=true react-scripts start | cat -
as your start command instead
Checkout our fancy website: https://reasonml.github.io/! We also have a very active Discord to come talk about Reason, and ask for help: https://discordapp.com/invite/reasonmlReason is awesome! Where can I learn more?