Welcome to the Learnetto Blog

When you start using React with Rails, one of the frustrating problems you quickly run into is trying to access associated model data from your React component.

Let's say we are building a chat app with Rails and React. We have three models, Chatroom, Message and User, which have the following relationships between them:

class Chatroom < ApplicationRecord
  has_many :messages, dependent: :destroy
end

class Message < ApplicationRecord
  belongs_to :chatroom
  belongs_to :user
end

class User < ApplicationRecord
  has_many :messages, dependent: :destroy
end

And we have a Message component for rendering individual messages:

import React from 'react'

const Message = ({message}) => 
  <p>
    {message.user.name}: {message.body}
  </p>

export default Message

In addition to the message body we also want to display the user's name.

If you're using a standard Rails ERB or Haml view template, you can simply write something like:

<%= @message.user.name %>

And that will just work even if you didn't include the user data in your database query in the controller.

However,  unlike in a Rails view, if we call message.user.name inside our React component without having specifically included that data in the prop sent to the component, it will throw an error. 

While a Rails template is actually able to call the model on-the-fly and get data it doesn't have, we don't have that luxury with React.

We need to explicitly compose the JSON with the associated User model data because a React component can only access the JSON data we provide it.

There are many ways to include the associated model data, including manually composing the JSON in the controller, defining a custom as_json method  on the model or using ActiveModelSerializers.

One of the cleanest and most flexible ways is to use jbuilder, which gives you a simple DSL for declaring JSON structures. The jbuilder gem comes included with Rails.

In the example above, we can include our user data in the message JSON by defining it in a _message.json.jbuilder  file like this:

json.(message, :body, :id)
json.user do
  json.extract! message.user, :id, :name, :image
end

The jbuilder DSL is quite powerful and allows you to do all sorts of custom structuring of the data.

For example, let's say we want to send all the messages in chronological order and user data for a particular chatroom to a Chatroom component. We can define the chatroom json like this:

json.(chatroom, :name, :id)
json.messages(chatroom.messages
                .sort_by{|m| m[:created_at]}) do |message|
  json.extract! message, :id, :body
  json.user do
    json.extract! message.user, :id, :name, :image
  end
end

Check out the jbuilder documentation to learn more about all its features.

The full code of the Chat app is on Github and there's a live demo running here.

You can also learn how to build it yourself in this two-part video tutorial -  How to build a chat app with Rails 5.1 ActionCable and React.js Part 1 and Part 2.

$ rails new myapp --webpack=react

Please subscribe to the Learnetto Podcast in iTunes and rate us to help us reach more people.

gem 'react-rails'

bundle install

Rails developers should learn React because there's growing market demand for developers who know both. Learning to use React will make you more money and a better developer.

In many ways, React is to the modern frontend, what Rails is to the backend - there are many alternatives, but React has the best combination of simplicity, power and community momentum to make it a great choice.

Web UIs have matured a lot over the last decade. We're doing more complex things to build better user experiences on the web. jQuery has served well but even a medium-sized project can now quickly turn into the Flying Spaghetti Monster. React offers a simple yet powerful alternative to spaghetti code.

Please subscribe to the Learnetto Podcast in iTunes and rate us to help us reach more people.

Please subscribe to the Learnetto Podcast in iTunes and rate us to help us reach more people.

Please subscribe to the Learnetto Podcast in iTunes and rate us to help us reach more people.

Please subscribe to the Learnetto Podcast in iTunes and rate us to help us reach more people.

Please subscribe to the Learnetto Podcast in iTunes and rate us to help us reach more people.

Please subscribe to the Learnetto Podcast in iTunes and rate us to help us reach more people.

Please subscribe to the Learnetto Podcast in iTunes and rate us to help us reach more people.

1. I put up a landing page with a Mailchimp mailing list signup form. 
2. One thing I'm working on next is offering a free course as an incentive for signing up.
3. I've been promoting the landing page on Twitter (using both my personal and business accounts).
4. I made a Twitter card. FINALLY. After trying and failing 10 times, I did it. Twitter makes it unnecessarily hard to do this. So I had just given up on it. But Justin lays out the process for doing this clearly in his book. Most important thing to remember: you need to add a credit card to your account to use this feature, but you won't be charged unless you run an ad campaign.
5. I've started sharing my process - in this very note you're reading now!
6. I've added analytics tracking using Segment. Again, Justin describes how to do this in his book very clearly. With Segment set up, I was able to start sending my analytics data to Mixpanel and Intercom.