DEV Community 👩‍💻👨‍💻

Norris Chebl
Norris Chebl

Posted on • Updated on

Using Rails API With React

Maybe you started using the traditional MVC (Model, View, Controller) outline for your rails apps. But now that you're using a frontend framework like React, you simply want to store your data and implement most of your logic in your backend. Great.

So what does that mean? And how do you do that?

You can use a Rails API. This simply means that you can render a bunch of JSON files that can communicate with your frontend.

For example, say you want to display a page with all of your books. You would typically have something like this in your controller.rb:

class BooksController < ApplicationController
   def index
     @books = Book.all
   end
end


Enter fullscreen mode Exit fullscreen mode

and something like this in your index.html.erb:

<% @books.each do |book| do %>
     <%= book.title %>
<% end %>

Enter fullscreen mode Exit fullscreen mode

Now that you're using React, you don't need to use views anymore. React is your new "views."

Let's go back to your controller. Now, we can render a JSON file with all of your books and their attributes (you will see why you need this in just a minute):

class BooksController < ApplicationController
   def index
     books = Book.all
     render json: books
   end
end


Enter fullscreen mode Exit fullscreen mode

Don't forget your routes:

  resources :books

Enter fullscreen mode Exit fullscreen mode

If you run our server ("rails s" in your terminal), you will see a JSON file that looks like this:

{
    "books": [
              {"title": "Harry Potter",
               "author": "JK Rowling"
              },

              {"title": "The Cat in the Hat",
               "author": "Dr. Seuss"
              }
             [
}

Enter fullscreen mode Exit fullscreen mode

Now you can go to your frontend, and fetch this API data to use how you'd like. For example:

fetch('http://localhost:3000/books', {
        headers: {
            'Content-Type': 'application/json',
            Accept: 'application/json',
            Authorization: token
        }
    })
      .then(res => res.json())
      .then(data => this.setState({
             allBooks: data
           })
      )
    };
Enter fullscreen mode Exit fullscreen mode

If you console.log(allBooks), you should see that you now have access to all of that data in your frontend.

What's really awesome about this is that you can handle most of the heavy logic required to showcase your data in your backend and then simply fetch the data when necessary.

You can even set up different urls to hold specific data by using params in your controller.

  def index
    if params[:release_month]
      books = Book.by_release_month(params[:release_month])
      render json: books
    else
      books = Book.all
      render json: BookSerializer.new(books)
    end
  end
Enter fullscreen mode Exit fullscreen mode

This is the ".by_release_month" method we used in our Book model:

class Book < ApplicationRecord
  belongs_to :author

  def self.by_release_month(release_month)
    books = Books.filter{ |book| 
      release_month == Date::MONTHNAMES[Date.today.month]
    }
  end

end
Enter fullscreen mode Exit fullscreen mode

This is how we can fetch these books with the new params in React:

fetch('http://localhost:3000/books?release_month={month}')
    .then(res => res.json())
    .then(data => { 
      // Do what you want
     })
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

🌚 Browsing with dark mode makes you a better developer by a factor of exactly 40.

It's a scientific fact.