Fucking React on Phoenix -- I dunno why frontend assets are so god forsakenly hard.

Every front end developer’s mission is to make your life hard as fuck. So get used to it.

React on Phoenix is actually not that difficult when you find GOOD INFORMATION. When you find bad information, IT BECOMES FUCKED.

https://medium.com/@diamondgfx/phoenix-v1-1-2-and-react-js-3dbd195a880a#.32gki0a67 –> great fucking tutorial

but that’s like the first step. Take it one step further, you aren’t going to want every React Component in app.js… So here’s their entire example, with me taking it one step further.

mix phoenix.new phoenix-react
cd phoenix-react
npm install --save react react-dom babel-preset-react

brunch-config.js

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"]
}

web/static/js/app.js

import React from "react"
import ReactDOM from "react-dom"
import HelloWorld from "./hello_world"

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

)

web/static/js/hello_world.jsx

import React from "react"

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

the critical thing is to EXPORT each class. And also to import the react component.

Post Content