React Ruby Build Guide

Zesty.io Open Source ATOM Plugin Start Trial

Search…

This Ruby on Rails app uses React to pull data from Zesty.io endpoints, showing the simplicity of using the platform. The example consumes the Homepage and Menu endpoints from Zesty.io.

Github: https://github.com/zesty-io/zesty-remote-react-ruby-example​
Getting Started with the Example App
Let's start by cloning the example app​
1
cd path/to/your/projects/folder
2
git clone https://github.com/zesty-io/Zesty-Remote-React-Ruby-Example
3
cd Zesty-Remote-React-Ruby-Example
Copied!
Now, let's install and run the app (Make sure you have Ruby version 2.4.4 or higher. To manage your versions and to keep your system Ruby separate, we recommend using rvm)
1
bundle install
2
rails g react:install
3
rails s
Copied!
Understanding the Example Project
In this project, we are using two custom endpoints, /-/basic-api/homepage.json and /-/custom/menulist.json. To retrieve this data, we've put a React component inside our Ruby app. This streamlines the process significantly, since now we can simply use the same code as that from our Remote React App Guide.
In our React code, we perform a GET request to these endpoints. This can be seen in app/assets/javascripts/components/_home.js.jsx and app/assets/javascripts/components/_menu.js.jsx.
Home.js
1
class Home extends Component {
2
  constructor(props) {
3
    super(props);
4
    this.state = {
5
      homeData: {}
6
    };
7
  }
8
  componentDidMount() {
9
    fetch("http://burger.zesty.site/-/basic-api/homepage.json")
10
      .then(response => {
11
        return response.json();
12
      })
13
      .then(data => {
14
        console.log(data);
15
        this.setState({ homeData: data });
16
      });
17
  }
18
  render() { // greatly simplified for explanation, see the full file on Github
19
    return (
20
      <div data-spy="scroll" data-target="#site-navbar" data-offset="200">
21
        <h1 className="site-heading no- mb-3">
22
          {this.state.homeData.data &&
23
            this.state.homeData.data.splash_title}
24
        </h1>
25
        <h2 className="h5 site-subheading mb-5 no-">
26
          {this.state.homeData.data &&
27
            this.state.homeData.data.splash_description}
28
        </h2>
29
      </div>
30
    );
31
  }
32
}
Copied!
Using componentDidMount, we're able to fetch our JSON and render it accordingly. After we load it in, it's just a matter of parsing a JS Object.

iOS App Guide

Jekyll Static Site

Last modified 3yr ago

Export as PDF

Copy link

Contents

Getting Started with the Example App

Understanding the Example Project