phocks a dev blog

React hooks explained as simply as I humanly possibly can

Hooks let you do more things with function components.


You can use state with the useState() hook.

eg. const [count, setCount] = useState(0).

Now count equals 0.

Update count with setCount(1).

Now count equals 1 and the component will update.


You can also trigger side effects with the useEffect() hook.

eg. useEffect(() => console.log(count), [count]).

Now it will console log every time count updates.

hint: use [] to only trigger the side effect once when the component is mounted and just leave off the second argument to trigger the effect after any state change.

hint 2: if you return a function from your side effect it will run that function after the componet unmounts.


Here’s some code.

import React, {useState, useEffect} from "react";

function Counter(props) {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = count;
  }, [count]);

  function countHigher() {
    setCount(count + 1);
  }

  return (
    <p onClick={countHigher}>
      {count}
    </p>
  );
}

And that’s pretty much it.

If you want a more in-depth look read the docs.

async/await explained as simply as I humanly possibly can

Put async in front of a function.

eg. async function test() {} or const test = async () => {}

Now you can use await inside that function to pause and wait for values that take their time getting back to us.

Here’s an async function:

// Define our async function and let it use await
async function test() {
  const response = await fetch("https://api.github.com/"); // Wait for the Promise
  const json = await response.json(); // Wait to resolve the Promise
  console.log(json); // Log the response
}

test(); // Run the function

Okay that’s it! Get it now?

If not, go here for a better explanation. Or leave a comment and I’ll try to help out.

Updates for 2019 etc.

Me again. We’ve had a baby. Things have been hectic, but good.

I’m still software developing over at ABC News.

I’ve written a few beginner coding articles over at DEV.to. I thought I might repost them here too, over the next few days.

If you haven’t already, please check out Quoke and give it a star on GitHub.

Thanks a bunch, and see you soon.

Josh

Pushing your charting library to its limit (literally)

I did another chart.

How to host a Ghost 2.0 blog for free on Glitch

Ghost 2.0 is here!

I’ve always liked Ghost as a blogging platform. It’s open source. It runs on Node.js. I even momentarily moved this blog over to Ghost for a little while back in the day.

The only problem is it’s relatively hard to set up hosting for it. You could always just pay the monthly fee, but it’s pretty expensive (as far as blog hosting goes).

But there is a way to set up a Ghost blog on Glitch. Here’s how you do it:

  • Go to glitch.com and click New Project -> hello-sqlite. This will start a new Glitch project
  • Click the package.json file on the left and then Add Package and search for “ghost” then click it to install
  • Create a New File on the left and call it config.development.json with the following in it:
{
  "database": {
      "client": "sqlite3",
      "connection": {
          "filename": "./.data/sqlite.db"
      },
      "debug": true
    },
    "paths": {
      "contentPath": "content/"
    },
    "server": {
      "host": "127.0.0.1",
      "port": 3000
    },
    "url": "https://ghost2.glitch.me"
}
  • Replace the ghost2 part in url with the subdomain of your Glitch project (it will be something like lime-hen and you can change it)
  • Now we need to make a content folder. The easist way to do this is to click New File and type content/temp.txt then press enter
  • Finally, we need to replace the contents of server.js with the following:
const ghost = require('ghost');

ghost()
    .then(function (ghostServer) {
        return ghostServer.start();
    });

And that’s it! You should have a working Ghost blog. If you click on Show up at the top left you should see your new blog.

You can delete all the extra files in public/ etc too.

Also, don’t forget to go to <your-blog>.glitch.me/ghost and set up an admin password etc and write your first post.

Have fun Ghosting!


PS. Here’s one I prepared ealier so you can see the code for yourself (or simply remix it and it should work right out of the box hopefully).