![\"rr-2\"](\"http:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2017\/04\/rr-2.png\")
<\/a><\/p>\n\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u306fGitHub\u3067\u516c\u958b\u3057\u3066\u3044\u307e\u3059\u3002\u5229\u7528\u65b9\u6cd5\u306f\u3001\u8a18\u4e8b\u306e\u672b\u5c3e\u3092\u53c2\u7167\u304f\u3060\u3055\u3044\u3002<\/p>\n
Rails\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u4f5c\u6210<\/h3>\n
[bash]
\n$ rails new react_router_with_redux<\/p>\n
$ cd react_router_with_redux\/
\n[\/bash]<\/p>\n
Gem\u3092\u8abf\u6574\u3057\u3066\u3001bundle install<\/h4>\n
[bash]
\n$ nano Gemfile
\n[\/bash]<\/p>\n
[bash]
\ngem ‘therubyracer’, platforms: :ruby
\ngem ‘react-rails’
\ngem ‘browserify-rails’
\n[\/bash]<\/p>\n
[bash]
\n$ bundle install
\n[\/bash]<\/p>\n
application.rb\u3092\u7de8\u96c6<\/h3>\n
\u4f5c\u3063\u305f ES6\uff08JavaScript\u306e\u30d0\u30fc\u30b8\u30e7\u30f3\uff09\u306e\u30bd\u30fc\u30b9\u3092ES5\u306b\u81ea\u52d5\u5909\u63db\u3059\u308b\u305f\u3081\u306e\u8a2d\u5b9a\u3092\u8ffd\u8a18
\nconfig.browserify_rails\u3000\u306e\u884c\u3092\u8ffd\u52a0<\/p>\n
config\/application.rb<\/p>\n
[bash]
\nrequire_relative ‘boot’<\/p>\n
require ‘rails\/all’<\/p>\n
# Require the gems listed in Gemfile, including any gems
\n# you’ve limited to :test, :development, or :production.
\nBundler.require(*Rails.groups)<\/p>\n
module RailsRedux
\n class Application < Rails::Application\n # Settings in config\/environments\/* take precedence over those specified here.\n # Application configuration should go into files in config\/initializers\n # -- all .rb files in that directory are automatically loaded.\n+ config.browserify_rails.commandline_options = '-t babelify'\n end\nend\n\n[\/bash]\n\n\n\n
Rails \u306b React\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h3>\n
[bash]
\n$ rails g react:install
\n[\/bash]<\/p>\n
application.js\u306e\u7de8\u96c6<\/h3>\n
app\/assets\/javascripts\/application.js<\/p>\n
\u30fbReact\u306f npm\u3067\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u305f\u3082\u306e\u3092\u4f7f\u3046\u306e\u3067\u30ab\u30c3\u30c8\u3002
\n\u30fbrequire_tree . \u3082\u30ab\u30c3\u30c8<\/p>\n
\u5909\u66f4\u524d<\/p>\n
[bash]
\n\/\/= require jquery
\n\/\/= require jquery_ujs
\n\/\/= require turbolinks
\n\/\/= require react
\n\/\/= require react_ujs
\n\/\/= require components
\n\/\/= require_tree .
\n[\/bash]<\/p>\n
\u5909\u66f4\u5f8c<\/p>\n
[bash]
\n\/\/= require jquery
\n\/\/= require jquery_ujs
\n\/\/= require turbolinks
\n\/\/= require react_ujs
\n\/\/= require components
\n[\/bash]<\/p>\n
React\u3001Redux\u3001etc\u2026\u306e\u6e96\u5099(node_modules\uff09<\/h3>\n
React\u3001Redux\u3001React-Router\u305d\u306e\u4ed6\u8af8\u3005\u3092 npm \u3092\u4f7f\u3063\u3066\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002<\/p>\n
[bash]
\n$ npm init -y
\n$ npm install –save-dev browserify browserify-incremental babelify babel-preset-es2015 babel-preset-react<\/p>\n
$ npm install –save react react-dom react-redux redux redux-thunk react-router-dom<\/p>\n
[\/bash]<\/p>\n
.babelrc \u30d5\u30a1\u30a4\u30eb\u3092Rails\u306e\u30eb\u30fc\u30c8\u30d5\u30a9\u30eb\u30c0\u306b\u4f5c\u6210<\/h3>\n
[bash]
\n{
\n “presets”: [“es2015”, “react”]
\n}
\n[\/bash]<\/p>\n
Redux\u306e\u6a19\u6e96\u7684\u306a\u30d5\u30a9\u30eb\u30c0\u3092\u4f5c\u6210<\/h3>\n
[bash]
\n$ cd app\/assets\/javascripts\/
\n$ mkdir actions containers reducers
\n[\/bash]<\/p>\n
components.js\u7de8\u96c6<\/h3>\n
app\/assets\/javascripts\/components.js<\/p>\n
\u30a2\u30d7\u30ea\u540d\u306f \u300cMyApp\u300d\u3068\u3057\u307e\u3059\u3002<\/p>\n
myapp.js\u306f\u30a2\u30d7\u30ea\u306e\u30a8\u30f3\u30c8\u30ea\u30fc\u30dd\u30a4\u30f3\u30c8\u3068\u306a\u308bJS\u30d5\u30a1\u30a4\u30eb\u3067\u3059\u3002\u3053\u3053\u306b\u5b9a\u7fa9\u3057\u305f\u30af\u30e9\u30b9\u540d\uff08const\u5ba3\u8a00\uff09\u3092
\nwindow\u306e\u4e0b\u306b\u30bb\u30c3\u30c8\uff08\u5909\u6570\u3068\u3057\u3066\u516c\u958b\uff09\u3057\u3066\u3084\u308b\u3002<\/p>\n
\u5909\u66f4\u524d<\/p>\n
[bash]
\n\/\/= require_tree .\/components
\n[\/bash]<\/p>\n
\u5909\u66f4\u5f8c<\/p>\n
[bash]
\nwindow.React = require(‘react’);
\nwindow.ReactDOM = require(‘react-dom’);
\nwindow.MyApp = require(‘.\/myapp.js’);<\/p>\n
[\/bash]<\/p>\n
Redux\u3067\u30ab\u30a6\u30f3\u30bf\u30fc\u30a2\u30d7\u30ea\u3001\uff0b\u9759\u7684\u30da\u30fc\u30b8\u3092\u3072\u305f\u3059\u3089\u4f5c\u308b<\/h3>\n
\u3053\u3053\u4ee5\u964d\u3001\u3057\u3070\u3089\u304f\u306f\u3001Redux\u3067\u30ab\u30a6\u30f3\u30bf\u30fc\u306e\u30a4\u30f3\u30af\u30ea\u30e1\u30f3\u30c8\u3001\u30c7\u30af\u30ea\u30e1\u30f3\u30c8\u3067\u304d\u308b\u30a2\u30d7\u30ea\u3092\u4f5c\u308a\u307e\u3059\u3002
\n\u52a0\u3048\u3066\u3001\u9759\u7684\u30da\u30fc\u30b8\u3082\u3044\u304f\u3064\u304b\u4f5c\u308a\u307e\u3059\u3002
\n\u4f55\u3082\u8003\u3048\u305a\u306b\u30bd\u30fc\u30b9\u3092\u30b3\u30d4\u30fc\u3057\u3066\u3044\u3063\u3066\u3084\u3063\u3066\u304f\u3060\u3055\u3044\u30fb\u30fb\u30fb<\/p>\n
app\/assets\/javascripts\/actions\/index.js
\n[bash]
\nexport const counter_increment = () => {
\n return {
\n type: “INCREMENT”
\n }
\n}<\/p>\n
export const counter_decrement = () => {
\n return {
\n type: “DECREMENT”
\n }
\n}<\/p>\n
[\/bash]<\/p>\n
app\/assets\/javascripts\/components\/About.js
\n[bash]
\nimport React from “react”<\/p>\n
const About = () => {
\n return (<\/p>\n
)
\n}<\/p>\n
export default About<\/p>\n
[\/bash]<\/p>\n
app\/assets\/javascripts\/components\/Contact.js
\n[bash]
\nimport React from “react”<\/p>\n
const Contact = () => {
\n return (<\/p>\n
This is Contact Page<\/h2>\n<\/p><\/div>\n
)
\n}<\/p>\n
export default Contact<\/p>\n
[\/bash]<\/p>\n
app\/assets\/javascripts\/components\/Counter.js
\n[bash]
\nimport React from “react”<\/p>\n
const Counter = ({counter, onIncrement, onDecrement}) => {<\/p>\n
return (<\/p>\n