Build your image gallery with Contentful and React
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.
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.
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
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.
