React starter with Contentful

Building a React application with Contentful is straightforward — with help from this guide that is! This React starter shows you how to use the Contentful API to retrieve data from the headless React CMS, display entries using React components, and filter those entries using Contentful tags and React hooks.

video thumbnail for the video with the id bz7mu7fzk6

What is React

React is an open-source JavaScript library created by Meta. It lets you build user interfaces for your web applications by breaking your UI into small, reusable, encapsulated pieces called “components.”

Source code and dependencies

Create a new React project on your local machine using our React + Contentful starter template.

Clone the repository.

Install node dependencies.

Create account and secrets

Create a Contentful account with an empty space. Go to your Contentful space and
- Find your Space ID
- Create an access token for the Content Delivery API
- Create an access token for the Content Management API.

Create an environment file

Copy the “.env.example” file in your cloned repository. Rename it “.env.”

Update your “.env” file with the Space ID, Content Management Token, and Content Delivery Token from your Contentful space.

Set up the content model

This project comes with a Contentful set up command that imports the required content model and adds sample content to your space.

Run the command below to set up the content model. This will require your environment file from the previous step.

Run the development server

In the terminal run:

Your browser will automatically open and navigate to localhost:1234

You should see a simple website with interactive checkboxes.

From there, you should be able to filter out images based on the tags you’ve set in Contentful.