Breaking News: Grepper is joining You.com. Read the official announcement!

Setup A Ruby on Rails API With React JS

Ben Kiboma answered on November 23, 2022 Popularity 5/10 Helpfulness 1/10

answer Setup A Ruby on Rails API With React JS

Setup A Ruby on Rails API With React JS

Comment

#Adding api prevents the app from creating views
rails new bookstore --api
#add to the gemfile
#This enables us whitelist our front end react application
gem 'rack-cors' 
#Run bundle
#Get into cors.rb and uncomment block and replace origin content with * 
to allow anyone make request to the API
# Generate a scaffold
rails g scaffold book title:string body:text
rails db:migrate

##SEE ROUTES
rails routes

The resources method also sets up URL and path helper methods that 
we can use to keep our code from depending on a specific route 
configuration. 
The values in the "Prefix" column above plus a suffix of 
	_url
    _path 
form the names of these helpers. 



#Create namespaces
namespace :api do
  namespace :v1 do
    resources :books
  end
end

#create
controller > api > V1
and move generated books controller into the folder

#change the class name to start with
Api::V1::

#create a react app and call it any name
npx create-react-app bookable

#Check if both apps are working
rails s
npm run start

#Create a book from the rails console
rails c
Book.create!(title: "My first book", body: "Hello world")

#The added data should be visible in your rails page

#Set API request
npm i axios

#Create new folder
bookable > src > components >books.js

	type rfce # This will generate our books component
    
    #Below is complete file
      import React from "react";

      function Books(props) {
        return (
          <div>
            <h1>These books are from the API</h1>
            {props.books.map((book) => {
              return (
                <div key={book.id}>
                  <h2>{book.title}</h2>
                  <p>{book.body}</p>
                </div>
              );
            })}
          </div>
        );
      }

      export default Books;

#Go to:
bookable > src > App.js
Delete entire header file

#Add 
import axios from 'axios';
import Books from './components/books';

const API_URL="http://localhost:3000/api/v1/books"

function getAPIData() {
	return axios.get(API_URL).then((response) => response.data)
}

#Below is complete file

    import "./App.css";
    import axios from "axios";
    import Books from "./components/books";
    import { useEffect, useState } from "react";

    const API_URL = "http://localhost:3000/api/v1/books";

    function getAPIData() {
      return axios.get(API_URL).then((response) => response.data);
    }

    function App() {
      const [books, setBooks] = useState([]);

      useEffect(() => {
        let mounted = true;
        getAPIData().then((items) => {
          if (mounted) {
            setBooks(items);
          }
        });
        return () => (mounted = false);
      }, []);

      return (
        <div className="App">
          <h1>Hello</h1>
          <Books books={books} />
        </div>
      );
    }

    export default App;

Popularity 5/10 Helpfulness 1/10 Language ruby

Source: Grepper

Tags: ruby

Link to this answer
Share Copy Link

Contributed on Nov 23 2022

Ben Kiboma

0 Answers Avg Quality 2/10

Setup A Ruby on Rails API With React JS

Contents

More Related Answers

Setup A Ruby on Rails API With React JS

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.