Embedding Elm into a React App – Ryan C. Collins – Medium

Embedding Elm into a React App @ryancollinsio  #Reactjs #JavaScript #WebDev

  • Now that I have learned this, you can bet that you will be seeing my apps transition to more and more Elm code.
  • Using the react-elm-components package, it is super simple to import Elm into a React application.
  • If you are in the same position as I am and you want to use Elm, the answer is that you can embed any amount of Elm code into a JavaScript app with relative ease.
  • You do not really need to change anything about your process to start working with Elm.
  • I’ve been on an Elm kick these last few months and I’ve gotten awfully used to the awesome features of the language.

I’ve been on an Elm kick these last few months and I’ve gotten awfully used to the awesome features of the language. Although the majority of my time is still spent working in React with JavaScript…

@Roger_M_Taylor: Embedding Elm into a React App @ryancollinsio #Reactjs #JavaScript #WebDev

I’ve been on an Elm kick these last few months and I’ve gotten awfully used to the awesome features of the language. Although the majority of my time is still spent working in React with JavaScript, I have been finding excuses to write Elm when I can. If you are in the same position as I am and you want to use Elm, the answer is that you can embed any amount of Elm code into a JavaScript app with relative ease.

In my case, for my new portfolio website, I added a few small easter eggs to the app to give me a chance to figure out the process for embedding Elm into a React application.

You do not really need to change anything about your process to start working with Elm. In my case, I did not want to move away from Webpack and Hot Reloading needed to be a feature of my workflow. Elm fit nicely into my existing setup, Hot Reloading and all. Using the Elmx package, I can even continue to write my views in a familiar JSX-like syntax (more on this later).

To accomplish all this, all I needed to do was to add a couple new loaders to my webpack configuration (see below, paying attention to anything that has .elm).

The next step is to figure out how to bootstrap Elm in JavaScript. There are a number of examples online that show just how easy this is. I think the easiest way to do this would be to import Elm code into a React component and it just so happens that the folks behind Elm have had a similar use-case.

Using the react-elm-components package, it is super simple to import Elm into a React application. Below, I have included the container from my portfolio, where I have done just that.

As you can see, the process of embedding Elm into an existing JavaScript application is fairly simple and straightforward. Now that I have learned this, you can bet that you will be seeing my apps transition to more and more Elm code.

Here is a link to the branch that I used to introduce elm into my portfolio app and below is the code from the simple Elm Giphy Search app that I made for this example.

Woohoo, it works!

the giphy search is embedded as an Easter Egg on my portfolio site. See if you can find it! I would love to make a game for my next Elm project. If you have any suggestions on example games written in Elm, please leave a comment. Thanks!

Embedding Elm into a React App – Ryan C. Collins – Medium