How to Build a Simple Blog Using React and GraphQL

In this tutorial I’m going to show you how to create a simple blog using React, and . This is going to be the fastest and most light-weight blog built on a modern technology stack. Let’s get started. GraphQL Cosmic JS TL;DR View the demo Install the Simple React Blog on Cosmic JS View the codebase on GitHub Getting Started Make sure that you have Node.js and NPM installed on your machine, if not, to install the latest version. visit the Node.js website Let’s start by creating a folder for our app. In your favorite terminal run the following commands: mkdir simple-react-blogcd simple-react-blog Now let’s add a package.json file to import all of our dependencies for our app: vim package.json Add the following to our package.json file: It’s a pretty light dependency list for a pretty light app. So what we will install is: 1. for our promise-based HTTP client to get content from to the .2. as our React Universal framework.3. for dynamic routes.4. for our server-side web app framework.5. to handle our user interface. Axios Cosmic JS GraphQL API Next.js Next routes Express React Our scripts are necessary for starting our app in production and development. Run the following command to install our dependencies: npm i Building Our Blog Next, let’s begin building our blog pages. Create a pages folder and add the index.js file: vim index.js and add the following to index.js: There are a few things happening here: 1. We are importing our essential modules: Axios, Lodash, and other helpers and components.2. We are pulling in some partials: Header and Footer, you can .3. We query the to only return the stuff we need: _id, type_slug, slug, title, metadata and created_at.4. We set the main props in our component to the `cosmic` object. And use lodash to parse through Posts and Global Object types.5. We return our posts array data and image URLs into our main blog feed. reference these partials from the codebase on GitHub Cosmic JS GraphQL API Single Post Query For our single post, we add a `post` property to our props. Post is found by matching the query.slug to the Object slug: Check out the . full file on GitHub Conclusion This is the abridged version of the available for download in the . The full codebase includes a single post page view as well as a page dedicated to each author’s posts. and deploy this app in a few clicks from your Cosmic JS dashboard by to your Cosmic JS Bucket. Cosmic JS makes a great for all of your React apps. Simple React Blog Cosmic JS Apps page View the full codebase on GitHub installing the app React CMS I hope you enjoyed this tutorial, if you have any questions and . reach out to us on Twitter join our community on Slack