Why use a Headless CMS as React’s CMS?
Using a headless CMS for your React application eliminates cumbersome layers of technological setup and maintenance from your React CMS that are necessary for coupled and decoupled CMS systems (e.g. WordPress, Drupal, Joomla, Shopify, Magento, etc.) Headless CMS data is accessible and extensible, providing future-proofed delivery via API to any destination. This circumvents investing in CMS infrastructure maintenance, allowing development focus to be on presentation and application business logic.
{
title: "A Wonderful Blog Post About Earth",
slug: "a-wonderful-blog-post-about-earth",
content: "This is a great day for our team...",
metadata: {
hero: "https://cdn.cosmicjs.com/my-image.jpg",
publish_date: "Apr 18",
author: {
full_name: "John Doe",
link: "https://our-website.com/authors/john",
avatar: "https://cdn.cosmicjs.com/johnny.jpg"
}
}
}
Cosmic is the Best Headless CMS for React
Cosmic's headless CMS makes it a breeze to manage and deliver React CMS content for websites, applications, or platforms. Our feature set is unmatched - it's our goal to provide a product that eliminates your need to work on CMS infrastructure. We also provide pre-built examples so you can kick-start your projects, or facilitate new purposes and use cases. What's more, our React resources and documentation are unparalleled.
With Cosmic, developers build better React applications, faster.
Top-Tier React CMS Features
Cosmic offers world-class API speed, industry-leading uptime reports, and a verbose feature set built for React - including:
- Component composition with Objects
- Media / file management
- Easy access to documentation and code samples
- Extensive NPM module
- and more
Use Cosmic to Deploy React Starter Applications in Minutes
React Resources
What else makes Cosmic the best headless CMS to use for React developers?
React CMS Documentation
Uptime Guarantee Means Stable React Apps
The most important factor of any reliable network-based React application is its availability or uptime. Without a reliable uptime, access to the React CMS will be impossible, inconsistent, or otherwise unstable. Never fear downtime on Cloud or Enterprise plans. Enterprise plans start at a 99.95% uptime guarantee. Check our status page for historical uptime on our serverless, cloud infrastructure.
Get started with Cosmic
Why choose the Cosmic Headless CMS?
Industry-Leading Professionals Choose Cosmic
When you build applications with Cosmic, you're in good company. Everyone from Developers to Directors of Marketing to Fortune 500 CTO's has had great things to say about Cosmic.
one of the fastest-growing communities for developers of all skill sets.
Getting Started with Cosmic as Your React CMS
Use the following step-by-step guide to get started using Cosmic as a headless CMS for your React apps.
Initial Setup
Before doing any coding, let's set up a Bucket with content using the following steps:
- Create or log in to your Cosmic account.
- Install the Simple Blog by clicking "Select App" then following the steps to create a new Bucket with the demo content. Alternatively, you could start by creating a new Bucket from scratch and add an Object Type titled
Poststhat has the slugpostsand add a File Metafield titledHerowith keyhero. Then add a few Objects with your own demo content.
Now that we have some demo content, we can integrate the content using the following steps to make Cosmic your headless CMS for React.
1. Install a new React app
You can use Create React App to install a new React app that includes tooling and configurations.
npm i -g create-react-app
create-react-app cosmic-react-app
2. Install the Cosmic NPM module and SWR
cd cosmic-react-app
yarn add cosmicjs swr
3. Add the following code into your src/App.js file
Find your Bucket slug and API read key in Your Bucket > Basic Settings > API Access after logging in.
// src/App.js
import React from 'react'
import useSWR from 'swr'
import Cosmic from 'cosmicjs'
const api = Cosmic()
// Set these values, found in Bucket > Settings after logging in at https://app.cosmicjs.com/login
const bucket = api.bucket({
slug: 'YOUR_BUCKET_SLUG',
read_key: 'YOUR_BUCKET_READ_KEY'
})
const fetchPosts = async () => {
const data = await bucket.getObjects({
type: 'posts',
props: 'slug,title,metadata' // Limit the API response data by props
})
return data
}
function App() {
const { data, error } = useSWR('fetch-posts', fetchPosts) // Use SWR hook
if (!data)
return <div>Loading...</div>
const posts = data.objects
return <div>
{ posts.map(post =>
<div key={post.slug} style={{marginBottom: 20}}>
{
post.metadata.hero &&
<div><img alt="" src={`${post.metadata.hero.imgix_url}?w=400`}/></div>
}
<div>{post.title}</div>
</div>)
}
</div>
}
export default App
4. Start your app
Start your app, and go to http://localhost:3000. Dance 🎉
npm start
See more guides in React CMS documentation and other headless CMS-based integrations including Next.js and Gatsby.
Frequently Asked Questions
React (or ReactJS, React.js) is a JavaScript library for building user interfaces. It enables you to build robustly dynamic single-page web applications by using a component-based architecture, purposed for greater code reusability.
React can also render on the server-side using Node.js, or on mobile apps (compilation) using React Native. Originally developed at Facebook, it is under active development by employees at Facebook and the open source community.
React only provides the “front-end” user interface (UI), handling the visual presentation of an application’s content. React applications must be complemented with a compatible “back-end” database to store and retrieve content; further, that data source needs a way to be managed. This data storage and management demands the need for a content management system (CMS).
To provide content to a React CMS application, data for the React application is servable:
- Client-side (from the browser or app) on-demand
- Server-side on-demand
- At compilation (build) time
A React CMS is created when a React UI is integrated with a CMS to handle content. To communicate with React, a CMS must offer a compatible application programming interface (API). For example:
A headless CMS can be used as a flexible data source for your React application to supply content to any or all of: client-side, server-side, or during compilation. Compilation refers to the build process commonly known as Jamstack approach, which deploys pre-rendered web pages to a static website hosting provider.
React CMS Data Compatibility and Accessibility
Using available API tools like our REST, GraphQL, or Cosmic NPM module empower developers to create powerful user experiences using Cosmic as the React CMS.
React, formerly and often still incorrectly referred to as React.js, is one of the most popular JavaScript frameworks. React is only the new brand name for what was formerly known as React.js. In 2017, Facebook dropped the ".js" from React's name.
A headless CMS like Cosmic natively facilitates React’s component-based JavaScript architecture. React components integrate with Cosmic’s content model, supporting JSON data Objects, Metafields, and Object Relationships, facilitating creation of reusable React CMS components. This native JavaScript component synchronicity with React makes Cosmic headless CMS ideal to facilitate any React application’s content needs.
Headless CMS data is securely delivered by the Cosmic APIs within industry standard 256-bit SSL encryption in transit and in storage in our global data centers. Additional security via two-factor authentication is also available for free. This industry standard level of security comes included with all Cosmic accounts.
In contrast, when using a coupled CMS system, you are responsible for providing these security features with none of the above security features included.
Community support is crucial to our headless CMS culture. Cosmic’s intention is to provide headless CMS resources that save time and money using our solution as your React CMS. To support and supplement this, Cosmic regularly publishes educational resources, open source libraries, example applications/boilerplates, extensions, hosts events, and more.
Paid dedicated support is offered in either dedicated or enterprise support plans, each is optional with 24/7 technical assistance.
You can also find us during normal and abnormal business hours in our #technical slack channel.
