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


Server/Frontend 2019.03.25 16:31



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로 구현해보는 포스팅을 올릴 예정입니다.

오늘의 블록체인 뉴스

WRITTEN BY
ShakeJ

트랙백  0 , 댓글  0개가 달렸습니다.
secret