Guide (Remote React App)

An example project guide in creating a Remote React App

Guide (Remote React App)

Github repository for this Walkthrough Guide: https://github.com/zesty-io/zesty-remote-react-example

Getting Started with the Example App

Let's start by cloning the example app

cd path/to/your/projects/folder
git clone https://github.com/zesty-io/Zesty-Remote-React-Example
cd Zesty-Remote-React-Example

Now, let's install and run the app

npm install
npm start

Understanding the Example Project

In this project, we are using two custom endpoints, /-/basic-api/homepage.json and /-/custom/menulist.json

In our React code, we perform a GET request to these endpoints This can be seen in src/Home.js and src/Menu.js.

//Home.js
import React, { Component } from "react";

export default class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      homeData: {}
    };
  }
  componentDidMount() {
    fetch("http://burger.zesty.site/-/basic-api/homepage.json")
      .then(response => {
        return response.json();
      })
      .then(data => {
        console.log(data);
        this.setState({ homeData: data });
      });
  }
  render() { // greatly simplified for explanation, see the full file on Github
    return (
      <div data-spy="scroll" data-target="#site-navbar" data-offset="200">
        <h1 className="site-heading no- mb-3">
          {this.state.homeData.data &&
            this.state.homeData.data.splash_title}
        </h1>
        <h2 className="h5 site-subheading mb-5 no-">
          {this.state.homeData.data &&
            this.state.homeData.data.splash_description}
        </h2>
      </div>
    );
  }
}

Note how the only difference between the local and remote examples is componentDidMount

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.

Additionally, it's not too much different to change this to work locally instead of remotely, as the prior guide shows.

Updated almost 2 years ago