Create-react-app integration with PureScript

I read the excellent article How to Write PureScript React Components to Replace JavaScript by @thomashoneyman.

It inspired me to integrate React components written in PureScript in a create-react-app TypeScript project using purs-loader and without the need to eject.

Here is a repository demonstrating how this would look like:

It is using craco to overwrite parts of the webpack configuration of create-react-app. I also created a plugin craco-purescript-loader to make the integration quite simple.

It allows you to import PureScript react components in TypeScript through webpack:

import { mkCounter as Counter } from "./Counter.purs";
// ...
function App() {
  return <Counter />;
}

I think there are better ways to create PureScript projects, but this example could help a lot to start migrating a React Application to PureScript by adding single components to the existing code base. That’s what I’m doing and maybe this is helpful for somebody else! :slight_smile:

6 Likes

Nice! Having more examples on how to make React applications in PureScript will hopefully push more people to try PureScript for their next project. :+1:

3 Likes