React on Rails Tutorial: Integrating React and Ruby on Rails 5.2

Table of Contents Prerequisites Initial Setup Cloning Migrate and Seed the Database Start Server Installing React on Rails Adding and Installing Gems Setting up Webpacker and React Setting up React on Rails Implementing the Search Component Replacing the Original Search Component Adding React Functionality to our Replacement Rendering the Dynamic Search Results Conclusion Preview Final Version Further Reading Prerequisites This tutorial assumes a basic understanding of Git, Ruby on Rails, and React/JavaScript..Ensure the following are installed on your device: Ruby on Rails v5.2 or greater Git Node/NPM/Yarn Initial Setup Cloning We begin by cloning the repository for our project from GitHub which includes the entire static website built with Ruby on Rails and no react integration..Use the following command to clone the repository: $ git clone https://github.com/danielrudn/app-garage After cloning, enter the app-garage folder: $ cd app-garage Migrate and Seed the Database Now that we pulled down the code for our project, we must prepare rails by migrating and seeding our database: $ rails db:migrate && rails db:seed Start Server Our database now has the correct schema and is seeded with initial sample data in order to easily visualize our code changes..We can now start the rails server (Note: it may take rails a while to start the server on its first run): $ rails server You can now head over to http://localhost:3000 and you’ll see that our base application is working..We can view the homepage, search for apps, and view specific apps..  Now that we have a working web app, we’re ready to improve it by integrating React on Rails and modifying the search functionality..Installing React on Rails Note: If you’re following this tutorial using a different existing Rails app or if you’re using a Rails version older than 5.1 you should take a look at the official react-on-rails documentation for integrating with existing rails projects..Adding and Installing Gems First, we must add the webpacker,  react_on_rails and mini_racer gems..Edit the Gemfile and add the following to the bottom of the file: .gist table { margin-bottom: 0; } After adding the gems to the Gemfile, install them with the following command: $ bundle install Setting up Webpacker and React Now that the required gems are installed, we can begin configuration..First, we configure Webpacker by running: $ bundle exec rails webpacker:install Now that webpacker is configured, we install and configure React: $ bundle exec rails webpacker:install:react We should now see the following in our terminal: Webpacker now supports react.js ????.Note: We can delete the autogenerated sample file: app/javascript/packs/hello_react.jsx Setting up React on Rails Currently, our project has Webpacker and supports React but we do not have an integration between React and Ruby on Rails..We need to add our changes to version control, so we add all of our changes and commit with the following command (Note: it’s important to commit our changes otherwise we will get warnings when continuing the tutorial): $ git add.. More details

Leave a Reply