Github repository for this Walkthrough Guide: https://github.com/zesty-io/zesty-local-react-example​
First, we'll need to install the pull-zesty
package. (For more detail, see the docs page on pullzesty
)
git clone https://github.com/zesty-io/pullzestycd pullzestynpm link
Next, lets clone the example app​
cd path/to/your/projects/foldergit clone https://github.com/zesty-io/Zesty-Local-React-Examplecd Zesty-Local-React-Example
Now, all we need to do to run is install the required dependencies
npm installnpm start
Note how calling npm start
also calls pullzesty
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
.​
Home.jsimport React, { Component } from "react";let homepageJSON = require("./data/homepage.json");​export default class Home extends Component {constructor(props) {super(props);this.state = {homeData: {}};}componentDidMount() {const loadData = () => {let data = JSON.parse(JSON.stringify(homepageJSON));this.setState({ homeData: data });};loadData();}render() { // greatly simplified for explanation, see the full file on Githubreturn (<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>);}}
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.