How to integrate react.js and ruby on rails

4 different ways to use react on rails

1. Using only Rails 5 webpack methods
2. Using rails-api mode and react separately
3. Using react_on_rails gem
4. Using react-rails gem

1. Using only Rails 5 webpack methods

1. Create a new rails app with this command

rails new lyntour --webpack=react --database=postgresql -T --skip-coffee --skip-sprockets

2. Using rails-api mode and react separately

1. Create a new rails app in api mode

rails new _5.1.5_ lyntour-api --api --database=postgresql -T

1. Create react app separately on different directory

npx create-react-app lyntour-front

3. Using react_on_rails gem

1. create a new rails app with this command

rails new lyntour --webpack=react --database=postgresql -T

1. install react_on_rails and install

rails generate react_on_rails:install
bundle && yarn

4. Using react-rails gem

1. create a new rails app

rails new lyntour
cd lyntour

1. Add webpacker and react-rails to your gemfile:

gem 'webpacker'
gem 'react-rails'

1. Now run the installers:

bundle install
rails webpacker:install       # OR (on rails version < 5.0) rake webpacker:install
rails webpacker:install:react # OR (on rails version < 5.0) rake webpacker:install:react
rails generate react:install

My preferences are 1 and 2

References

• Option 2

  • https://x-team.com/blog/get-in-full-stack-shape-with-rails-5-1-webpacker-and-reactjs/

• Option 3

  • https://medium.com/superhighfives/a-top-shelf-web-stack-rails-5-api-activeadmin-create-react-app-de5481b7ec0b
  • https://www.fullstackreact.com/articles/how-to-get-create-react-app-to-work-with-your-rails-api/
  • https://www.sitepoint.com/react-rails-5-1/