Installing React in Rails and creating your first component

Table of Contents

1. Installing React
2. Rendering our first component
3. Exploring our React component

1. Installing React

With our app up and running it's time to get to the nitty gritty of implementing React into our project. If you're not too familiar with React, it's a JavaScript framework maintained by Facebook that's taken the world of front end development by storm in the last few years.

If you want to learn more about React check out their official site or work through their tutorial. I'm going to continue under the assumption that you have at least a basic understanding of how React works but I will explore some key ideas that we'll be using along the way.

React-Rails

We'll be using the React-Rails gem to integrate React functionality into our app. The process for adding the gem is the same as we did for geocoder - open your Gemfile in your project's root folder and add the following line underneath the geocoder gem:

gem 'geocoder'
gem 'react-rails'

Next, we need to run the installer. You'll need to run a few commands to get everything running - these are taken straight from the documentation installation:

bundle install
rails webpacker:install
rails webpacker:install:react
rails generate react:install

These commands will create a bunch of files but the most important are:

• app/javascript/components/ directory for your React components
• ReactRailsUJS setup in app/javascript/packs/application.js
• app/javascript/packs/server_rendering.js for server-side rendering

The installation instructions ask us to add <%= javascript_pack_tag 'application' %> to the head of our application.html.erb file but this isn't necessary as this is already included as part of the turbolinks import in the same place.

2. Rendering our first component

A hallmark of React is its focus on creating modular interfaces with reusable components. Build a component once and you can render it as many times as you want. We'll be using a few small components to build a basic UI for our app but first we need to make sure we can actually render a component in our view.

First let's follow the React-Rails tutorial to build a simple hello world greeting. It's a quick and easy way to check that everything is working before we start building our map component.

To create a React component in Rails we can use the generate command again. Instead of typing out generate each time, we can shorten it to g:

rails g react:component HelloWorld greeting:string

You should see that a file was created:

Running via Spring preloader in process 440408
      create  app/javascript/components/HelloWorld.js

This means we have our first component! Now we need to connect it to our view to check that everything is working. For this we need to go to our /rails-react-google-maps/app/views/places/index.html.erb file again and replace everything in there with the following:

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

If your rails server is still running, close it (Ctrl+C) and re-open it (rails s). Go back to localhost:3000 and you should have a simple sentence on your page.

Our first React component is rendering in our view!

3. Exploring our React component

Let's have a quick look at what we created with the component generator. Navigate to /rails-react-google-maps/app/javascript/components/HelloWorld.js in your code editor:

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 won't go into the details of how a React component is built or the difference between class-based and functional components (this video does a great job of explaining), but what I want to draw your attention to is the props.

React gives us the ability to pass properties, or props, from a parent component to its children. In our app, the application.html.erb represents the parent which is rendering our HelloWorld component. When we render the component like so:

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

We're passing it a greeting string. If we dig into our component, you'll see this line:

Greeting: {this.props.greeting}

On our index page we're shown Greeting: Hello from react-rails. because we're telling the HelloWorld component that we want that greeting property (this.props.greeting) to be equal to Hello from react-rails.. This gives us a lot of flexibility and customization when building and rendering components and this will play a key role in displaying data on our future map component.

Give it a try, in your application.html.erb add another HelloWorld component and pass your own string! If you want to learn more about how props work, check out the Components and Props documentation from the React team.

Now that we're connected to React and we know how to make components, it's time to move on to the main feature of our app - the map!