React CMS Learn how to use Cosmic JS to power content for your React applications.

React CMS

React

Cosmic JS makes it easy to manage content for your React websites and applications.

Installation

Here are the recommended steps to add Cosmic-powered content to your application:

1. Login to Cosmic JS and add Objects to a new or existing Bucket.

2. Install the official Cosmic JS NPM module

npm i cosmicjs

3. Connect to your Bucket

const Cosmic = require('cosmicjs')
const bucket = Cosmic().bucket({ slug: 'your-bucket-slug' })

4. Get and use the Objects in your code:

const runExample = async () => {  
  const objects = (await bucket.getObjects({
    type: 'blog-posts'
  )).objects
  console.log(objects)
}
runExample()

Read the docs for more API options and features. For more info about Buckets, Objects, and Metafields check out the Getting Started guide.

React Starter

Install the Cosmic JS React Starter in a few commands:

npm i -g cosmic-cli
cosmic init react-starter
cd react-starter
cosmic start

React CMS Articles

Developer Community: React Articles
How to Build a Sticky Notes App Using React and Redux
How to Build a ToDo App Using React, Redux and Webpack
How to Build a Cross-Platform Blog Using React Native and Node.js
Build an Appointment Scheduler Using React, Twilio and Cosmic JS

React CMS Resources

React Website Boilerplate
React News App
Cosmic JS Docs
Official JavaScript Client
Cosmic JS GitHub
Video: How to Build a Cosmic JS Extension Using Create React App

React Example with the GraphQL API

  Back to Knowledge Base

Cosmic JS is your React CMS solution

Use the Cosmic JS Headless CMS to power content for any website or app.

Trusted by digital teams all over the world