One little-known fact about PureScript is that it is easy to incrementally adopt in a JavaScript project. That means that you can use it in places where a functional style makes sense and otherwise use any other combination of frameworks or just plain ol' JS.

In this article, I'll show you how to set up a React project and integrate PureScript. The whole thing should take less than 5m.

Creating your React App

In my case, I ran npm install -g create-react app followed by create-react-app my-app.

After cd-ing into my-app, I installed the dev dependencies to work with PureScript.

$ yarn add dev purescript spago purty

I then opened the project in VSCode.

PureScript Setup

The equivalent of create-react-app in PureScript-land is spago init. By running spago init, the tool spago will add all of the files you need to work with PureScript development.

$ npx spago init

For smoother PureScript editing, I also recommend installing two VSCode extensions for working with PureScript: PureScript IDE and PureScript Language Support.

The next step is to add build and test commands to your package.json. The react commands are already there from create-react-app, so we'll just add the PureScript ones. As we're working with a React app, it's idiomatic to have all of the JS code under the src/ directory. We'll add an argument to spago build to make sure the generated files go to a folder in the src/ directory.

  "scripts": {
    "start": "react-scripts start",
    "build": "spago build --purs-args \"-o src/generated-ps/\" && react-scripts build",
    "test": "spago test --purs-args \"-o src/generated-ps/\"  && react-scripts test",
    "eject": "react-scripts eject"
  }

Let's write some PureScript code

Now that the setup is done, let's create a file called PSCode.purs under the src/ directory. We'll give it the following content.

module PSCode where

import Prelude

myString = "hello react" :: String

myFunc :: Int -> Int -> Int
myFunc a b = a + b

When we run yarn build, we can see that spago picks up this file automatically and creates the src/generated-ps directory.

Putting it all together

Now, in App.js - the main application file generated by create-react-app - we can include the PS code.

We call the PS functions just like any other JavaScript function. The only caveat is that PS functions only take one argument at a time, so instead of calling myFunc(3,7) we call myFunc(3)(7).

When we run yarn start, here's what we get:

Conclusion

Incorporating PureScript into a JS-based web project is a great way to learn the language. You can write certain parts of a project in PureScript without needing to rewrite the whole project.

I hope you get a chance to try PureScript out in your JS projects! For more learning resources, you can check out PureScript website.