Create a simple React blog with WordPress

Tags: javascript, react, wordpress
Published: 2022-01-29 14:03:36

I have wanted to create a development blog for the longest time now and I have tested a lot of methods from creating everything from scratch to using a CMS but I knew that I wanted the front end to be built with react and to look good and none of the solutions that I tried were good enough for me until today.

I found this library called Frontity which would connect to WordPress’s REST API and it would get everything you need from there, it is really simple to use and requires none too little setup to be able to start the blog.

# The setup


Why reinvent the wheel and build a new CMS where we already have WordPress which is amazing and open source?

It is just as easy as running the command
```bash
$ npx frontity create <app-name>
```
After running this command you would get to choose from 2 themes, mars and WordPress’s 2020 theme I choose to go with the mars theme because that is what I was looking for but you can go with any and there are even themes online you can choose or just build your own.

After you initiate the project you just have to set up the pointing to WordPress, so if you go into your project directory and edit the file `frontity.settings.js` there you will have to edit 2 values
```js
    const settings = {
      "name": "my-first-frontity-project",
      "state": {
        "frontity": {
          "url": "https://test.frontity.org/",
          "title": "Abod's blog",
          "description": "A look into my brain 🧠"
        }
      },
      "packages": [
        {
          "name": "@frontity/mars-theme",
          "state": {
            "theme": {
              "menu": [
                [
                  "Home",
                  "/"
                ],
                [
                  "Portfolio",
                  "https://abodsakka.xyz/"
                ]
              ],
              "featured": {
                "showOnList": true,
                "showOnPost": true
              }
            }
          }
        },
        {
          "name": "@frontity/wp-source",
          "state": {
            "source": {
              "url": "https://test.frontity.org/"
            }
          }
        },
        "@frontity/tiny-router",
        "@frontity/html2react"
      ]
    };

```

and change `https://test.frontity.org/` to your own domain or you can just leave the same for now to just see test it out, but these links are where frontity is going to try to contact the WordPress REST API to get the information needed as posts, tags, authors and such.

You can now run the website by typing
```bash
$ npx frontity dev
```

That is how simple it is to create your blog with WordPress as a headless CMS.

For me instead of hosting my own WordPress intense on my server i just use 000webhost but you can use what ever you want and then so that people wont be able to get to the front end of my website i just created a new folder in the `public_html/wp_content/themes/` directory and created 2 files in there for wordpress to know it is a theme, `style.css` and `index.php`. I left the `style.css` empty but populated the `index.php` with a redirect script
```php
<?php
    header( "Location: https://blog.abodsakka.xyz" );
?>
```

So now everytime someone tries to get to my WordPress front end they are going to be redirected to the React app instead.

# Addons


## Prismjs


As a developer, I like to post some code snippets into my blog from time to time and I think all developers could agree that syntax highlighting is a good thing to have for readability so I wanted to use Prism.js with it.

It was just as simple as installing Prism.js with npm or yarn

```bash
$ npm i prismjs
    or
$ yarn add prismjs
```



and then in my `<project>/packages/mars-theme/src/post.js` i just added
```js
import Prism from "prismjs";
```


And then added all the languages that I would want to use, for intense
```js
import "prismjs/components/prism-typescript"
```

And the same thing for the plugins
```js
import "prismjs/plugins/line-numbers/prism-line-numbers"
```

And now in order for Prism engine to run we have to create a use Hook which is called in the `Post` function
```jsx
useEffect(() => {
    Prism.highlightAll();
}, []);
```



This is not going to take effect with the normal wordpress code block so I use an addon

[![](https://abodsblog.000webhostapp.com/wp-content/uploads/2022/01/image.png)](https://wordpress.org/plugins/aph-prism-highlighter/)

Done !

## Cookie consent

With today’s GDPR we have to tell the user that we are using cookies on this website so how would we set it up? I am using a react library called [react-cookie-consent](https://www.npmjs.com/package/react-cookie-consent) and it is just as simple as installing it with
```bash
$ npm i react-cookie-consent
    or
$ yarn add react-cookie-consent
```

Importing it to our `<project>/packages/mars-theme/src/index.js`
```jsx
import CookieConsent from "react-cookie-consent";    
```


And then adding it at the bottom of out `Theme` function
```jsx
    <CookieConsent
              location="bottom"
              buttonText="Got it!"
              cookieName="myAwesomeCookieName2"
              style={{ background: "#2B373B"}}
              buttonStyle={{ color: "#fff", backgroundColor: "#1f38c5", fontSize: "24px" }}
              expires={150}
            >
              This website uses cookies to enhance the user experience.{" "}
    </CookieConsent>

```

And that is it, now you will have a cookie consent screen on your website that easy.

Hope this was useful and thanks for reading!