rails使用前端React框架的相關配置

在rails中使用React.js框架相關的配置記錄

目標：

1. 建立基礎項目
2. 配置項目熱加載

1. 建立基礎項目

首先使用rails new命令建立一個rails的基礎項目，完整的命令以下：

rails new railsUseReact --skip-turbolinks --skip-coffee --webpack=react

執行上述命令時稍微要等待一會，安裝完畢以後便可繼續。

2. 配置項目熱加載

如今有了一個模板項目，咱們須要建立一個路由用於測試。執行以下命令建立一個新的路由：

rails g controller Welcome index

接着咱們須要開兩個控制檯, 分別在項目根目錄執行以下命令

# 控制檯1
rails s
複製代碼

# 控制檯2
bin/webpack-dev-server
複製代碼

瀏覽器訪問：http://localhost:3000/welcome/index 能夠看到咱們建立的頁面

接下來咱們先來看看模板項目爲咱們建立的一個javascript目錄，它用來存放React.js組件相關的代碼：

➜  railsUseReact git:(master) ✗ tree app/javascript
app/javascript
└── packs
    ├── application.js
    └── hello_react.jsx # 這裏是一個React組件咱們會使用它
複製代碼

而後修改app/views/welcome/index.html.erb使用javascript_pack_tag加載咱們的hello_react組件，代碼以下：

文件：app/views/welcome/index.html.erb

<h1>Welcome#index</h1>
<%= javascript_pack_tag 'hello_react' %>
複製代碼

刷新瀏覽器咱們能夠看到以下的輸出:

Welcome#index
Hello React!
複製代碼

以上的修改能夠查看提交記錄

接着咱們須要來對app/javascript/packs/hello_react.jsx組件進行一些改動，hello_react.jsx只保留入口組件。咱們把真正的Hello組件單獨存放。

建立以下的目錄和文件：

➜  railsUseReact git:(master) ✗ tree app/javascript
app/javascript
├── components
│   └── Hello
│       ├── index.js
│       └── style.css
└── 其餘文件
複製代碼

修改Hello組件爲以下的內容：

文件：app/javascript/components/Hello/index.js

import React from 'react';
import PropTypes from 'prop-types';
import './style.css';

class Hello extends React.Component {
  render() {
    return (
      <div className="hello">Hello {this.props.name}!</div>
    )
  }
}

Hello.defaultProps = {
  name: 'David'
}

Hello.propTypes = {
  name: PropTypes.string
}

export default Hello;
複製代碼

文件: app/javascript/packs/hello_react.jsx

import React from 'react'
import ReactDOM from 'react-dom'
import Hello from '../components/Hello';

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <Hello name="React" />, document.body.appendChild(document.createElement('div')), ) }) 複製代碼

再次刷新瀏覽器能夠看到以下內容：

Welcome#index
Hello React!
複製代碼

一切工做正常，接下來就配置熱加載

啓動webpack熱加載

文件：config/webpacker.yml

dev_server:
    hmr: true # 這裏修改成true便可啓動熱加載
複製代碼

而後咱們須要更新hello_react.jsx組件裏面的內容使熱加載是能夠從新渲染組件

文件: app/javascript/packs/hello_react.jsx

import React from 'react'
import ReactDOM from 'react-dom'
import Hello from '../components/Hello';

const renderApp = (Component) => {
  ReactDOM.render(
    <Component name="React" />,
    document.body.appendChild(document.createElement('div')),
  )
}
document.addEventListener('DOMContentLoaded', () => {
  renderApp(Hello);
})

if (process.env.NODE_ENV !== 'production' && module.hot) {
  module.hot.accept('../components/Hello', () => {
    const NextHello = require('../components/Hello').default;
    renderApp(NextHello);
  });
}
複製代碼

接着安裝react-hot-loader包來自動進行熱替換，命令以下：

./bin/yarn add react-hot-loader
複製代碼

而後修改咱們的Hello組件使用react-hot-loader包裝

文件： app/javascript/components/Hello/index.js

import React from 'react';
import PropTypes from 'prop-types';
import { hot } from 'react-hot-loader';
import './style.css';

class Hello extends React.Component {
  render() {
    return (
      <div className="hello">Hello {this.props.name}!123</div>
    )
  }
}

Hello.defaultProps = {
  name: 'David'
}

Hello.propTypes = {
  name: PropTypes.string
}

export default hot(module)(Hello);
複製代碼

重啓服務，而後再次訪問一些正常。你能夠嘗試修改一下app/javascript/components/Hello/index.js組件的內容好比以下代碼，能夠經過Chrome 調試中的 Network查看頁面並無刷新而後組件的數據已經從新加載過了

以上的修改能夠查看提交記錄

整個配置完畢，感謝收看