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 https://www.valentinog.com/blog/react-webpack-babel/

Create your new Phoenix project and enter it

mix phx.new 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 https://www.valentinog.com/blog/react-webpack-babel/

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 https://www.valentinog.com/blog/react-webpack-babel/

assets/.babelrc

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

assets/js/app.js

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

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

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

lib/switchboard_ex_web/templates/page/index.html.eex

<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 https://github.com/dewetblomerus/react-on-phoenix/commit/7f31bcf6228b4656b971bfb4dd0b8762d401da2a