Phoenix 1.4 ships with Webpack by default so React is now 100% at home in your next Phoenix project, here is how to get started. The goal of this guide is to get one React component rendering, nothing more.

I was fumbling around until I found this

Create your new Phoenix project and enter it

mix react_on_phoenix --no-ecto # Skipping the database to keep this guide as short as possible
cd react_on_phoenix

Create a new Git repo and make your first commit.

I always do this immediately after running some generation command that I don’t want to have to run again.

git init
git add .
git commit -m 'initial commit'

Pull in the dependencies

As show by

cd assets # this is the front-end directory that was set up by Phoenix 1.4
npm i @babel/core babel-loader @babel/preset-env @babel/preset-react react react-dom --save-dev

Delete the content of the following files and replace it with the specified code

As show by


  "presets": ["@babel/preset-env", "@babel/preset-react"]


import React from 'react'
import ReactDOM from 'react-dom'

const Switchboard = () => <div>This is a React Component!!!</div>

ReactDOM.render(<Switchboard />, document.getElementById('mountPoint'))


<div id="mountPoint"></div>

Get back to the root directory of the app and start the server

cd ..
mix phx.server

You should now see This is a React Component!!! on the page at http://localhost:4000

You can see all the changes here