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查看页面并无刷新而后组件的数据已经从新加载过了

以上的修改能够查看提交记录

整个配置完毕，感谢收看