{"id":1543,"date":"2017-04-13T11:44:59","date_gmt":"2017-04-13T02:44:59","guid":{"rendered":"http:\/\/lovelinux.mydns.jp\/?p=1543"},"modified":"2017-04-13T11:44:59","modified_gmt":"2017-04-13T02:44:59","slug":"rails%e3%81%a7reactjs%e3%82%92%e4%bd%bf%e3%81%86%e3%80%9c%e6%ba%96%e5%82%99%e7%b7%a8-2","status":"publish","type":"post","link":"https:\/\/lovelinux.mydns.jp\/?p=1543","title":{"rendered":"Rails\u3067ReactJS\u3092\u4f7f\u3046\u301c\u6e96\u5099\u7de8"},"content":{"rendered":"

Rails\u3067ReactJS\u3092\u4f7f\u3063\u3066\u307f\u3088\u3046\u3068\u3044\u3046\u4f01\u753b\u3092\u30b9\u30bf\u30fc\u30c8\u3057\u3066\u307f\u307e\u3059\u3002
\n\u307e\u305a\u306fRails\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u3063\u3066\u3001ReactJS\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u3066\u3001HelloWorld\u3092\u51fa\u529b\u3059\u308b\u3068\u3053\u308d\u307e\u3067\u306e\u6e96\u5099\u7de8\u3067\u3059\u3002<\/p>\n

\u3053\u308c\u304b\u3089\u4f55\u56de\u304b\u306b\u308f\u305f\u308a\u9023\u8f09\u3059\u308b\u5185\u5bb9\u306fGitHub\u306e\u4e0b\u8a18\u306eURL\u3067\u516c\u958b\u3057\u3066\u3044\u307e\u3059\u3002
\nhttps:\/\/github.com\/h-mito\/rails_with_react<\/a><\/p>\n

Rails\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u4f5c\u6210\u3001ReactJS\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h3>\n

[bash]
\n$ cd
\n$ cd workspace<\/p>\n

$ rails new rails_with_react
\n$ cd rails_with_react<\/p>\n

$ nano Gemfile
\n[\/bash]<\/p>\n

\u672b\u5c3e\u306b1\u884c\u8ffd\u52a0\u3059\u308b
\n[bash]
\n# …\u7701\u7565
\ngem ‘react-rails’, ‘~> 1.0’ # \u8ffd\u52a0\u3059\u308b
\n[\/bash]<\/p>\n

react-rails\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u3066\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306b\u7d44\u307f\u8fbc\u3080
\n[bash]
\n$ bundle install<\/p>\n

$ rails g react:install
\n[\/bash]<\/p>\n

React\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u4f5c\u6210\u3001Hello World\u4f5c\u6210<\/h3>\n

[bash]
\n$ rails g react:component FirstTest
\n[\/bash]<\/p>\n

\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u30bd\u30fc\u30b9\u304capp\/assets\/javascripts\/components\u306b\u751f\u6210\u3055\u308c\u308b\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n

[bash]
\nvar FirstTest = React.createClass({<\/p>\n

render: function() {
\n return <\/p>\n

;
\n }
\n});
\n[\/bash]<\/p>\n

\u3053\u308c\u3067\u3082\u554f\u984c\u306a\u3044\u306e\u3067\u3059\u304c\u3001ReactJS\u672c\u5bb6\u306e Get Started\u98a8\u306b\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u66f8\u304d\u63db\u3048\u307e\u3059\u3002
\n\u3067\u3001render\u30e1\u30bd\u30c3\u30c9\u306b Hello World\u306e\u51fa\u529b\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n

[bash]
\nclass FirstTest extends React.Component{
\n constructor(props){
\n super(props);
\n }<\/p>\n

render(){
\n return (<\/p>\n

Hello World!<\/h2>\n

);
\n }
\n}
\n[\/bash]<\/p>\n

\u30c6\u30b9\u30c8\u7528\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u4f5c\u6210<\/h3>\n

[bash]
\n$ rails g controller first index
\n[\/bash]<\/p>\n

React\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u51fa\u529b<\/h3>\n

views\u306b\u51fa\u6765\u4e0a\u304c\u3063\u305f\u30d3\u30e5\u30fc\u306b\u5148\u307b\u3069\u4f5c\u3063\u305fReact\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u51fa\u529b\u3057\u3066\u307f\u307e\u3059\u3002<\/p>\n

[bash]<\/p>\n

First#index<\/h1>\n

Find me in app\/views\/first\/index.html.erb<\/p>\n

<%= react_component('FirstTest') %>
\n[\/bash]<\/p>\n

\u52d5\u4f5c\u78ba\u8a8d<\/h3>\n

[bash]
\n$rails s
\n[\/bash]<\/p>\n

\u30d6\u30e9\u30a6\u30b6\u30fc\u3067 \u4ee5\u4e0b\u306eURL\u3078\u30a2\u30af\u30bb\u30b9\u3057\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u753b\u50cf\u304c\u51fa\u308c\u3070\u6210\u529f\u3002<\/p>\n

localhost:3000\/first\/index<\/p>\n

\"react5\"<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Rails\u3067ReactJS\u3092\u4f7f\u3063\u3066\u307f\u3088\u3046\u3068\u3044\u3046\u4f01\u753b\u3092\u30b9\u30bf\u30fc\u30c8\u3057\u3066\u307f\u307e\u3059\u3002 \u307e\u305a\u306fRails\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u3063\u3066\u3001ReactJS\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u3066\u3001HelloWorld\u3092\u51fa\u529b\u3059\u308b\u3068\u3053\u308d\u307e\u3067\u306e\u6e96\u5099\u7de8\u3067\u3059\u3002 \u3053\u308c\u304b\u3089\u4f55\u56de\u304b\u306b\u308f\u305f\u308a\u9023\u8f09\u3059\u308b\u5185\u5bb9\u306fGitHub\u306e\u4e0b\u8a18\u306eURL\u3067\u516c\u958b\u3057\u3066\u3044\u307e\u3059\u3002 https:\/\/github.com\/h-mito\/rails_with_react Rails\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u4f5c\u6210\u3001ReactJS\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb [bash] $ cd $ cd workspace $ rails new rails_with_react $ cd rails_with_react $ nano Gemfile [\/bash] \u672b\u5c3e\u306b1\u884c\u8ffd\u52a0\u3059\u308b [bash] # …\u7701\u7565 gem ‘react-rails’, ‘~> 1.0’ # \u8ffd\u52a0\u3059\u308b [\/bash] react-rails\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u3066\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306b\u7d44\u307f\u8fbc\u3080 [bash] $ bundle install $ rails g react:install [\/bash] React\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u4f5c\u6210\u3001Hello World\u4f5c\u6210 [bash] $ rails g react:component FirstTest [\/bash] \u4ee5\u4e0b\u306e\u3088\u3046\u306a\u30bd\u30fc\u30b9\u304capp\/assets\/javascripts\/components\u306b\u751f\u6210\u3055\u308c\u308b\u3068\u601d\u3044\u307e\u3059\u3002 [bash] var FirstTest = React.createClass({ render: function() { return ; } }); [\/bash] \u3053\u308c\u3067\u3082\u554f\u984c\u306a\u3044\u306e\u3067\u3059\u304c\u3001ReactJS\u672c\u5bb6\u306e Get Started\u98a8\u306b\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u66f8\u304d\u63db\u3048\u307e\u3059\u3002 \u3067\u3001render\u30e1\u30bd\u30c3\u30c9\u306b Hello World\u306e\u51fa\u529b\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002 [bash] class FirstTest extends React.Component{ constructor(props){ super(props); } render(){ return ( Hello World! ); } } [\/bash] \u30c6\u30b9\u30c8\u7528\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u4f5c\u6210 [bash] $ rails g controller first index [\/bash] React\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u51fa\u529b views\u306b\u51fa\u6765\u4e0a\u304c\u3063\u305f\u30d3\u30e5\u30fc\u306b\u5148\u307b\u3069\u4f5c\u3063\u305fReact\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u51fa\u529b\u3057\u3066\u307f\u307e\u3059\u3002 [bash] First#index Find me in app\/views\/first\/index.html.erb [\/bash] \u52d5\u4f5c\u78ba\u8a8d [bash] $rails s [\/bash] \u30d6\u30e9\u30a6\u30b6\u30fc\u3067 \u4ee5\u4e0b\u306eURL\u3078\u30a2\u30af\u30bb\u30b9\u3057\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u753b\u50cf\u304c\u51fa\u308c\u3070\u6210\u529f\u3002 localhost:3000\/first\/index<\/p>\n","protected":false},"author":1,"featured_media":1339,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[6,77],"tags":[71,72],"class_list":{"0":"post-1543","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-rails","8":"category-react","9":"tag-rails","10":"tag-reactjs"},"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t