Get Started with React

This technology has no Slice Machine integration

This framework has no integration with Prismic's developer tool, Slice Machine. You can still build a Prismic website with this technology by using Prismic's Legacy Builder. However, if you're starting a new project with Prismic, we strongly recommend using a technology that integrates with Slice Machine: Next.js or Nuxt.

This guide will teach you how to make a web app with React and Prismic.

If you're looking for information on using Prismic with a React framework, see our Next.js or Gatsby documentation:

If you want to jump right in, proceed to the Install step:

Curious about pricing? Prismic has an unlimited free tier for projects with one user. To learn more, see our pricing page:

What technical skills do I need?

If you're a developer building a project with Prismic and React, we recommend that you already have a basic knowledge of JavaScript, CSS, React, and API querying.

If a developer is setting up Prismic for you, you won't need any technical knowledge. Prismic is designed to be used by anyone.

Why should I use Prismic with React?

Every great website starts with content.

React is an amazing tool for building interactive web apps, and it has a fantastic ecosystem of add-ons to manage every part of your website. How should you manage your content in React? The most important part of your website (the reason you have a website) deserves a tool.

Prismic is the tool for your content. What's more, Prismic is designed to integrate smoothly with React, with a logical content architecture that maps directly to React components.

Plus, Prismic adds some super-powers to your website, like image optimization, content versioning, scheduling, and user permissions.

Does Prismic have a React integration?

Yes, Prismic provides a React integration to fetch and display your content. This guide will teach you how to use Prismic's React package.

If you would like to contribute or provide feedback for the integration, see the integration's GitHub page for more details.

What package version does this guide use?

This guide uses @prismicio/react v2. If you have used Prismic with React previously, you may have used prismic-reactjs. For information on the differences between the two versions and how to upgrade from the old package to the new one, see the migration guide.

For information on how to use prismic-reactjs, see the README on npm.

Have questions or comments?

If you have ideas for how to improve this documentation, we'd love to hear from you on the Prismic Community Forum.

Five steps to get started

This guide will walk you through five steps to deploying your website and creating content.

Before you get started…

This guide assumes that you have already created a React project. If you don't have one, check out the Create React App or Vite docs for instructions to get started.

Here's what we'll go over:

Was this article helpful?
Not really
Yes, Thanks

Can't find what you're looking for? Spot an error in the documentation? Get in touch with us on our Community Forum or using the feedback form above.