$ 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.
To create a new app using Reason and React, run:
$ npm install -g bs-platform
$ yarn create react-app <app-name> -- --scripts-version reason-scripts
$ cd <app-name>
$ yarn start
This will create a new app the the <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
- Highly-optimized build configuration
- Pre-configured test runner
- Friendly developer environment
- "eject" Webpack config
- Environment variable configuration
- Automatic PWA configuration
- Low configuration builds
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!
Any Reason file will be automatically compiled to a JS file. For example, a file called
math_fns.re
can be required by a JS file:
import { add } from './math_fns.re'
const sum = add(1, 4)
Reason Scripts will automatically configure a Jest environment
to test Reason code. Any code found in a file ending with _test.re
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;
});
For more documentation on the Jest API, see bs-jest
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')|}];
Reason Scripts automatically generates an interface to any library installed with npm and FlowTyped
If you type the exports of a JS file with Flow types, you can use the file directly
in Reason. For example, in the file math_fns.js
:
// @flow
// math_fns.js
export function add(x: number, y: number): number {
return x + y;
}
you will be able to access add
in a Reason file with:
let run_func x y => Math_fns x y;