DEV Community

Ahmed Atalla
Ahmed Atalla

Posted on

Getting started with ReScript and parcel

#reason #rescript #react

What is ReScript ?

as mentioned on the website,

The JavaScript-like language you have been waiting for,
Previously known as BuckleScript and Reason

History & Summary

  • OCaml is a typed FP language compiling to bytecode and native code.
  • Js_of_ocaml is based on OCaml and compiles to JavaScript for OCaml users.
  • BuckleScript is a fork of OCaml that also outputs JavaScript, optimized (features, JS interoperability, output, build tools) for JS developers rather than OCaml developers.
  • Reason is an alternative, JS-looking syntax layer over OCaml, plus extra tools. Reason used 1. BuckleScript to produce JavaScript output and 2. OCaml to produce native output. Most of the community focused on the former usage. Reason and BuckleScript shared most teammates, who wanted to double down on the JS use-case.
  • ReScript, thus born, is the new branding for BuckleScript that reimplements or cleans up Reason's syntax, tools, ecosystem & docs into a vertically integrated experience. Reason project will continue serving its purpose of a syntax layer for native OCaml. Some folks might use Reason with Js_of_ocaml to output JS code.

There is only one official template to create a new ReScript app ReScript docs

git clone https://github.com/rescript-lang/rescript-project-template my-app
cd my-app
npm install
npm start
node src/Demo.bs.js
Enter fullscreen mode Exit fullscreen mode

npm start script will run bsb -make-world -w to compile the .res code into .bs.js code

as you can see the source code has only a console log statement so we need to add @rescript/react and convert that to a single-page web app, cd into my-app directory and install the other dependencies
also will use parcel bundler to transpile and bundle our front-end code and run the development server

npm install react react-dom  @rescript/react --save
npm install parcel concurrently --save-dev
Enter fullscreen mode Exit fullscreen mode
  • concurrently will be used to run 2 commands in parallel from npm scripts

The next step is to edit the bucklescript config file bsconfig.json

{
  ...
  "reason": { "react-jsx": 3 },
  "bs-dependencies": ["@rescript/react"],
  "package-specs": {
    ...
    "in-source": false
  },
  ...
}
Enter fullscreen mode Exit fullscreen mode
  • in-source config is optional, I like to keep the compiled .bs.js files outside the src especially in a new project that is started as ReScript projects, if you set this to false the compiled files will be at ./lib/js/src, if it is true the compiled file will be in the same place as its .res source

next, create a public/index.html and public/global.css directory with the content

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./global.css">
    <title>Hello ReScript</title>
</head>
<body>
    <div id="app-root"></div>
    <script src="../lib/js/src/App.bs.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

then will add an npm script to start the bucklescript compiler command and the parcel dev server

    "dev": "concurrently \"parcel ./public/index.html\" \"bsb -make-world -w\" ",
Enter fullscreen mode Exit fullscreen mode

finally rename src/Demo.res to src/App.res with this basic ReScript code

module App = {
  @react.component
  let make = () => {
    <div> <p> {React.string("Hello World 123")} </p> </div>
  }
}

switch ReactDOM.querySelector("#app-root") {
  | Some(root) => ReactDOM.render(<App />, root)
  | None => ()
}
Enter fullscreen mode Exit fullscreen mode

this will create a React component App and render it at the div with id app-root

now let us start the dev server and check the result at http://127.0.0.1:1234

npm run dev
Enter fullscreen mode Exit fullscreen mode

Top comments (3)

Collapse
 
ritchiey profile image
Ritchie Young •

Thanks for writing this Ahmed. It's been a mission to just get a working Rescript React setup and this has finally got me there.

I did have to change a couple of things (probably because things have changed since you wrote this).

  1. I changed "dev": "concurrently \"parcel ./public/index.html\" \"bsb -make-world -w\" ", to "dev": "concurrently \"parcel ./public/index.html\" \"rescript build -w\" ", in package.json.

  2. Add "reason": { "react-jsx": 3 }, to bsconfig.json (such that "reason" is at the same level as "bs-dependencies")

Collapse
 
jaeming profile image
jaeming •

thanks, I was looking for precisely this!

Collapse
 
jesse84d profile image
jesse84d •

Thanks. I thought of sharing this package I came across recently, npmjs.com/package/create-rescript-app It's similar to Create React App and for ReScript.

Read next

gravgor profile image

🌍 Landmark API: Real-time Data for Landmarks, Tourism, and Travel Tech

Marceli Borowczak -

micaavigliano profile image

Accessible components: Pagination

Mica -

paharihacker profile image

React Performance Optimization Techniques: Memoization, Lazy Loading, and More

Rajesh Dhiman -

griseduardo profile image

Testes e2e em React com Cypress

Eduardo Henrique Gris -