How to Build a Blog using React Static and Cosmic JS
Tags: react, cosmicjs, jamstack, reactstatic
Published: 2019-06-28 17:47:29

---
title: How to Build a Blog using React Static and Cosmic JS
published: true
description: 
tags: React, Cosmic JS,JAMstack, React Static
cover_image: https://cosmic-s3.imgix.net/1dec34b0-9847-11e9-ad6e-41285ed8149f-Artboard.png?w=1000
---

In this tutorial, I'm going to show you how to create a simple but blazing fast blog using [React](https://reactjs.org/) , [React Static](https://react-static.js.org/) , and [Cosmic JS](https://cosmicjs.com/) . Grab some coffee & lets build cool app.

# TL;DR
* [Demo](https://cosmicjs.com/apps/react-static-blog)
* [Download Source Code](https://github.com/cosmicjs/react-static-blog)

# Prerequisites

You need to install latest stable version [Node JS](https://nodejs.org/) and NPM. Let's get started with our technology stack.

# What is React Static?

React-Static is a very fast and powerful progressive static site generator implemented based on React and its ecosystem. It is very lightweight. It’s very fast, SEO-ready, and is the most React-friendly static-site library on the planet.

# What about Cosmic JS?

Cosmic JS is headless CMS which is used for building faster app. It is very easy to store data and easy to build apps like this.

# Create React Static app
It is very easy to create React Static app. Just follow below steps:

Install the CLI tool:
 ```
$ npm i -g react-static
# or
$ yarn global add react-static
```

Create a new project!
```
react-static create
```
It will ask for name of project then give it as **coffee-blog**. After that it will ask for selecting template so you have to select **basic**.

# Create new bucket in Cosmic JS

To create blog app we will require data. For this we will be using power of Cosmic JS. Create free account on [Cosmic JS](https://cosmicjs.com/) and create new empty bucket & name it as coffee-blog. For every blog it will have three object types:

* Title
* Content
* Image

So add this property in bucket along with some data. [Follow this steps to create bucket in Cosmic JS](https://cosmicjs.com/getting-started).


# Integrate Cosmic JS into React Static App
Create new file in coffee-blog project called config.js which will store the Cosmic JS Bucket, read_key & write_key.

{% gist https://gist.github.com/sumitkharche/50afb7dbaec434f51e10018267868df1 %}


Now we have to fetch data from Cosmic JS bucket, we are using **graphql** to do this. By default react static app will call jsonplaceholder api. So remove this code and replace below code into **static.config.js**.

{% gist https://gist.github.com/sumitkharche/a7caf712e4cb0b0fd2a3a8e1eaf70b05 %}


We are not going to learn CSS in this tutorial so add below code inside the **src/App.css** file.

{% gist https://gist.github.com/sumitkharche/6402caefb80f7e2a01479720deb4f52c %}

Inside the **src/App.js** file add below jsx code into the return function which will show the navigation bar.

{% gist https://gist.github.com/sumitkharche/fda0f044a18d968b13995557c5428690 %}

For creating landing page where we are showing list of blog posts, change the **src/pages/index.js** with the below code. Here we are getting posts data that we have fetch using **withRouteData** HOC.

{% gist https://gist.github.com/sumitkharche/6da1c6d08fb9d921f3dadf01db302ef3 %}

Create new file under **src/pages** called post.js which will have individual post. So when we click on any post from homepage then this component will render to show post details. Add below code in it.


{% gist https://gist.github.com/sumitkharche/063f8835bd76505682914e23bfa2fe20 %}

Now we have created homepage and a post component & also fetch data from Cosmic JS using Graphql query.  So now run the below command to see the amazing coffee-blog.

```
$ npm run start
```
Open http://localhost:3000 to see your blog.

To build application in production mode you just need to run
```
$ npm run build
```
To test the production build before publishing, run below command
```
$ npm run serve
```

# Deploy it

We can now deploy our application on any hosting platform. I recommend deploying it on [Netlify](https://www.netlify.com/) because it supports project structures like this and can quickly create deployments.

# Conclusion

In this article I have demonstrated you how to create a blogging application using React Static and Cosmic JS. The Cosmic JS Community has a lot of examples on how to handle integration with email functions, download functions, and third party platforms.

I really hope that you enjoyed this little app, and please do not hesitate to send me your thoughts or comments about what could I have done better.

If you have any comments or questions about building apps with Cosmic JS, [reach out to us on Twitter](https://twitter.com/cosmic_js) and [join the conversation on Slack](https://cosmicjs.com/community).