Hanami + FuseBox + React.js

About

리액트이전 글를 연습하고 싶어서 계속 리액트로 한다.js를 가져옵니다.

Setup

hanami g app 새로운 응용 프로그램을 제작한다.(이름은 뭐든지 가능)
shell

hanami g app react

Asseets 사용 안 함, FuseBox 설치까지 하고 표시할 페이지를 만듭니다.이번에 타입 스크립트로 쓰지 않은 설정fuse.js은 조금 달라졌다.
apps/react/fuse.js

const path = require('path');
const publicPath = path.resolve(__dirname, '..', '..', 'public');

const { FuseBox } = require('fuse-box');
const fuse = FuseBox.init({
  homeDir : 'frontend',
  target  : 'browser@es6',
  output  : `${publicPath}/$name.js`,
  useTypescriptCompiler: true,
  plugins : [
  ],
  shim : {
  }
});
fuse.bundle('react-app').instructions('> application.js').watch('frontend/**');
fuse.run();

shell

hanami g action react page#index

apps/react/config/routes.rb

root to: 'page#index'

apps/react/templates/page/index.html.haml

%h1 Index

%p Hello, with index!

apps/react/templates/application.html.haml

!!!
%html
  %head
    %title React
  %body
    = yield
  %script{ type: 'text/javascript', src: 'react-app.js' }

apps/react/frontend/application.js

console.log('Hello FuseBox.');

yarn build 이후 hanami s에 액세스localhost:2300/react하고 콘솔에 표시되면 OK.

Babel setup

apps/react 디렉토리에서 다음 작업을 수행합니다.
shell

yarn add babel-core babel-preset-es2015 babel-plugin-transform-react-jsx -D

apps/react/fuse.js

- const { FuseBox } = require('fuse-box');
+ const { FuseBox, BabelPlugin } = require('fuse-box');
...
+ plugins : [
+     BabelPlugin({
+       presets : ["es2015"],
+       plugins : [
+         ["transform-react-jsx"]
+       ]
+     })
+   ],
...
- fuse.bundle('react-app').instructions('> application.js').watch('frontend/**');
+ fuse.bundle('react-app').instructions('> application.jsx').watch('frontend/**');

application.js를 application.jsx로 개명하다.

React.js setup

Babel setup과 마찬가지로apps/react 디렉토리에서 다음 작업을 수행합니다.
shell

yarn add react react-dom

apps/react/frontend/application.jsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello, React.js!</h1>,
  document.getElementById('hello')
);

apps/react/templates/page/index.html.haml

- %h1 Index
- 
- %p Hello, with index!
+ #hello

그리고 yarn build와 hanami s에서 잘못된 표시가 없으면 성공할 수 있음을 확인했다.

덤

코드의 참고여기..

참고 자료

React JSX transform - babel

Add React to an Existing Application

FuseBox - Babel Plugin

FuseBox - Start with JavaScript