React tutorial

Building a React application with Contentful is straightforward — with help from this tutorial that is! This 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.
Web page illustration and react logo
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.”
1
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.

or

2
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.

3
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.

4
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.

5
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.

Get started with React and Contentful

React + Contentful logos in curly brackets

React apps toolkit

React, NPM and Contentful logos with plus icons

What’s your query? Learn GraphQL with React and Contentful

GraphQL, React and Contentful logos with plus icons

Choose your technology path with our language and framework agnostic CMS

Bundle of technologies that can be used with Contentful.
Partner with us
Contact us
Structured Content
add-circle arrow-right remove style-two-pin-marker subtract-circle remove