[With back tricks] How to introduce React to the simplest Rails

The Rails + React or Vue configuration is very popular in modern web companies. This time, we will introduce React to Rails, which is gaining momentum with the introduction of hook.

Execution environment

ruby 2.6.3p62 Rails 6.0.2.2

Install Gem

You need to install Gem to use Helper. Add the following to the Gemfile and bundle install

Gemfile


gem 'react-rails'
#Rails 5 series also added the following
gem 'webpacker'

Install React

Execute the following command in the terminal.

terminal


$ bin/rails wepacker:install:react
$ bin/rails g react:install

#In Rails 5 series, also execute the following
$ bin/rails webpacker:install

Then the following changes will be added.

** Added app / javascript / components / directory ** React files will be created here.

** Added processing to embed React in app / javascript / packs / application.js **

app/javascript/packs/application.js


//The following code is added at the end
// Support component names relative to this directory:
var componentRequireContext = require.context("components", true);
var ReactRailsUJS = require("react_ujs");
ReactRailsUJS.useContext(componentRequireContext);

** Added server-side rendering (SSR) to app / javascript / packs / server_rendering.js **

app/javascript/packs/server_rendering.js


//The following code is added at the end
// By default, this pack is loaded for server-side rendering.
// It must expose react_ujs as `ReactRailsUJS` and prepare a require context.
var componentRequireContext = require.context("components", true);
var ReactRailsUJS = require("react_ujs");
ReactRailsUJS.useContext(componentRequireContext);

ruby:app/views/layouts/applicationi.html.erb


<%= javascript_pack_tag 'application' %>

The preparation is complete.

Creating a component

As a test, create a component called Hello World. Execute the following command.

terminal


$ bin/rails g react:component HelloWorld greeting:string
Running via Spring preloader in process 12477
      create  app/javascript/components/HelloWorld.js

greeting: string is the argument name and type respectively. Then, the following file will be generated.

app/javascript/components/HelloWorld.js


import React from "react"
import PropTypes from "prop-types"
class HelloWorld extends React.Component {
  render () {
    return (
      <React.Fragment>
        Greeting: {this.props.greeting}
      </React.Fragment>
    );
  }
}

HelloWorld.propTypes = {
  greeting: PropTypes.string
};
export default HelloWorld

Introduced to Rails

Add the following code to the place where you want to apply the component in the rails ʻerbfile, and the installation is complete!<%= react_component("HelloWorld", { greeting: "Hello from react-rails." }) %>`

Tricks!

The code that is automatically added to ʻapp / javascript / packs / application.jswhen React is installed is ** the process of reading the React code on all pages **, so it also applies to pages where React is not installed. And the response will be reduced. Delete the automatically added part, ** only on the page where React is introduced **<%= javascript_pack_tag 'server_rendering.js' %>` You can avoid this by adding.

Recommended Posts

[With back tricks] How to introduce React to the simplest Rails
[Rails] How to introduce kaminari with Slim and change the design
How to introduce jQuery in Rails 6
How to get along with Rails
How to run React and Rails on the same server
Introducing React to Rails with react-rails
[Rails] How to use rails console with docker
[Rails] How to use the map method
[Rails 5.x] How to introduce free fonts
How to build Rails 6 environment with Docker
How to decorate the radio button of rails6 form_with (helper) with CSS
[Rails] How to get the user information currently logged in with devise
How to compare only the time with Rails (from what time to what time, something like)
How to display the text entered in text_area in Rails with line breaks
I want to introduce the committee with Rails without getting too dirty
[Rails] How to apply the CSS used in the main app with Administrate
[Rails] How to decide the destination by "rails routes"
[Swift] How to link the app with Firebase
[Rails] How to easily implement numbers with pull-down
How to build API with GraphQL and Rails
[Rails] How to build an environment with Docker
How to build the simplest blockchain in Ruby
Try to summarize the common layout with rails
How to check Rails commands in the terminal
[Rails] How to easily introduce slick (slider function)
[Rails] How to read the XML file uploaded from the screen with Hash type
[Rails] How to register multiple records in the intermediate table with many-to-many association
[Rails] How to operate the helper method used in the main application with Administrate
How to write Rails
Introduce Vue.js to Rails
How to uninstall Rails
How to change the action with multiple submit buttons
How to make batch processing with Rails + Heroku configuration
How to set the display time to Japan time in Rails
[Rails] How to search by multiple values ​​with LIKE
How to push an app developed with Rails to Github
How to delete a new_record object built with Rails
How to make an almost static page with rails
[Ruby on Rails] How to change the column name
How to manually generate a JWT with Rails Knock
[Rails] I don't know how to use the model ...
[Rails] How to change the column name of the table
Organized how to interact with the JDK in stages
[How to insert a video in haml with Rails]
[Rails] How to deal with URL changes after render
How to query Array in jsonb with Rails + postgres
[Rails] How to get the contents of strong parameters
Addicted to the webpacker that comes standard with Rails 6
How to get started with creating a Rails app
[Docker + Rails] How to deal with Rails server startup failure
[Rails] How to display an image in the view
[Ruby On Rails] How to use simple_format to display the entered text with line breaks
[Rough explanation] How to separate the operation of the production environment and the development environment with Rails
[Rails] How to solve the error "undefined method` visit'" when using Capybara with Rspec
How to automatically generate ER diagram when migrating with Rails6
How to take a screenshot with the Android Studio emulator
[rails] How to post images
How to set environment variables when using Payjp with Rails
I tried to introduce Bootstrap 4 to the Rails 6 app [for beginners]
[Rails] How to use enum
Back to top button made only with Javascript (rails, haml)