Reason Scripts

  $ yarn create react-app my-app --scripts-version reason-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

$3

> Note 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 --scripts-version reason-scripts
$ cd
$ yarn start
`

Make sure to install bs-platform globally using npm instead of yarn.

$3

`
$ npm install -g bs-platform
$ npx create-react-app --scripts-version reason-scripts
$ cd
$ npm start
`

(npx comes with npm 5.2+ and higher, see instructions for older npm versions)

The policy of reason tooling is to support the current LTS release, so please make sure you have Node 8 or later.

$3

Creating a new app makes an directory with the following layout:

`
/
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

$3

* Highly-optimized build configuration
* Pre-configured test runner
* Friendly developer environment
* "eject" Webpack config
* Environment variable configuration
* Automatic PWA configuration
* Low configuration builds

$3

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!

$3

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:

`js
import { add } from './math_fns.re'

const sum = add(1, 4)
`

$3

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:

`reason
/ math_fns.re /

let add = (x, y) => x + y;
`

`reason
/ math_fns_test.re /

open Jest;

test("addition", () => {
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:

`js
/ maths_fns.test.js /

import Math_fns from './math_fns.re'

test('addition', () => {
const num1 = 10
const num2 = 12

expect(Math_fns.add(num1, num2)).toBe(22)
})

`

For more documentation on the Jest API, see bs-jest

$3

You can require CSS files with:

`reason
[%bs.raw {|require('./App.css')|}];
`

or any other kind of file (like SVG's) with:

`reason
let logo : string = [%bs.raw {|require('./logo.svg')|}];
`

Help, Tips, and Tricks