使用react-rails在Rails中引入React

10 月 ago

1 minute

大家好，本次我们将介绍一种在Rails中使用”react-rails” gem来引入React的方法。虽然有多种方法可以在Rails中引入React，但我选择了这种简单和常见的方法。需要注意的是，这种方法会使代码与Rails有密切关联，因此可能会引起一些喜好分歧。

此外，公式文件可以通过以下URL访问。
react-rails的URL：https://github.com/reactjs/react-rails#server-side-rendering

我会按照以下的流程进行介绍。

veiwで出力

前提 – premise

Note: The phrase “前提” is already in Chinese.

1. 已经使用rails-new等方法创建了应用程序。
2. 使用了rails5.0之后的版本。

引入react-rails

请在Gemfile的底部添加以下内容。

gem 'webpacker'
gem 'react-rails'

请事先确认根据 Rails 版本的不同，可能会默认安装“webpacker”，请确保已做检查。
请使用 cd 命令等将目标应用程序目录切换至。
接下来，按照以下命令顺序执行。

$ bundle install
/*①*/ $ rails webpacker:install
/*②*/ $ rails webpacker:install:react
$ rails generate react:install

注意！只能在Rails 5.0及以上的版本中执行①和②命令。

暂时准备工作完成了！

创建组件

通常情况下，编写React需要在名为components的目录中创建文件。您可以手动创建，但建议按照官方文档进行创建。请在终端或其他地方执行以下命令。

$ rails g react:component HelloWorld greeting:string

然后将创建下面的文件。

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

用这个就完成了文件的创建。

在veiw上输出

让我们从创建的组件中输出React的内容。

<%= react_component('HelloWorld', greeting: 'Mike') %>

让我们在浏览器中查看输出内容。
应该输出为“问候：Mike”。

除了components目录以外，您也可以自己创建目录。
请运行以下命令。

$ rails g react:component my_subdirectory/HelloWorld greeting:string

然后，之前执行的命令会在components目录下创建一个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

如果在命令中指定的“my_subdirectory”下创建了js文件，那么请在视图中添加以下内容来调用。

<%= react_component("my_subdirectory/HelloWorld", { greeting: "Hello from react-rails." }) %>

当你检查浏览器时，应该输出”Greeting: Hello from react-rails.”

由于可以使用react_component方法轻松调用，这非常方便。
我也是刚刚开始使用，所以我打算从现在开始尝试各种修改。

最近越来越多的日子变得寒冷了，我都快冻僵了，只能用僵硬的手像模特一样敲击键盘。（要是开暖气就好了啊…）

感谢您阅读到最后！！