zesty.io

Product

Use Cases

Integrations

Learn

Guide (Local React App)

An example project guide in creating a Local React App

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

Getting Started with the Example App

#

First, we'll need to install the pull-zesty package. (For more detail, see the docs page on pullzesty)

Next, lets clone the example app

Now, all we need to do to run is install the required dependencies

Note how calling npm start also calls pullzesty

Understanding the Example Project

The zesty.yaml file defines what endpoints we rely on. In this case, we are using two custom endpoints, "/-/basic-api/homepage.json" and "/-/custom/menulist.json"

We save the .json from these endpoints into src/data and use the data in our React code. This can be seen in src/Home.js and src/Menu.js.

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

Using componentDidMount, we're able to load in 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 remotely instead of locally, as the next guide will show.

Start Here

We will listen to your needs and walk you through how Zesty can help your team.

Connect with Content Experts

Book a free 15-minute consultation with a content expert. Discuss your application, pain points and requirements. Understand how Zesty's lower total cost of ownership, features, functionality can elevate your business by creating extraordinary digital experiences.

Trusted By

zesty customer logo Sonyzesty customer logo Rocket Leaguezesty customer logo Singlifezesty customer logo Acornszesty customer logo Phoenix Sunszesty customer logo Wattpadzesty customer logo Corner Shopzesty customer logo Bjs

Enter your details to connect with a Content Expert

First Name

Last Name

Email

Phone (optional)

Company

Please tell us about your project (optional)

G2 MOMENTUM LEADER

zesty customer logo zesty customer logo zesty customer logo zesty customer logo