Guide (Remote React App)

Github repository for this Walkthrough Guide:

Getting Started with the Example App

Let's start by cloning the example app
cd path/to/your/projects/folder
git clone
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.
import React, { Component } from "react";
export default class Home extends Component {
constructor(props) {
this.state = {
homeData: {}
componentDidMount() {
.then(response => {
return response.json();
.then(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">
{ &&}
<h2 className="h5 site-subheading mb-5 no-">
{ &&}
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.