The easiest way to manage content with React
When it comes to authoring content, pair React with a CMS that’s been built for single-page applications.
Try our React demo project now!
  • Best practices
  • 30s setup
Proudly powered by DatoCMS + React:
Versa
https://versa.agency
Multiopticas
https://multiopticas.pt/
Hike One
https://hike.one/
Spotlyte
https://thespotlyte.com/
Virtue
https://www.virtueworldwide.com/
Strava #GiveKudos
https://givekudos.strava.com/
React is fast, and so your content should be

If your content is always fetched from a single geographical location, there’s no point in building a website with a serverless architecture.

DatoCMS offers your content from a CDN with edges all around the globe, minimizing latency.

Read more about our Worldwide CDN

GraphQL Content API
Ask for what you need, get exactly that

Our Content Delivery API is built with GraphQL. That means powerful developer tools, multiple resources in a single request and complete control over the data your website downloads.

Read more about our GraphQL API

{}
We are quite happy because finally we have a real CMS :)
Johan Frick
CTO at Coolstuff
State of the art for responsive and progressive images

Serving optimized images is incredibly hard, but using our GraphQL Content API and our React component, you can implement lazy loaded, responsive images in one line of code. Avoid any layout jumping, offer instant previews of images while they load. It’s like magic.

Read more about our React components!
Before
With DatoCMS
DatoCMS Preview API = content editors happiness

If you're using React as a single-page application (SPA), you can easily switch GraphQL endpoint to fetch real-time previews of the changes you make to any content stored in Dato (text, images, videos). Give it a try, it's magic!

// src/App.js
import { GraphQLClient, ClientContext } from 'graphql-hooks'
const endpoint = process.env.PREVIEW_MODE ?
'https://graphql.datocms.com/preview' :
'https://graphql.datocms.com/';
const client = new GraphQLClient({ url: endpoint });
function App() {
return (
<ClientContext.Provider value={client}>
<Movie />
</ClientContext.Provider>
);
}
// src/Movie.js
import React from "react";
import { useQuery } from "graphql-hooks";
const Movie = () => {
const { loading, error, data } = useQuery(
query: `{
movie(filter: { title: { eq: "Inception" } }) {
title
releaseDate
actors {
name
}
}
}`
);
if (loading) return <div>Loading...</div>;
if (error) return <div>Something bad happened</div>;
return (
<div>
<h1>{data.movie.title}</h1>
{/* ... */}
</div>
);
};
Acme Inc. - DatoCMS
Create new Blog post
Title
The Best Video Games to Play
Author
Dan Poe
Content
Text
Lorem ipsum....
Gallery
Text
Lorem ipsum....
CTA label
Try it now!
CTA URL
http://...
Quote
Lorem ipsum....
Author
Steve Jobs
Add a new block:
Text
Gallery
Quote
Call to action
Save Blog Post
A component-centric CMS, just like React

Reacts makes using components easy right from the get-go, and you should expect the same from your CMS. A component-based approach allows developers to clearly divide work amongst themselves and progress without having to rely on each other every step of the way.

Read more about DatoCMS modular blocks

React + DatoCMS demo
pages/homepage.js - Visual Studio Code
Try our Project starter
Start your new React SPA in minutes

Learn from our best-practice project. Fully configured and deployed on Netlify or ZEIT. Source included.

We power experiences for over half a billion users