Open monsterooo opened 5 years ago
在rails中使用React.js框架相关的配置记录
首先使用rails new命令创建一个rails的基础项目,完整的命令如下:
rails new
rails new railsUseReact --skip-turbolinks --skip-coffee --webpack=react
执行上述命令时稍微要等待一会,安装完毕之后即可继续。
现在有了一个模板项目,我们需要创建一个路由用于测试。执行如下命令创建一个新的路由:
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
javascript_pack_tag
文件: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组件单独存放。
app/javascript/packs/hello_react.jsx
hello_react.jsx
创建如下的目录和文件:
➜ 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')), ) })
再次刷新浏览器可以看到如下内容:
一切工作正常,接下来就配置热加载
启动webpack热加载
文件:config/webpacker.yml
dev_server: hmr: true # 这里修改为true即可启动热加载
然后我们需要更新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包来自动进行热替换,命令如下:
react-hot-loader
./bin/yarn add react-hot-loader
然后修改我们的Hello组件使用react-hot-loader包装
Hello
文件: 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查看页面并没有刷新然后组件的数据已经重新加载过了
app/javascript/components/Hello/index.js
整个配置完毕,感谢收看
在rails中使用React.js框架相关的配置记录
目标:
1. 创建基础项目
首先使用
rails new
命令创建一个rails的基础项目,完整的命令如下:rails new railsUseReact --skip-turbolinks --skip-coffee --webpack=react
执行上述命令时稍微要等待一会,安装完毕之后即可继续。
2. 配置项目热加载
现在有了一个模板项目,我们需要创建一个路由用于测试。执行如下命令创建一个新的路由:
rails g controller Welcome index
接着我们需要开两个控制台, 分别在项目根目录执行如下命令
浏览器访问:http://localhost:3000/welcome/index 可以看到我们创建的页面
接下来我们先来看看模板项目为我们创建的一个javascript目录,它用来存放React.js组件相关的代码:
然后修改
app/views/welcome/index.html.erb
使用javascript_pack_tag
加载我们的hello_react组件,代码如下:文件:app/views/welcome/index.html.erb
刷新浏览器我们可以看到如下的输出:
以上的修改可以查看提交记录
接着我们需要来对
app/javascript/packs/hello_react.jsx
组件进行一些改动,hello_react.jsx
只保留入口组件。我们把真正的Hello组件单独存放。创建如下的目录和文件:
修改Hello组件为如下的内容:
文件:app/javascript/components/Hello/index.js
文件: app/javascript/packs/hello_react.jsx
再次刷新浏览器可以看到如下内容:
一切工作正常,接下来就配置热加载
启动webpack热加载
文件:config/webpacker.yml
然后我们需要更新
hello_react.jsx
组件里面的内容使热加载是可以重新渲染组件文件: app/javascript/packs/hello_react.jsx
接着安装
react-hot-loader
包来自动进行热替换,命令如下:然后修改我们的
Hello
组件使用react-hot-loader包装文件: app/javascript/components/Hello/index.js
重启服务,然后再次访问一些正常。你可以尝试修改一下
app/javascript/components/Hello/index.js
组件的内容比如如下代码,可以通过Chrome 调试中的 Network查看页面并没有刷新然后组件的数据已经重新加载过了以上的修改可以查看提交记录
整个配置完毕,感谢收看