Introducing React to Rails with react-rails

Hi everyone, this time I'll show you how to introduce React to Rails using a gem called "react-rails". There are multiple ways to deploy React in Rails, but I chose it because it's probably easy and common. As a caveat, it depends on Rails, so I think you like it or not.

By the way, the official document can be accessed from the following URL. URL of react-rails: https://github.com/reactjs/react-rails#server-side-rendering

I will introduce it according to the following flow.

--Premise --Introduction of react-rails --Create component --Output with view

Premise

(1) The app has already been created with rails-new etc. ② Use rails 5.0 or later

Introduction of react-rails

Write the following at the bottom of the Gemfile.

gem 'webpacker'
gem 'react-rails'
$ bundle install
/*①*/ $ rails webpacker:install
/*②*/ $ rails webpacker:install:react
$ rails generate react:install

Note that the commands ① and ② can only be executed if rails is 5.0 or later version!

Now you're ready to go! !!

Create component

To describe React, it is common to create files in a directory called components. It's okay to create it manually, but let's create it according to the official documentation. Execute the following command in the terminal etc.

$ rails g react:component HelloWorld greeting:string

Then the following files will be created.

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

This completes the file creation.

Output in view

Let's output the contents of React from the created component.

app/views/posts/index.html.erb


<%= react_component('HelloWorld', greeting: 'Mike') %>

Let's see the output contents in the browser. You should see "Greeting: Mike".

By the way, in addition to the components directory, you can also create your own directory. Execute the following command.

$ rails g react:component my_subdirectory/HelloWorld greeting:string

Then, in the command executed earlier, a js file was created under the components directory, but this time it will be as follows.

app/javascript/my_subdirectory/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

I was able to create a js file under "my_subdirectory" specified in the command. When calling to view, describe the following.

app/views/posts/index.html.erb


<%= react_component("my_subdirectory/HelloWorld", { greeting: "Hello from react-rails." }) %>

If you check your browser, you should see "Greeting: Hello from react-rails."

It's convenient because it can be easily called with the react_component method. I've just introduced it, so I'm going to play around with it.

As an aside, it's been getting colder these days. I'm too angry and I'm hitting the keyboard with my mannequin-like hands. (If you turn on the heating, yeah ...)

Thank you for reading until the end! !!

Recommended Posts

Introducing React to Rails with react-rails
Introducing CircleCI to Rails
Introducing Bootstrap to Rails 5
Introducing full calendar to Rails application
How to get along with Rails
[Rails] How to use rails console with docker
Deploy to heroku with Docker (Rails 6, MySQL)
[Rails 6] Introducing Google Maps to your portfolio
The process of introducing Vuetify to Rails
How to build Rails 6 environment with Docker
[Rails] Introducing jquery
[Rails] Introducing devise
Downgrade an existing app created with rails 5.2.4 to 5.1.6
Introducing Rspec with Ruby on Rails x Docker
Introducing New Relic to Rails apps on Heroku
Deploy Rails to ECS Fargate with AWS Copilot
One way to redirect_to with parameters in rails
I want to play with Firestore from Rails
[Rails] How to easily implement numbers with pull-down
How to build API with GraphQL and Rails
Rails beginners tried to get started with RSpec
[Rails] Introducing pay.jp (from view customization to registration)
Try to summarize the common layout with rails
[Rails] I want to load CSS with webpacker
Easy to display hello world with Rails + Docker
Introducing # 15 pundit to build a bulletin board API with authentication authorization in Rails 6
How to make batch processing with Rails + Heroku configuration
[Rails] How to search by multiple values ​​with LIKE
How to write Rails
How to push an app developed with Rails to Github
How to delete a new_record object built with Rails
Rails deploy with Docker
How to make an almost static page with rails
[Rails 6] RuntimeError with $ rails s
How to manually generate a JWT with Rails Knock
[Rails] Introducing Active Hash
Introduce Vue.js to Rails
Handle devise with Rails
[Rails] Learning with Rails tutorial
I want to authenticate users to Rails with Devise + OmniAuth
[How to insert a video in haml with Rails]
How to uninstall Rails
[Rails] How to deal with URL changes after render
Introducing Rails6 + Bootswatch / Honoka
[Rails] Test with RSpec
How to query Array in jsonb with Rails + postgres
Addicted to the webpacker that comes standard with Rails 6
Supports multilingualization with Rails!
How to get started with creating a Rails app
[Docker + Rails] How to deal with Rails server startup failure
Double polymorphic with Rails
How to automatically generate ER diagram when migrating with Rails6
How to set environment variables when using Payjp with Rails
Tutorial to create a blog with Rails for beginners Part 1
[Rails] I tried to create a mini app with FullCalendar
I want to push an app made with Rails 6 to GitHub
Back to top button made only with Javascript (rails, haml)
Use Java included with Android Studio to build React Native
I was addicted to setting default_url_options with Rails devise introduction
[Rails] Create API to download files with Active Storage [S3]
A series of steps to create portfolio deliverables with Rails