Using ReactJS with Agility CMS
Tags: react, video, javascript, tutorial
Published: 2019-09-04 16:00:23

This tutorial was originally written by James Vidler and published on the [Agility CMS help pages](https://help.agilitycms.com/hc/en-us/articles/360031121692--Get-Started-with-the-Content-Fetch-API-React-Blog).

_This tutorial requires you to have signed up for an Agility subscription using the **Blog** template. Don't have it? [Sign up now for free](https://account.agilitycms.com/sign-up) (forever)!_

Introduction
------------

[Create React App](https://create-react-app.dev/) is the easiest way to get started with React JS. It's popularity, simplicity, and ease of use make it an ideal candidate for building modern web apps. This is precisely why we've chosen to open-source an [Agility CMS Create React App](https://github.com/agility/agility-create-react-app) web app to demonstrate the various ways you can incorporate the [Agility CMS Content Fetch JS SDK](https://github.com/agility/agility-content-fetch-js-sdk) in your React web apps.

Explore the CMS, get the source code, run it locally and deploy your site all in a matter of minutes.

Explore the CMS
---------------

Agility has three core components for managing your content, these are _Pages_, _Shared Content_, and _Media & Documents_. 

### Pages

Where you can manage and create your pages. They are the main representation of a website's structure.

![Agility CMS - Pages](https://help.agilitycms.com/hc/article_attachments/360034672212/mceclip0.png)

Adding a page in the CMS will allow your web app to render that page automatically using dynamic routing.

A _Page_ uses a _Page Template_ to define _Content Zones_ where editors can add content. A _Content Zone_ can then have one or many _Modules_ added to it.

_Modules_ are the functional components of a page. They have fields associated with them which allow Editors to input content.

![Agility CMS - Module](https://help.agilitycms.com/hc/article_attachments/360034676552/mceclip1.png)

In this React site, each _Module_ corresponds to a React Component:

Which translates to what we see in the browser:

![Jumbotron Preview Screenshot](https://help.agilitycms.com/hc/article_attachments/360034677252/mceclip1.png)

### Shared Content

This is where your store your structured content that is NOT specific to a page. In this example, we have a list of _Posts_, and an item representing our _Global Header_ content.

![Shared Content](https://help.agilitycms.com/hc/article_attachments/360034677632/mceclip2.png)

Media & Documents
-----------------

This is where you store static assets for your web app. Typically this is used for images, video and pdfs, but can also store whatever you'd like including font assets, etc. Everything stored here is served over a high-availability CDN.

![Media and Documents](https://help.agilitycms.com/hc/article_attachments/360034735412/mceclip3.png)

Get the Code
------------

Download a copy of the source code for this site from GitHub:

```shell
 git clone https://github.com/agility/agility-create-react-app
 ```


Project Setup
-------------

You should be able to run the site as-is, but it's not using your _API Key_ and _Guid_ . Let's change that so it's using your _API key _and _Guid_ so you can modify content in the CMS and see the change reflected in your web app.

We've already created two _API Keys_ you can use (you can create more):

1.  **defaultlive** - when using this _API Key_, only _Published_ content will be returned by the Content Fetch API.
    
2.  **defaultpreview** - when using this _API Key_, All the latest content will be returned by the Content Fetch API, regardless of whether it is in _Staging_ or _Published_
    

See [Authenticating your Content Fetch API Calls](https://help.agilitycms.com/hc/en-us/articles/360032225191) for more details on how authentication works.

### Retrieving your Fetch API Key and Preview API Key

This React SPA accepts both a _fetchAPIKey _and a _previewAPIKey_ so you can use the same application to both _Preview_ and view _Live/Published_ content.

Please see [Retrieving your API Key(s), Guid, and API Url](https://help.agilitycms.com/hc/en-us/articles/360031919212) for retrieving these values. The _Guid_ will be the same for both live and preview, but they will have different _API Key_ values. Make sure you take note of the API Key values for both **defaultlive **and **defaultpreview**_._

Open the file **src/agility.config.js **and replace the _guid_ and _fetchAPIKey/previewAPIKey_ properties with your values.

Run it Locally
--------------

Once you have your **agility-config.js** values set, install the dependencies using NPM:

```shell
npm install
```

To run the site locally, since this is a Create React App (CRA), we use:

```shell
npm start
```

If all is well, you should see the following:

![Page Preview Screenshot](https://help.agilitycms.com/hc/article_attachments/360034762232/mceclip1.png)

Deploying your Web App
----------------------

See [Deploying your Agility CMS Create React App Web App](https://help.agilitycms.com/hc/en-us/articles/360032203552) for instructions on how you can deploy your site to a **static** web host.

Learn More
----------

Want to learn more about Create React App? Check out the [Getting Started doc](https://create-react-app.dev/docs/getting-started) for Create React App.