Phoenix v1.1.2 and React.js

Kind of like chocolate and peanut butter!

Introduction

Previously, installing and using React.js on a Phoenix application required ripping out brunch and replacing it with something like Webpack to get everything working, but the process has been improved significantly with the introduction of Phoenix v1.1.2 which includes a new version of Brunch that works with npm. We’ll walk through creating a new project using Phoenix v1.1.2 and getting a basic React component working and rendering on our main page.

Current Versions

Phoenix: v1.1.4

Creating Our Project

We’ll start by creating our Phoenix project before we do anything else. This will require us having Phoenix v1.1.2+ installed via local hex before anything else.

$ mix local.hex$ mix archive.install https://github.com/phoenixframework/archives/raw/master/phoenix_new.ez
$ mix phoenix.new reactpx
$ cd reactpx

Installing Our NPM Dependencies and Configuration

We’ll start off incredibly simple and just install react, react-dom, and we’ll also need a babel preset for JSX templates via React:

$ npm install --save react react-dom babel-preset-react
plugins: {
babel: {
presets: ["es2015", "react"],
// Do not use ES6 compiler in vendor code
ignore: [/web\/static\/vendor/]
}
},
npm: {
enabled: true,
// Whitelist the npm deps to be pulled in as front-end assets.
// All other deps in package.json will be excluded from the bundle.
whitelist: ["phoenix", "phoenix_html", "react", "react-dom"]
}
$ brunch build

Important Note About NPM Versions

This tutorial assumes you are using NPM 3.x. If you’re using NPM 2.x you’re going to hit issues attempting to build everything together, as has been suggested by a few people. For more information, please reference https://github.com/phoenixframework/phoenix/issues/1410#issuecomment-166001866. Special thanks to Matt Widmann and Fabio Akita for pointing this out!

Writing An Example Component

Now let’s set up our Phoenix app so that we can add a small Hello World react component on our page. Open up web/templates/page/index.html.eex and replace the contents of the whole file with:

<div id="hello-world"></div>
import React from "react"
import ReactDOM from "react-dom"

class HelloWorld extends React.Component {
render() {
return (<h1>Hello World!</h1>)
}
}

ReactDOM.render(
<HelloWorld/>,
document.getElementById("hello-world")
)

It Works!

Start up the server if you haven’t already:

$ iex -S mix phoenix.server
Our React.js component loaded into our main app (also showcasing the React Chrome extension)

I am a software engineer, and now, published author! Check out my new book at https://www.packtpub.com/web-development/phoenix-web-development

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store