React tutorial
![video thumbnail for the video with the id bz7mu7fzk6](https://embed-ssl.wistia.com/deliveries/45741cb9f49ff869067a1beef7240db1a0136ce8.jpg?image_crop_resize=774?image_crop_resized=810x464)
Create a new React project on your local machine using our React + Contentful starter template.
Clone the repository.
Install node dependencies.
or
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.
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.
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.
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.
![React + Contentful logos in curly brackets](https://images.ctfassets.net/fo9twyrwpveg/6BLtJC3GrBznkO6JzEd1hW/c3707eb09365acc6e99c92b12f027fe8/React.png)
![React, NPM and Contentful logos with plus icons](https://images.ctfassets.net/fo9twyrwpveg/7gvPKURpakqG3NLSeuLggZ/293a13867d7dd7089aa68e974961ce5e/ReactNPM.png)
![GraphQL, React and Contentful logos with plus icons](https://images.ctfassets.net/fo9twyrwpveg/6WdpyBUZLx5NxtQNivGBxi/8fdd1e01dfba442a7bc7269d66823f2b/React_and_Graphql.png)