rails new react-app --webpack=react

rails webpacker:install

rails generate react:install

// Run this example by adding <%= javascript_pack_tag 'hello_react' %> to the head of your layout file,
// like app/views/layouts/application.html.erb. All it does is render <div>Hello React</div> at the bottom
// of the page.

import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'

const Hello = props => (
  <div>Hello {props.name}!</div>
)

Hello.defaultProps = {
  name: 'David'
}

Hello.propTypes = {
  name: PropTypes.string
}

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <Hello name="React" />,
    document.body.appendChild(document.createElement('div')),
  )
})

rails g controller pages index

# app/controllers/pages_controller.rb

class PagesController < ApplicationController
  def index
  end
end

# config/routes.rb

Rails.application.routes.draw do
  get 'pages/index'
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end

# app/views/pages/index.html.erb

<h1>Pages#index</h1>
<p>Find me in app/views/pages/index.html.erb</p>

# app/controllers/pages_controller.rb

class PagesController < ApplicationController
  def index
  end
end

# config/routes.rb

Rails.application.routes.draw do
  root 'pages#index'
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end

# app/views/pages/index.html.erb

<%= javascript_pack_tag 'hello_react' %>

rails s

# app/javascript/packs/index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from '../components/App';

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <App />,
    document.body.appendChild(document.createElement('div')),
  )
});

# app/javascript/components/App.js

import React, { Component } from 'react';

class App extends Component {
  render(){
    return(
      <div>Hello from app.js</div>
    )
  }
}

export default App;

rails s

./bin/yarn add react-router-dom

# app/javascript/packs/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import App from '../components/App';

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <Router>
      <Route path='/' component={App} />
    </Router>,
    document.body.appendChild(document.createElement('div')),
  )
});

# app/javascript/components/App.js

import React, { Component } from 'react';
import { Route, Switch } from 'react-router-dom';
import About from './About';
import Contact from './Contact';
import Home from './Home';

class App extends Component {
  render(){
    return(
      <div>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/about" component={About} />
          <Route exact path="/contact" component={Contact} />
        </Switch>
      </div>
    )
  }
}

export default App;

rails s
bundle exec ./bin/webpack-dev-server

# config/routes.rb

Rails.application.routes.draw do
  root 'pages#index'
  match '*path', to: 'pages#index', via: :all
end

# app/javascript/components/App.js

import React, { Component } from 'react';
import { Route, Switch, Link } from 'react-router-dom';
import About from './About';
import Contact from './Contact';
import Home from './Home';

class App extends Component {
  render(){
    return(
      <div>
        <nav>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/contact">Contact</Link></li>
        </nav>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/about" component={About} />
          <Route exact path="/contact" component={Contact} />
        </Switch>
      </div>
    )
  }
}

export default App;

gem 'webpacker'
gem 'react-rails'

bundle install
rails webpacker:install       
rails webpacker:install:react
rails generate react:install

# app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>MyApp2</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>