React CMS Learn how to use Cosmic JS to power content for your projects using tools you love.

React CMS

React

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

Installation

To add Cosmic-powered content to your existing application, here are the recommended steps:

1. Install the NPM module

npm i cosmicjs

2. Configure your Bucket

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

3. Get your Objects

const objects = (await bucket.getObjects()).objects

4. Use your Objects in your code:

const runExample = async () => {  
  const objects = (await bucket.getObjects()).objects
  objects.map(obj => {
    console.log(obj.title, obj.slug)
  })
}
runExample()

Read the docs for more API options and features.

React Starter

Install a Cosmic-power starter application 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