This post will expand upon Evan’s post describing how to use Elm with React. I’ve been using this todo list example to teach react for a while now (thanks Chad!) so I thought it would make sense to use the same example here. Checkout the Elm branch of the todo list repo linked above if you want to follow along. You can see the whole commit diff for this blog post here.

We need to do a few things to add Elm into our react app:

  1. Npm install elm-webpack-loader and react-elm-components
  2. Update Webpack config
  3. Install Elm packages (and add elm-stuff to .gitignore)
  4. Replace React component with Elm
todo
A simple todo list

Step 1 - Npm install

Step one above doesn’t need explaining, but I’ll describe steps 2-4 in more detail.

Step 2 - Update Webpack config

webpack
Add the elm-webpack-loader and noParse lines. Note that the syntax has changed so that we must specify "elm-webpack-loader" rather than just "elm-webpack" as Evan and Richard had in their example.

Step 3 - Install Elm packages

Install elm if you haven’t already, and then run the following two commands:

elm-package install elm-lang/core
elm-package install elm-lang/html

You will want to add elm-stuff to your .gitignore at this point.

Step 4 - Replace React component with Elm

Now we can easily replace the React component in our app.js file with Elm:

app
Replace the React component in `app.js` with Elm
addCard
Our Elm file is hello world for now

We will replace the react view with Elm in part #2