Phoenix 1.4에서 React 작동

연호도 헤세이에서 영화로 바뀌고 오랜만에 Phoenix 로 앱을 작성 예정이므로 React 를 사용해 본다.
어느새 Phoenix 1.4 에서 JS 빌드 도구는 brunch 에서 webpack 로 바뀌었던 것 같다.

개발 환경

Phoenix : 1.4.3
Elixir : 1.8.1
노드 : 10.15.3
npm : 6.9.0
react : 16.8.6
react-dom : 16.8.6

Phoenix 프로젝트 만들기

Phoenix 프로젝트를 만들고 종속 라이브러리를 설치합니다.

$ cd $workdir
$ mix phx.new ReactPhoenix --app react_phoenix --no-ecto

Fetch and install dependencies? [Yn] Y

React 라이브러리 설치

npm 에 의해 react 및 react-dom 를 설치합니다.

$ cd $ cd ReactPhoenix/assets/node_modules/
$ npm install react react-dom --save

.babelrc 파일 편집

react가 사전 컴파일되도록 .babelrc를 설정합니다.

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

웹페이지 템플릿 편집

index.html.eex를 간단하고 간단하게 편집합니다.

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

<section class="row">
  <article class="column">
    <div id="root"></div>
  </article>
</section>

app.js에 React JSX 구성 요소 작성

assets/js/app.js

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

const MyReactComponent = () => <div>こんにちは。React Component!!!</div>
ReactDOM.render(<MyReactComponent />, document.getElementById('root'))

서버 시작

프로젝트의 홈 디렉토리로 이동하여 서버를 시작합니다.

$ cd ../..
$ mix phx.server

홈 화면

index.html.eex 에 기술한 <div id="root"></div> 태그가 app.js 로 작성한 컴퍼넌트를 대신해 표시되고 있다.



일단 최소한의 준비가 됐다.