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
(1) The app has already been created with rails-new etc. ② Use rails 5.0 or later
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! !!
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.
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