Rails + React + WebPack 환경 세팅 및 React 사용해보기

yarn add react react-dom react-prop-types react-router-dom semantic-ui-react react_ujs

yarn add babel-core babel-loader babel-preset-env babel-preset-react babel-preset-stage-1 css-loader style-loader html-webpack-plugin webpack webpack-dev-server webpack-cli -D
htt

gem 'webpacker'
gem 'react-rails'

$ bundle install
$ rails webpacker:install       # OR (on rails version < 5.0) rake webpacker:install

[webpacker.yml]
check_yarn_integrity = false 
변경 후 

$ rails webpacker:install:react # OR (on rails version < 5.0) rake webpacker:install:react
$ rails generate react:install

해당 설정이 모두 완료되면, Rails 에서 React가 사용 가능하다! 

(배포의 경우, 따로 capistrano에서 추가할 gem은 없다.)

다만, NodeJS의 버전은 v6 이상이여야하고, yarn이 설치되어 있어야 한다. 

[application.html]

turbolink tag 아래에 삽입

<%= javascript_pack_tag 'application' %>

해당 코드를 추가한다.  

$ rails g react:component HelloWorld greeting:string

로 React component를 만들면, app/javascript/components 내에 hello_world.js.jsx 파일이 생성 된다. 

기존에 있는 프로젝트에 webpack build 시 에러가 나는 케이스는 자동으로 generate된 javascript 폴더를 확인한다. 

webpacker.yml에 source_path가 app/javascript로 지정되어 있는데 rails 내부에서는 app/assets/javascripts 에 생성된다. 

일단 기존에 쓰던 javascripts와 분리하여 설치할 경우, 

app/javascript 폴더 내에 packs와 componenets (React용 javascript 파일이 들어갈) 위치하도록 수정한다. 

app/javascript/components에 HelloWorld.js 파일을 만든 뒤, 

import React from "react"
import PropTypes from "prop-types"
class HelloWorld extends React.Component {
  render () {
    return (
      <React.Fragment>
        Greeting: {this.props.greeting}
      </React.Fragment>
    );
  }
}

HelloWorld.propTypes = {
  greeting: PropTypes.string
};
export default HelloWorld

index.html.erb 에서 해당 모듈을 로딩해본다. 

<%= react_component("HelloWorld", { greeting: "Hello from react-rails." }) %>

정상적으로 로딩되는 지 확인해본다. 

추가적으로 크롬에서 React를 디버깅하는 툴을 다운받아 설치한다. 

기본적인 React의 개발환경은 모두 갖추어졌다!

다음 번엔 이어서 Rails 모델의 index 페이지를 React로 구현해보는 포스팅을 올릴 예정입니다.