react-rails 및 web packer를 사용하여 Rails 응용 프로그램에서 React 실행

Rails 애플리케이션에서 React를 사용하려면 무엇이 필요한지 알고 싶습니다.
조사한 곳은 최근webpacker과 react-rails의 조합으로 도입이 쉬울 것 같아서 시도해봤습니다.

전제 조건

환경 확인

Rails 5.1.6

ruby 2.4.3

Mac OS X 10.13.4

Gem 활용 정보

webpacker

웹 페이지 패키지는 Rails에서 JavaScript의 모듈 트리거Webpack를 간단하게 사용할 수 있는 Gem의 프로그램 라이브러리입니다.
GitHub - rails/webpacker: Use Webpack to manage app-like JavaScript modules in Rails

react-rails

react-rails는 Rails에서 React를 쉽게 사용할 수 있는 도구를 탑재한 Gem입니다.Webpacker 및 Sprockets도 지원됩니다.
GitHub - reactjs/react-rails: Integrate React.js with Rails views and controllers, the asset pipeline, or webpacker.

대상 확인

이번에는 사용법을 확인하기 위해react-rails의 READMEGet started with Webpacker를 시험해 보고 싶습니다.

검증 프로그램

rails 샘플 프로그램 만들기

먼저 Rails의 샘플 응용 프로그램을 만듭니다.

$ rails new react-rails-example
$ cd react-rails-example

Gem 설치

이번에 사용한 웹 패키지와 react-rails를Gemfile에 추가bundle install합니다.

$ vim Gemfile

Gemfile

# 下記2つの Gem 追加
gem 'webpacker'
gem 'react-rails'

$ bundle install

웹 패키지 설치

웹 패커에 필요한 config 파일과 JavaScript를 사용하는 모듈을 설치합니다.

$ rails webpacker:install 

React 설치

웹 패키지 관리 형식, React.js를 설치합니다.

$ rails webpacker:install:react

react-rails 초기 설정

react-rails를 사용하기 전에 React Component의 읽기 경로 등 초기 설정을 수행합니다.

$ rails generate react:install

React의 Component 제작

react-rails 명령을 사용하여 React의 Component를 만듭니다.

$ rails g react:component HelloWorld greeting:string

이런 파일을 만듭니다.
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

React의 Component 표시

Controller 만들기

위에서 작성한 Component를 화면에 표시하기 위해 검증용 Controller를 제작합니다.

$ rails generate controller Welcomes

View 생성

view 파일을 편집합니다.

$ vim app/views/welcomes/index.html.erb

react-rails를 설치하면 react_componenthelper를 사용할 수 있으며 방금 생성된 HelloWorldComponent를 지정할 수 있습니다.
proops를 지정할 수도 있습니다.
app/views/welcomes/index.html.erb

<%= react_component("HelloWorld", { greeting: "Hello" }) %>

경로 편집

루트에 액세스하는 뷰를 React의 View로 전환합니다.

$ vim config/routes.rb

config/routes.rb

Rails.application.routes.draw do
  root 'welcomes#index'
end

javascript_pack_시간을 지정하다

Rails가 웹 패키지를 통해 전송하는 JavaScript 파일을 읽을 수 있도록 웹 패키지의 javascript_pack_tag helper를 지정합니다.
우리도 Rails를 통해 방금 React의 샘플Component 파일을 읽을 수 있습니다.
app/views/layouts/application.html.erb

<%= javascript_pack_tag 'application' %>

웹 팩-dev-server 시작

부팅webpack-dev-server.webpack-dev-server는 웹 팩을 활용한 개발 서버로 자바스크립트 파일을 웹 팩으로 연결하면서 자바스크립트 파일이 변경된 경우 핫 리셋 형식으로 연결하는 편리한 서버다.
웹 패키지를 설치하는 동시에 사용할 수 있습니다.

$ bin/webpack-dev-server

Rails 애플리케이션 시작

Rails 애플리케이션을 시작bin/webpack-dev-server한 상태에서 시작합니다.

$ rails s

화면 확인

방문http://localhost:3000, 화면에'그레이팅:Hello'를 표시하면 OK.

끝맺다

이번에는 강좌의 형식을 따라 README와 문서를 읽은 후에 다른 사용 방법을 시험해 보고 싶습니다.

참조 링크

GitHub - rails/webpacker: Use Webpack to manage app-like JavaScript modules in Rails

GitHub - reactjs/react-rails: Integrate React.js with Rails views and controllers, the asset pipeline, or webpacker.

Rails5+webpacker+React를 시도했습니다.

웹 패키지의 Rails에서 React 가져오기 전의 절차서

react-rails로 리액션을 하는 Tutorial