A Tutorial on how to add React.JS to your Elixir Phoenix app.

I will show here how to add React.JS into a specific template in your phoenix app. Just like how react-rails works.

You have a template and you can render a react component inside it and pass some props too! There’s zero webpack configuration needed for this tutorial!

To get things in sync, I am using the following versions:

elixir "~> 1.5"

phoenix "~> 1.4.6"

Let’s start with creating a phoenix project from scratch:

$ mix phx.new yourproject

$ cd yourproject

$ mix deps.get

$ mix ecto.setup

$ mix phx.server

With these, visit localhost:4000 then we have a running phoenix app.

Adding React

There are many ways to add React.JS but as I said earlier, this approach is for adding react components into specific templates of your phoenix app. We will be using an incredible javascript library called remount.js to mount the components in our templates.

1. Installing React

Go inside the assets folder and install react.js manually:



$ yarn add react react-dom $ cd assets$ yarn add react react-dom @babel/preset-react

Let’s add @babel/preset-react to our .babelrc configuration first:

# edit /assets.babelrc

# change it to this {

"presets": [

"@babel/preset-env",

"@babel/preset-react" <------- ADD HERE

]

}

After that, Create a test component inside the js directory in assets. This one is just a dumb component that renders a message.

$ mkdir js/react/src/components/Test.js # edit assets/js/react/src/components/Test.js import React from 'react' const Test = () => (

<h1> Hello World </h1>

) export default Test

2. Add Remount

Remount can mount any react component in your HTML as a custom element. Let’s first install remount:

yarn add remount

Create an entry file for your react inside the js directory in assets

# Create an entry file for your react

$ mkdir js/react/src/app.js # This is the important part, where

# Remount will mount your component as a custom html element

# And you wil simply use this custom element in your template html import { define } from 'remount'

import Test from './components/Test' define({ 'x-anynameyouwant': Test })

Let’s not forget that we need to import this react entry file to Phoenix main js file. Add it at the bottom:

# edit /assets/js/app.js // We need to import the CSS so that webpack will load it.

// The MiniCssExtractPlugin is used to separate it out into

// its own CSS file.

import css from "../css/app.css" // webpack automatically bundles all modules in your

// entry points. Those entry points can be configured

// in "webpack.config.js".

//

// Import dependencies

//

import "phoenix_html" import "./react/src/app.js" // Import local files

//

// Local files can be imported directly using relative paths, for example:

// import socket from "./socket" import "./react/src/app.js" <---------------------- ADD HERE

Time to render our react component

Open up any template html.eex file. For this tutorial I’ll be editing templates/page/index.html.eex :

# Inside /templates/page/index.html.eex

# Replace the whole content with your react element that was defined via remount <x-anynameyouwant></x-anynameyouwant>

Check your phoenix app and should update with the react component we’ve added:

Bonus:

You can also pass props to your custom element:

<x-anynameyouwant props-json={{"name": "John"}} ></x-anynameyouwant>

Read more features of remount here: https://github.com/rstacruz/remount

It’s that simple! Now you can make queries in your controller, pass it to your template then pass it to your custom element as props so that your react component can receive it!